Magic Hour Twilight

魔幻时刻暮光

Webdarkambient calm glass cinematic

疲惫生活里的精神角落：随时间变化的暮色天空，磨砂卡片，一颗金色太阳。

A quiet corner of the day: a sky that shifts with the hour, frosted cards and one gold sun.

Magic Hour Twilight

18:42

好的界面不抢内容。今天的魔幻时刻，其余交给留白。

开始使用了解更多

本月进度62%

12:04 · 1,280 字

Web sample · dark

Palette

Type

标题 Display 永正文 Body — 好的界面不抢内容 1234567890Previews use your installed fonts; webfonts are not bundled.

Display	"Instrument Serif", "Noto Serif SC", "Songti SC", serif
Body	-apple-system, "PingFang SC", "Helvetica Neue", "Noto Sans SC", sans-serif
countdown	clamp(72px, 20vw, 132px) / 1, 400
window kind	22px serif
sub	15px / 1.65
eyebrow	13px, 0.18–0.22em tracking

Serif for display and number moments; tabular numbers. Single 560px column.

Shape & surface

radius · card	20px
radius · sheet	22px
radius · pill	999px
shadow	none
glass	18px blur · rgba(5, 10, 40, .4)

Cards blur(18px) with 1px rgba(255,255,255,.14) border; location pill blur(14px).

Motion

Sky colours (animated @property) and sun position transition over 2.5s ease.
Colour/background 1.2s; switch 0.2s.
Stars twinkle on a 5s loop. Everything slow and atmospheric.

Do / Don't

Do

Let the palette follow the time of day, shifting over ~2.5s.
Frosted cards with hairline borders.
Keep animation light and copy quiet; this is a private moment.

Don't

Don't use a solid light theme or hard shadows.
Don't use fast, snappy transitions or growth gimmicks.
Don't go wider than a 560px column.

Used in

magichournow.com

Sources

https://magichournow.com/v/a70993240f/styles.css (live CSS, no local repo)

Updated 2026-10-13

Export

/* Magic Hour Twilight / 魔幻时刻 暮光 — A quiet corner of the day: a sky that shifts with the hour, frosted cards and one gold sun. */
:root {
  --magichournow-twilight-bg: #0a1440;
  --magichournow-twilight-surface: rgba(5, 10, 40, .4);
  --magichournow-twilight-ink: #e9edff;
  --magichournow-twilight-muted: rgba(233, 237, 255, .66);
  --magichournow-twilight-accent: #ffc86e;
  --magichournow-twilight-accent-ink: #1a1408;
  --magichournow-twilight-line: rgba(255, 255, 255, .14);
  --magichournow-twilight-highlight: #ffc86e;

  --magichournow-twilight-pal-sky-0: #0a1440;
  --magichournow-twilight-pal-sky-1: #182c72;
  --magichournow-twilight-pal-sky-2: #4c5fa5;
  --magichournow-twilight-pal-ink: #e9edff;
  --magichournow-twilight-pal-gold: #ffc86e;
  --magichournow-twilight-pal-gold-ink: #1a1408;
  --magichournow-twilight-pal-sun-core: #fff8e1;
  --magichournow-twilight-pal-sun-rim: #ffd58c;
  --magichournow-twilight-pal-window-warm: #f6c98c;
  --magichournow-twilight-pal-window-dusk: #6d6fb0;

  --magichournow-twilight-font-display: "Instrument Serif", "Noto Serif SC", "Songti SC", serif;
  --magichournow-twilight-font-body: -apple-system, "PingFang SC", "Helvetica Neue", "Noto Sans SC", sans-serif;
  --magichournow-twilight-text-countdown: clamp(72px, 20vw, 132px) / 1, 400;
  --magichournow-twilight-text-window-kind: 22px serif;
  --magichournow-twilight-text-sub: 15px / 1.65;
  --magichournow-twilight-text-eyebrow: 13px, 0.18–0.22em tracking;

  --magichournow-twilight-radius-card: 20px;
  --magichournow-twilight-radius-sheet: 22px;
  --magichournow-twilight-radius-pill: 999px;
  --magichournow-twilight-glass-blur: 18px;
  --magichournow-twilight-glass-fill: rgba(5, 10, 40, .4);
  --magichournow-twilight-shadow: none;
}

/* Tailwind v4 — paste into your main CSS after @import "tailwindcss"; */
@theme {
  --color-bg: #0a1440;
  --color-surface: rgba(5, 10, 40, .4);
  --color-ink: #e9edff;
  --color-muted: rgba(233, 237, 255, .66);
  --color-accent: #ffc86e;
  --color-accent-ink: #1a1408;
  --color-line: rgba(255, 255, 255, .14);
  --color-highlight: #ffc86e;
  --font-display: "Instrument Serif", "Noto Serif SC", "Songti SC", serif;
  --font-sans: -apple-system, "PingFang SC", "Helvetica Neue", "Noto Sans SC", sans-serif;
  --radius-card: 20px;
  --radius-sheet: 22px;
  --radius-pill: 999px;
  --blur-glass: 18px;
}

// Tailwind v3 — tailwind.config.js
export default {
  theme: {
    extend: {
      colors: {
        "bg": "#0a1440",
        "surface": "rgba(5, 10, 40, .4)",
        "ink": "#e9edff",
        "muted": "rgba(233, 237, 255, .66)",
        "accent": "#ffc86e",
        "accent-ink": "#1a1408",
        "line": "rgba(255, 255, 255, .14)",
        "highlight": "#ffc86e",
      },
      fontFamily: {
        display: ["\"Instrument Serif\", \"Noto Serif SC\", \"Songti SC\", serif"],
        sans: ["-apple-system, \"PingFang SC\", \"Helvetica Neue\", \"Noto Sans SC\", sans-serif"],
      },
      borderRadius: {
        "card": "20px",
        "sheet": "22px",
        "pill": "999px",
      },
      backdropBlur: { glass: "18px" },
    },
  },
};