/* ────────────────────────────────────────────────────────────────────────── * Keiran Trace · Design Tokens * keirantrace.com · style guide v0.3 * * Drop this file into the site and import it once. Both dark and light * themes are defined — toggle with a `data-theme` attribute on : * * ← default if attribute is absent * * * The `prefers-color-scheme` rule below makes the OS preference the * automatic fallback when the user hasn't picked a theme. * * IMPORTANT: components must reference the SEMANTIC tokens * (--bg-field, --fg-default, --signal, …) — never the raw palette. * ────────────────────────────────────────────────────────────────────────── */ /* ── Shared tokens ──────────────────────────────────────────────────────── */ :root { /* Palette (raw values — never reference these directly in components) */ --color-cyan: #00B7FF; /* Signal / accent */ --color-onyx: #111111; /* Page field — the deepest layer */ --color-graphite: #1E1F22; /* Lifted surface — cards, panels */ --color-snow: #F6F8FB; /* Light surface / dark-mode text */ --color-white: #FFFFFF; /* Type stack */ --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --font-serif: "Instrument Serif", "Times New Roman", serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Type scale */ --fs-display: 4.25rem; /* 68px — Geist 600, hero */ --fs-h1: 2rem; /* 32px — Geist 500 */ --fs-h2: 1.375rem; /* 22px — Geist 500 */ --fs-body: 0.9375rem; /* 15px — Geist 400 */ --fs-small: 0.8125rem; /* 13px — UI labels */ --fs-eyebrow: 0.6875rem; /* 11px — JetBrains Mono uppercase */ --fs-code: 0.8125rem; /* 13px — JetBrains Mono */ --lh-display: 0.96; --lh-h1: 1.1; --lh-h2: 1.2; --lh-body: 1.6; --tracking-display: -0.025em; --tracking-h1: -0.02em; --tracking-body: 0; --tracking-eyebrow: 0.08em; /* Radii */ --radius-sm: 4px; --radius: 8px; --radius-md: 10px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px; /* Spacing scale */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* Motion */ --ease: cubic-bezier(.3,.7,.4,1); --t-fast: .12s; --t-base: .15s; --t-slow: .25s; /* Z-index */ --z-base: 1; --z-overlay: 50; --z-modal: 100; /* Accent stays cyan across themes — it's the system's signal. */ --signal: var(--color-cyan); --signal-glow-a: color-mix(in oklab, var(--signal) 45%, transparent); --signal-glow-b: color-mix(in oklab, var(--signal) 22%, transparent); --signal-glow-c: color-mix(in oklab, var(--signal) 10%, transparent); } /* ── Dark theme (default) ───────────────────────────────────────────────── */ :root, :root[data-theme="dark"] { color-scheme: dark; --bg-field: var(--color-onyx); /* page background — deepest layer */ --bg-surface: var(--color-graphite); /* cards, panels, dropdowns */ --bg-raised: color-mix(in oklab, var(--color-graphite) 86%, var(--color-snow)); --bg-high: color-mix(in oklab, var(--color-graphite) 74%, var(--color-snow)); --fg-default: var(--color-snow); --fg-muted: color-mix(in oklab, var(--color-snow) 52%, transparent); --fg-dim: color-mix(in oklab, var(--color-snow) 32%, transparent); --fg-on-signal: var(--color-snow); --line: color-mix(in oklab, var(--color-snow) 10%, transparent); --line-strong: color-mix(in oklab, var(--color-snow) 18%, transparent); --link: var(--signal); --link-glow: var(--signal-glow-b); --grid-line: color-mix(in oklab, var(--color-snow) 10%, transparent); --halo: radial-gradient(1100px 700px at 100% -10%, color-mix(in oklab, var(--signal) 14%, transparent), transparent 60%); } /* ── Light theme ────────────────────────────────────────────────────────── */ :root[data-theme="light"] { color-scheme: light; --bg-field: var(--color-snow); --bg-surface: var(--color-white); --bg-raised: color-mix(in oklab, var(--color-snow) 70%, var(--color-onyx)); --bg-high: color-mix(in oklab, var(--color-snow) 50%, var(--color-onyx)); --fg-default: var(--color-onyx); --fg-muted: color-mix(in oklab, var(--color-onyx) 58%, var(--color-snow)); --fg-dim: color-mix(in oklab, var(--color-onyx) 40%, var(--color-snow)); --fg-on-signal: var(--color-snow); --line: color-mix(in oklab, var(--color-onyx) 10%, transparent); --line-strong: color-mix(in oklab, var(--color-onyx) 18%, transparent); --link: var(--signal); --link-glow: transparent; /* glow doesn't read on white — drop it */ --grid-line: color-mix(in oklab, var(--color-onyx) 8%, transparent); --halo: radial-gradient(1100px 700px at 100% -10%, color-mix(in oklab, var(--signal) 8%, transparent), transparent 60%); } /* ── OS-preference fallback when no data-theme is set ───────────────────── */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; --bg-field: var(--color-snow); --bg-surface: var(--color-white); --bg-raised: color-mix(in oklab, var(--color-snow) 70%, var(--color-onyx)); --bg-high: color-mix(in oklab, var(--color-snow) 50%, var(--color-onyx)); --fg-default: var(--color-onyx); --fg-muted: color-mix(in oklab, var(--color-onyx) 58%, var(--color-snow)); --fg-dim: color-mix(in oklab, var(--color-onyx) 40%, var(--color-snow)); --line: color-mix(in oklab, var(--color-onyx) 10%, transparent); --line-strong: color-mix(in oklab, var(--color-onyx) 18%, transparent); --link-glow: transparent; --grid-line: color-mix(in oklab, var(--color-onyx) 8%, transparent); } } /* ── Selection + link defaults ──────────────────────────────────────────── */ ::selection { background: color-mix(in oklab, var(--signal) 40%, transparent); color: var(--fg-default); }