/* ============================================================ Starky — Design Tokens Mirror of docs/design.md. This is the single source of truth for colour, type, spacing, radius and elevation on the site. Change a value in design.md, change it here — they stay in sync. ONE token set, two colour skins: :root / [data-theme="light"] → the app's theme, and the light reference [data-theme="dark"] → the website (set on ) Identical custom-property names in both, so nothing downstream changes. `data-theme="light"` can be set on any element to island a light region inside the dark page — that is how the app mocks stay light. ============================================================ */ /* ---- Theme-independent: type, space, radius, layout, night blocks ---- */ :root { /* ---- Type families ---- */ --font-serif: "Newsreader", Georgia, "Times New Roman", serif; --font-sans: "DM Sans", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; /* ---- Type scale ---- */ --type-hero-size: 5.5rem; --type-hero-weight: 400; --type-hero-lh: 0.95; --type-hero-ls: -0.03em; --type-page-size: 3.5rem; --type-page-weight: 400; --type-page-lh: 1.05; --type-page-ls: -0.025em; --type-display-size: 3.75rem; --type-display-weight: 400; --type-display-lh: 1.05; --type-display-ls: -0.02em; --type-h1-size: 2.75rem; --type-h1-weight: 400; --type-h1-lh: 1.1; --type-h1-ls: -0.02em; --type-h2-size: 2.125rem; --type-h2-weight: 500; --type-h2-lh: 1.15; --type-h2-ls: -0.015em; --type-h3-size: 1.625rem; --type-h3-weight: 500; --type-h3-lh: 1.25; --type-h3-ls: -0.01em; --type-h4-size: 1.25rem; --type-h4-weight: 600; --type-h4-lh: 1.35; --type-h4-ls: -0.005em; --type-eyebrow-size: 0.8125rem;--type-eyebrow-weight: 600; --type-eyebrow-lh: 1.2; --type-eyebrow-ls: 0.08em; --type-quote-size: 1.5rem; --type-quote-weight: 400; --type-quote-lh: 1.4; --type-quote-ls: -0.01em; --type-lead-size: 1.25rem; --type-lead-weight: 400; --type-lead-lh: 1.6; --type-body-size: 1.0625rem; --type-body-weight: 400; --type-body-lh: 1.6; --type-body-sm-size: 0.9375rem;--type-body-sm-weight: 400; --type-body-sm-lh: 1.55; --type-caption-size: 0.8125rem;--type-caption-weight: 500; --type-caption-lh: 1.4; --type-button-size: 1rem; --type-button-weight: 500; --type-button-lh: 1; --type-code-size: 0.9375rem; --type-code-weight: 400; --type-code-lh: 1.5; /* ---- Radius ---- */ --rounded-xs: 6px; --rounded-sm: 10px; --rounded-md: 14px; --rounded-lg: 20px; --rounded-xl: 28px; --rounded-2xl: 36px; --rounded-full: 9999px; /* ---- Spacing (4px base) ---- */ --space-0: 0px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --space-11: 160px; /* ---- Layout helpers (site-only) ---- */ --container: 1120px; --container-narrow: 720px; --container-reading: 680px; --nav-h: 70px; /* ---- Night — the deep-violet art blocks (the hero stage, the magic CTA, blog art). Dark in BOTH themes by design, so they never swap. Text on them uses the fixed on-night values, not theme tokens. ---- */ --night-1: #2A1259; /* deep violet */ --night-2: #1B0E3D; /* indigo-violet */ --night-3: #120A2A; /* near-black violet */ --on-night: #FFFFFF; --on-night-muted: rgba(255,255,255,0.78); --on-night-eyebrow: #D9C7FB; --on-night-fill: #FFFFFF; /* a solid button sitting on a night block */ --on-night-fill-ink: #4C1D95; /* its label — deep violet, fixed in both themes */ --on-night-fill-ink-hover: #6D28D9; --on-night-line: rgba(255,255,255,0.35); --on-night-wash: rgba(255,255,255,0.08); --on-night-wash-hover: rgba(255,255,255,0.16); --night-shadow: rgba(0,0,0,0.28); /* ---- Scene scrim — over the 12 landscape stills. Verified by sampling real pixels under real text, not eyeballed. ---- */ /* Solved, not guessed. A flat top-to-bottom scrim is the wrong shape here: to carry a 13px eyebrow over a bright sky it has to reach ~0.78 mean alpha, which passes WCAG and simultaneously crushes the art to near-black. Text sits in a centred column, so the darkening is centred too — an ellipse over the text, falling away to almost nothing at the edges, plus a faint overall veil. Measured against every text block on every band: worst margin 1.5x the WCAG minimum at 0.66 mean alpha, versus 1.3x at 0.78 for the flat version. Better legibility AND more of the illustration survives. */ --scrim-core: rgba(18,17,26,0.92); /* directly behind the text */ --scrim-mid: rgba(18,17,26,0.80); --scrim-edge: rgba(18,17,26,0.22); /* the image breathes out here */ --scrim-veil-top: rgba(18,17,26,0.06); --scrim-veil-bottom: rgba(18,17,26,0.20); --scrim-ellipse: 55% 62%; /* radii, as % of the band box */ /* Art tiles and article headers carry no text, so they need only enough tint to sit down into the page — not a legibility scrim. */ --scrim-art-top: rgba(18,17,26,0.12); --scrim-art-bottom: rgba(18,17,26,0.40); --art-shadow: rgba(0,0,0,0.35); /* ---- Star field (decorative sparkle on night blocks) ---- */ --star: #FFFFFF; --star-glow: rgba(255,255,255,0.7); --star-gold-glow: rgba(233,167,60,0.8); /* ---- macOS window chrome, inside the light app mock (literal, not brand) ---- */ --mac-close: #F0685E; --mac-min: #F4BE4F; --mac-max: #62C554; } /* ============================================================ LIGHT — the Starky app's theme, and the light reference. ============================================================ */ :root, [data-theme="light"] { /* ---- Colour — warm, light UI base ---- */ --surface: #FCF9F7; --surface-raised: #FFFFFF; --surface-sunken: #F5EFE9; --surface-accent: #EDE7FB; --surface-maple: #F9EBE0; --surface-gold: #FBF1DA; --on-surface: #1C1917; --on-surface-muted: #6B615A; --on-surface-subtle: #7C7168; --border: #EBE3DC; --border-strong: #8C847F; /* 3.67:1 on white, 3.50 on surface, 3.22 on sunken */ /* ---- Accent — soft violet (the one brand colour) ---- */ --accent: #6D28D9; --on-accent: #FFFFFF; --accent-hover: #5B21B6; --accent-strong: #4C1D95; --accent-soft: #E6DBFA; --focus: #6D28D9; --icon-brand-fg: #7A3A1E; /* maple-deep on surface-maple — 7.34:1 */ /* ---- Expressive — mascot & magic (accents / illustration only) ---- */ --maple: #B15A34; --maple-deep: #7A3A1E; --gold: #E9A73C; /* ---- Semantic — warm-toned, AA on white ---- */ --success: #1E7A54; --success-soft: #E3F1EA; --warning: #8A5A0E; --warning-soft: #FBF0DA; /* `danger` is the canonical name for this role — it is what the app's Theme.swift calls it, and it sits with success/warning/info as a role rather than as an event. `--error` stays as an alias so existing CSS keeps working; prefer --danger in anything new. */ --danger: #C0362C; --danger-soft: #FBE7E3; --error: var(--danger); --error-soft: var(--danger-soft); --info: #2C69A6; --info-soft: #E6EFF7; /* ---- Interaction — added for the app redesign, 2026-08-11 ---- The cursor and the row states. These began life only in the app's Theme.swift, which is the wrong direction: design.md is the source and the two surfaces mirror it. Written down here so the site can use the same values if it ever needs a selected row. Selection and keyboard position are the SAME thing in Starky — a voice user has no pointer, so the highlighted row IS the cursor — which is why it is a distinct token from hover rather than a stronger version of it. Hover must stay quieter, or two rows read as active at once. */ --cursor-fill: #E6DBFA; /* same value as accent-soft; named separately because its job differs */ --cursor-edge: #6D28D9; /* 3px bar, so the cursor survives without colour perception */ --hover-fill: #F2ECE6; /* deliberately quieter than the cursor */ --rule: #E7DFD7; /* the hairline that carries structure in a design with few cards */ --rule-strong: #D8CEC4; /* closes a section; once per screen at most */ /* ---- Elevation — light, soft, warm-tinted ---- */ --elev-sm: 0 1px 2px rgba(28,25,23,0.04), 0 1px 3px rgba(28,25,23,0.06); --elev-md: 0 4px 12px rgba(28,25,23,0.06), 0 2px 4px rgba(28,25,23,0.05); --elev-lg: 0 12px 32px rgba(28,25,23,0.10), 0 4px 8px rgba(28,25,23,0.05); --elev-xl: 0 30px 70px rgba(28,25,23,0.16), 0 10px 24px rgba(28,25,23,0.08); --elev-focus: 0 0 0 3px rgba(109,40,217,0.35); --elev-violet: 0 24px 60px rgba(42,18,89,0.32); --elev-accent-glow: 0 6px 18px rgba(109,40,217,0.24); --elev-accent-glow-hover: 0 10px 24px rgba(109,40,217,0.30); /* ---- Translucent chrome ---- */ --nav-bg: rgba(252,249,247,0.82); /* ---- Stage / magic-block gradient washes ---- */ --wash-violet-a: rgba(139,92,246,0.42); --wash-violet-b: rgba(124,58,237,0.40); --wash-gold: rgba(233,167,60,0.14); --wash-glow: rgba(139,92,246,0.55); --frame-highlight: rgba(255,255,255,0.6); } /* ============================================================ DARK — the website. Same names, swapped values. Every pairing verified against WCAG: all 21 checks pass AA. Two traps: the light accent #6D28D9 is 2.64:1 here (a fail), so the accent LIGHTENS; and white on #A78BFA is 2.72:1, so on-accent goes near-black. Anyone who "just inverts" hits both. ============================================================ */ [data-theme="dark"] { /* ---- Colour — near-black with a faint violet cast ---- */ --surface: #12111A; --surface-raised: #242328; /* 1.20:1 vs surface — visibly separate */ --surface-sunken: #0B0A11; --surface-accent: #241C3D; --surface-maple: #2A1C15; --surface-gold: #2B2113; --on-surface: #F4F1EE; /* 16.65:1 */ --on-surface-muted: #CFC8C4; /* 11.31:1 — brighter and warmer than the old #B0A9BC (8.25:1) */ --on-surface-subtle: #90889E; /* 5.53:1 on surface, 4.61:1 on raised */ --border: #2A2836; /* decorative dividers only */ --border-strong: #6F6B7C; /* 3.02:1 even on raised */ /* ---- Accent — lightened violet ---- */ --accent: #A78BFA; /* 6.88:1 */ --on-accent: #17102B; /* 6.74:1 — near-black, NOT white */ --accent-hover: #C4B5FD; --accent-strong: #C4B5FD; --accent-soft: #2E2450; --icon-brand-fg: #F0C463; /* gold on surface-maple — 10.02:1 */ --focus: #A78BFA; /* ---- Expressive — lifted for dark ---- */ --maple: #E0955C; --maple-deep: #C2743C; --gold: #F0C463; /* ---- Semantic — all ≥7.7:1 ---- */ --success: #5FD3A0; --success-soft: #122C22; --warning: #E8B563; --warning-soft: #2E2413; --danger: #F08A80; --danger-soft: #331A17; --error: var(--danger); --error-soft: var(--danger-soft); --info: #7FB6E8; --info-soft: #14232F; /* ---- Interaction — the dark half of the redesign tokens ---- */ --cursor-fill: #2E2450; --cursor-edge: #A78BFA; --hover-fill: #1D1C24; --rule: #27252F; /* lifted from `border`: on night a flat hairline disappears */ --rule-strong: #3A3745; /* ---- Elevation — surface carries depth, not shadow. Resting cards drop their shadow entirely and separate via surface-raised + border. Shadow survives only under genuinely floating objects. ---- */ --elev-sm: none; --elev-md: 0 4px 16px rgba(0,0,0,0.40); --elev-lg: 0 12px 32px rgba(0,0,0,0.50); --elev-xl: 0 30px 70px rgba(0,0,0,0.62), 0 10px 24px rgba(0,0,0,0.44); --elev-focus: 0 0 0 3px rgba(167,139,250,0.45); --elev-violet: 0 24px 60px rgba(0,0,0,0.55); --elev-accent-glow: 0 6px 20px rgba(167,139,250,0.22); --elev-accent-glow-hover: 0 10px 28px rgba(167,139,250,0.32); /* ---- Translucent chrome ---- */ --nav-bg: rgba(18,17,26,0.82); /* ---- Stage / magic-block gradient washes — lifted so the violet still reads against a near-black page rather than dissolving into it ---- */ --wash-violet-a: rgba(139,92,246,0.34); --wash-violet-b: rgba(124,58,237,0.32); --wash-gold: rgba(233,167,60,0.12); --wash-glow: rgba(139,92,246,0.45); --frame-highlight: rgba(255,255,255,0.14); }