/* * Reveal design tokens — Vercel Geist * ----------------------------------- * A faithful port of Vercel's Geist design system (vercel.com/design). * Light-first; dark theme redefines the same token names via * prefers-color-scheme. application.css consumes ONLY the semantic * variables (Layer 2) and the Geist primitives it needs — no ad-hoc colors. * * Three layers: * 1. Palette — Geist primitives: gray ramp + alpha + the accent scales, * redefined wholesale under the dark media query. * 2. Semantic — what the app speaks (--bg, --surface, --text, --accent…). * 3. Scale — type (Geist Sans/Mono), spacing, radius, shadow, motion. * * Geist Sans / Geist Mono are loaded from Google Fonts in the layout . */ :root { /* ============================================================ * Layer 1 — Palette (Geist Light) * ============================================================ */ /* Core */ --geist-primary: #171717; --geist-secondary: #4d4d4d; --geist-tertiary: #006bff; /* Backgrounds */ --background-100: #ffffff; --background-200: #fafafa; /* Gray ramp */ --gray-100: #f2f2f2; --gray-200: #ebebeb; --gray-300: #e6e6e6; --gray-400: #eaeaea; --gray-500: #c9c9c9; --gray-600: #a8a8a8; --gray-700: #8f8f8f; --gray-800: #7d7d7d; --gray-900: #4d4d4d; --gray-1000: #171717; /* Gray alpha (translucent, layers over any surface) */ --gray-alpha-100: #0000000d; --gray-alpha-200: #00000014; --gray-alpha-300: #0000001a; --gray-alpha-400: #00000014; --gray-alpha-500: #00000036; --gray-alpha-600: #0000003d; --gray-alpha-700: #00000070; --gray-alpha-800: #00000082; --gray-alpha-900: #000000b3; --gray-alpha-1000: #000000e8; /* Blue — links / focus / info */ --blue-100: #f0f7ff; --blue-200: #e9f4ff; --blue-300: #dfefff; --blue-400: #cae7ff; --blue-500: #94ccff; --blue-600: #48aeff; --blue-700: #006bff; --blue-800: #0059ec; --blue-900: #005ff2; --blue-1000: #002359; /* Red — errors */ --red-100: #ffeeef; --red-200: #ffe8ea; --red-300: #ffe3e4; --red-400: #ffd7d6; --red-500: #ffb1b3; --red-600: #ff676d; --red-700: #fc0035; --red-800: #ea001d; --red-900: #d8001b; --red-1000: #47000c; /* Amber — warnings */ --amber-100: #fff6de; --amber-200: #fff4cf; --amber-300: #fff1c1; --amber-400: #ffdc73; --amber-500: #ffc543; --amber-600: #ffa600; --amber-700: #ffae00; --amber-800: #ff9300; --amber-900: #aa4d00; --amber-1000: #561900; /* Green — success */ --green-100: #ecfdec; --green-200: #e5fce7; --green-300: #d3fad1; --green-400: #b9f5bc; --green-500: #82eb8d; --green-600: #4ce15e; --green-700: #28a948; --green-800: #279141; --green-900: #107d32; --green-1000: #003a00; /* Focus ring (light) — 2px surface gap + 2px blue-700 ring */ --focus-ring: 0 0 0 2px var(--background-100), 0 0 0 4px var(--blue-700); /* ============================================================ * Layer 2 — Semantic (light) * ============================================================ */ --bg: var(--background-200); /* page canvas (Vercel's subtle off-white) */ --surface: var(--background-100); /* cards, panels, inputs */ --surface-alt: var(--gray-100); /* table head, sunken alt rows */ --surface-sunken: var(--gray-100); /* deepest wells (plan frame) */ --border: var(--gray-400); /* hairline default */ --border-strong: var(--gray-500); /* hover / emphasized border */ --text: var(--geist-primary); /* gray-1000 */ --muted: var(--gray-900); /* secondary text — AA on surface */ --muted-soft: var(--gray-700); /* placeholder / helper */ --accent: var(--blue-700); /* links, selection, focus, active pin */ --accent-strong: var(--blue-800); --accent-wash: var(--blue-100); /* Primary action is neutral (gray-1000 fill) — the Geist button */ --action: var(--gray-1000); --action-hover: var(--gray-900); --on-action: var(--background-100); --success-bg: var(--green-100); --success-text: var(--green-900); --danger: var(--red-800); --danger-border: var(--red-400); --danger-bg: var(--red-100); --danger-text: var(--red-900); /* ============================================================ * Layer 3 — Type / Spacing / Shape / Shadow / Motion * ============================================================ */ /* Geist Sans for UI + prose; Geist Mono for codes, IDs, timestamps */ --font-ui: "Geist", "Geist Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --weight-reg: 400; /* copy, labels */ --weight-med: 500; /* buttons, nav, field labels */ --weight-semi: 600; /* headings — Geist headings are 600, not light */ /* Spacing — Geist 4px unit */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-16: 64px; /* Radius — flat system: sharp corners everywhere, pills stay round */ --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-pill: 9999px; /* Shadows — flat system: no elevation. Structure comes from hairline borders. (The focus ring is defined separately as --focus-ring; it stays.) */ --shadow-card: none; --shadow-popover: none; /* Motion — Geist easing */ --ease: cubic-bezier(0.175, 0.885, 0.32, 1.1); --dur-state: 150ms; --dur-popover: 200ms; /* Layout */ --container: 1440px; /* content column — topbar + page share it */ } /* ============================================================ * Dark theme — redefine palette + semantic by the same names * ============================================================ */ @media (prefers-color-scheme: dark) { :root { /* Core */ --geist-primary: #ededed; --geist-secondary: #a0a0a0; --geist-tertiary: #006efe; /* Backgrounds — Geist dark is true black */ --background-100: #0a0a0a; --background-200: #000000; /* Gray ramp (dark) */ --gray-100: #1a1a1a; --gray-200: #1f1f1f; --gray-300: #292929; --gray-400: #2e2e2e; --gray-500: #454545; --gray-600: #878787; --gray-700: #8f8f8f; --gray-800: #7d7d7d; --gray-900: #a0a0a0; --gray-1000: #ededed; /* Gray alpha (dark — white over surface) */ --gray-alpha-100: #ffffff0f; --gray-alpha-200: #ffffff14; --gray-alpha-300: #ffffff1f; --gray-alpha-400: #ffffff24; --gray-alpha-500: #ffffff36; --gray-alpha-600: #ffffff52; --gray-alpha-700: #ffffff70; --gray-alpha-800: #ffffff8f; --gray-alpha-900: #ffffffb3; --gray-alpha-1000: #ffffffeb; /* Blue (dark) */ --blue-100: #0f1b2d; --blue-200: #10243e; --blue-300: #0f3058; --blue-400: #0d3868; --blue-500: #0a4481; --blue-600: #0091ff; --blue-700: #0072f5; --blue-800: #006efe; --blue-900: #47a8ff; --blue-1000: #ebf6ff; /* Red (dark) */ --red-100: #2a1314; --red-200: #3d1719; --red-300: #551a1e; --red-400: #671e22; --red-500: #842325; --red-600: #e5484d; --red-700: #ff6166; --red-800: #ff6166; --red-900: #ff8087; --red-1000: #ffe5e5; /* Amber (dark) */ --amber-100: #271700; --amber-200: #341c00; --amber-300: #4a2900; --amber-400: #573300; --amber-500: #693f05; --amber-600: #f5a623; --amber-700: #f5a623; --amber-800: #ffb224; --amber-900: #f1a10d; --amber-1000: #fef3dd; /* Green (dark) */ --green-100: #0b2211; --green-200: #0f2c17; --green-300: #11351b; --green-400: #143f20; --green-500: #1a512a; --green-600: #29bc56; --green-700: #3cce6c; --green-800: #45da6f; --green-900: #62e389; --green-1000: #e5fbeb; /* Focus ring (dark) — surface gap + blue-900 ring */ --focus-ring: 0 0 0 2px var(--background-100), 0 0 0 4px var(--blue-900); /* Semantic (dark) */ --bg: var(--background-200); --surface: var(--background-100); --surface-alt: var(--gray-100); --surface-sunken: var(--gray-100); --border: var(--gray-400); --border-strong: var(--gray-500); --text: var(--geist-primary); --muted: var(--gray-900); --muted-soft: var(--gray-700); --accent: var(--blue-800); --accent-strong: var(--blue-900); --accent-wash: var(--blue-200); --action: var(--gray-1000); /* light fill on dark — Geist invert */ --action-hover: var(--gray-900); --on-action: var(--background-100); --success-bg: var(--green-200); --success-text: var(--green-900); --danger: var(--red-700); --danger-border: var(--red-500); --danger-bg: var(--red-200); --danger-text: var(--red-900); --shadow-card: none; --shadow-popover: none; } }