/* * COPIED from design/system/tokens.css (the Phase-2 single source of truth) — pending a * build-time include. Re-sync from design/system/, never edit here. * * landing/ is NOT in `design/system/generate_tokens.py` (which emits only web/src/tokens.css * and services/mailer_tokens_generated.py) and NOT in `make tokens-check`. Nothing catches * drift here but a human. Last hand-sync: 2026-08-05. */ /* ============================================================================ WonderForce design tokens — Phase 2, single source of truth ============================================================================ Locked direction: A3 "Precise Instrument · Vivid" (design/direction/a3-precise-instrument-vivid.html — the canon). Component inventory: design/direction/phase1-wireframes-app.html. Interaction + copy canon: docs/design/2026-07-06-fable-phase1-ux-ia-proposal.md §3/§6. HOW TO CONSUME THESE TOKENS — the one rule that matters: Components consume SEMANTIC ALIASES (--rail-openloop, --interactive, --verified-ink, --surface-raised…), NEVER raw hues. The raw palette below is the alias layer's private input. If a component needs a color that has no alias, that is a design decision — add the alias here first, then use it. This is what keeps "color = meaning" enforceable: emerald ALWAYS means verified/cross-team, amber ALWAYS means open loop, red ALWAYS means contradiction, cobalt ALWAYS means "you can act here." Pop never muddles meaning. THEMES: `:root` is the light theme (porcelain daylight — the default). `[data-theme="dark"]` overrides the same custom properties (graphite). Theme choice: stored `localStorage["theme"]` wins, else `prefers-color-scheme`, else light — set on BEFORE first paint (see the head script in a3 / components.html). Components therefore never branch on theme; they read the variables and both themes just work. INK PAIRS: every accent ships as a PAIR — the vivid hue (rails, fills, graphics, ≥3px strokes) and its "-ink" partner (small text on surface, AA ≥4.5:1). In dark the vivid hue already holds AA on graphite, so the pair converges — but components still use the -ink variable for text. ========================================================================= */ /* ---------------------------------------------------------------------------- 1 · LIGHT THEME (default) — porcelain daylight, vivid accent system ------------------------------------------------------------------------- */ :root { /* ---- raw palette · neutrals (private to the alias layer) --------------- */ --bg: #FFFFF0; /* ivory — the aurora stage base (founder, 2026-07-15) */ --surface: #FFFFFF; /* cards, panels, panes */ --border: #E3E6E2; /* 1px component borders */ --text: #1A1D21; /* primary ink */ --muted: #66707A; /* secondary ink, labels, meta */ --hairline: rgba(20, 25, 30, 0.09); /* in-card dividers, section rules */ --hairline-strong: rgba(20, 25, 30, 0.24); /* avatar rings, emphasized keylines */ /* ---- raw palette · accents (private — reach them via aliases below) ---- */ --accent: #00B37E; /* vivid emerald — rails, fills, graphics */ --accent-ink: #00805A; /* emerald small text on white — 4.9:1 AA */ --amber: #FF9E0D; /* hot amber — rails, dot fills, graphics */ --amber-ink: #A85F00; /* amber small text on white — 4.8:1 AA */ --danger: #F23D3D; /* used sparingly — the contradiction rail */ --danger-ink: #D42B2B; /* red small text on white — 5.0:1 AA (Phase-2 derivative: A3 uses red rail-only; darkened in-family like the other ink pairs) */ --interactive: #2E6BFF; /* electric cobalt — borders, rings, scanline */ --interactive-ink: #2458D6; /* cobalt small text on white — 6.1:1 AA */ --on-interactive: #FFFFFF; /* label on a cobalt-filled button — 4.5:1 AA (Phase-2 derivative; dark flips to graphite ink) */ /* ---- state derivatives (hover / focus / selection / borders) ----------- */ --hover-bg: rgba(20, 25, 30, 0.03); /* quiet hover wash on rows, chips, nav */ --dashed: rgba(20, 25, 30, 0.16); /* dashed borders — gaps, placeholders */ --dot-border: rgba(20, 25, 30, 0.18); /* unfilled meter/status dot outline */ --dot-ring: rgba(20, 25, 30, 0.35); /* crisp ink-alpha ring on filled dots */ --selection: rgba(0, 179, 126, 0.18); /* ::selection — emerald wash */ --amber-soft: rgba(255, 158, 13, 0.5); /* open-loop card hover border */ --amber-tint: rgba(255, 158, 13, 0.06);/* verbatim-quote block background */ --skeleton: #E9EBE8; /* gray content block (loading/wireframe) */ --surface-glass: var(--surface); /* panels/cards fill — opaque white in light */ --glass-blur: none; /* no frosted blur in light */ /* ---- elevation ---------------------------------------------------------- */ --shadow: 0 1px 2px rgba(20, 25, 30, 0.05); /* resting card — barely there */ --shadow-menu: 0 4px 16px rgba(20, 25, 30, 0.08); /* dropdown menus */ --shadow-pane: -8px 0 24px rgba(20, 25, 30, 0.08); /* right-side pane */ --scrim: rgba(20, 25, 30, 0.2); /* behind the pane */ /* ---- aurora stage (the ivory backdrop — content screens themed, immersive locked) ------ The coming-online "ivory stage" (AuroraBg), tokenized 2026-07-15 so it is reusable across the app and theme-aware, instead of a hardcoded light-only island. Light = ivory with multiply blobs; dark overrides these to graphite + screen-blend glow. The immersive login/building moment forces the light values via `.aurora-stage--locked` (light-only, LOCKED — docs/design/2026-07-13-onboarding-web-build-spec.md §7.6). */ --stage-bg: #FFFFF0; /* ivory — the stage base */ --stage-blob-a: rgba(46, 230, 168, 0.55); /* emerald blob */ --stage-blob-b: rgba(110, 150, 255, 0.55); /* cobalt blob */ --stage-blob-c: rgba(255, 158, 13, 0.36); /* low amber blob */ --stage-blob-blend: multiply; /* multiply reads over ivory */ --stage-aurora-opacity: 0.70; /* content screens (founder 2026-07-15); immersive stays .95 via --locked */ --stage-grid: rgba(20, 25, 30, 0.5); /* dot-grid texture ink */ --stage-grid-opacity: 0.55; --stage-grid-fade: 0.5px; /* radial fade stop (dark spreads it — see §7) */ --stage-ink: #1A1D21; /* forced-light stage text (immersive) */ --stage-ink-muted: #66707A; --stage-card: #FFFFFF; /* a card floated on the stage */ --stage-card-border: #EAE7DA; /* warm keyline on ivory */ --orb-core: #2E6BFF; /* the hero orb — cobalt core → emerald edge */ --orb-mid: #12A06E; --orb-edge: #38B587; /* ========================================================================== 2 · TYPE — IBM Plex Sans (voice) + IBM Plex Mono (instrument readouts) Sans carries everything the product SAYS; Mono carries everything the product MEASURES: provenance, timestamps, labels, source chains. No serifs, no italics for voice (gate-3 decision). ======================================================================= */ --sans: "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif; --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; /* weights — three, no more */ --weight-regular: 400; /* body prose, mono values */ --weight-medium: 500; /* mono labels, nav, buttons */ --weight-semibold: 600; /* display, headings, names, subjects */ /* scale — extracted from a3 + wireframes (real values, not a ratio system). Heading steps land at 32/22 in the canon (not 24/20). */ --text-display: 40px; /* hero greeting ("Three things, Alex.") · 600 · -0.02em · lh 1.15 · 32px ≤600px */ --text-display-sm: 32px; /* screen heads ("Briefs.") · 600 · -0.02em · lh 1.15 · 26px ≤640px */ --text-title: 22px; /* pane h2, detail titles · 600 · -0.01em */ --text-lede: 19px; /* the bottom line — one sentence that matters most · lh 1.5 */ --text-stage: 18px; /* building-state stage line */ --text-emphasis: 16px; /* card body, email subject, wordmark, ask input · lh 1.55 */ --text-body: 15px; /* base body · 400 · lh 1.5 */ --text-small: 14px; /* nav items, secondary prose, pcard insight */ --text-caption: 13px; /* buttons, menu notes */ --text-mono-meta: 12px; /* mono data at reading size, avatar initials */ --text-mono-label: 11px; /* THE mono label: provenance, chips, timestamps · 500 · caps · 0.08em */ --text-mono-micro: 10px; /* affordances, legends, gate tags · 500 · caps · 0.1em */ /* line heights */ --leading-display: 1.15; /* display + screen heads */ --leading-body: 1.5; /* default prose */ --leading-card: 1.55; /* card body at 16px */ --leading-reading: 1.6; /* verbatim quotes, email body */ --leading-mono: 1.7; /* mono chains and notes */ /* letter spacing */ --tracking-display: -0.02em; /* display + screen heads */ --tracking-heading: -0.01em; /* titles, subjects, wordmark */ --tracking-label: 0.08em; /* 11px mono labels (uppercase) */ --tracking-chip: 0.06em; /* chips, meta values (uppercase) */ --tracking-micro: 0.1em; /* 10px mono micro (uppercase) */ /* ========================================================================== 3 · SPACING — the 4px grid. Compose layouts from these steps only. ======================================================================= */ --space-1: 4px; --space-2: 8px; --space-3: 12px; /* card gap, chip padding-x */ --space-4: 16px; /* in-card separations */ --space-5: 20px; /* card padding-y, panel padding-y */ --space-6: 24px; /* card padding-x, section gaps */ --space-7: 28px; /* railed-card left padding (3px rail + 25px) */ --space-8: 32px; /* page gutters */ --space-9: 40px; /* section label top margin */ --space-10: 48px; --space-11: 56px; /* screen-head top padding */ --space-12: 64px; /* strip padding, screen bottom */ /* ========================================================================== 4 · SHAPE ======================================================================= */ --radius: 6px; /* cards, chips, buttons, inputs — the base radius */ --radius-lg: 12px; /* panels, cards, people cards + the brief pane — the softer 12px corner (founder 2026-07-19: cards adopt the panel radius; --radius stays 6px for in-line controls: buttons, chips, inputs, nav) */ --radius-small: 4px; /* inline cites, gate tags — things inside a line of text */ --radius-pill: 999px; /* pills, switch tracks, progress bars */ --rail-width: 3px; /* the semantic card rail */ /* ========================================================================== 5 · Z-LAYERS — fixed ladder; never invent intermediate values. ======================================================================= */ --z-field: 0; /* ASCII field canvas — always the floor */ --z-page: 1; /* page content above the field */ --z-nav: 10; /* topbar dropdowns (avatar menu) */ --z-scrim: 20; /* pane scrim */ --z-pane: 21; /* right-side pane — above its scrim */ --z-toast: 30; /* transient confirmations — above everything */ /* ========================================================================== 6 · MOTION — two tempos, never mixed. INSTRUMENT tempo: how the interface MOVES. Fast and exact, never springy — state changes, unfolds, panes, hovers. 150ms for small state (hover, color, caret), 220ms for structural movement (unfold, pane). AMBIENT tempo: how the product BREATHES. Slow ease-in-out, 600–900ms — reserved for voice/field moments only (the field fading up, a greeting settling, coming-online reveals). Never on anything the user is waiting for; a click is always answered at instrument tempo. REDUCED MOTION: prefers-reduced-motion disables everything — reveals, the unfold animation (content appears instantly), the scanline, and the field's animation loop (one static frame: the instrument is on, at rest). Gate all choreography behind the media query; state changes must land instantly and completely without it. ======================================================================= */ --ease-instrument: cubic-bezier(0.2, 0, 0, 1); --duration-fast: 150ms; /* hovers, focus, small state */ --duration-move: 220ms; /* the unfold, panes, structural movement */ --ease-ambient: ease-in-out; --duration-ambient: 800ms; /* voice/field moments — keep within 600–900ms */ /* choreography extras (from the a3 load sequence — use as given, sparingly) */ --stagger: 40ms; /* cards settle in sequence, 40ms apart */ --duration-reveal: 250ms; /* per-element load reveal */ --duration-sweep: 380ms; /* the unfold scanline pass */ --duration-field: 1200ms; /* the field fading up on load (ambient) */ /* focus — one ring everywhere: 1px cobalt, 2px offset */ --focus-ring: 1px solid var(--interactive); --focus-ring-offset: 2px; } /* ---------------------------------------------------------------------------- 7 · DARK THEME — graphite; accents shifted to harmonize with the vivid system. Same variables, so components need no theme awareness. Note the ink pairs converge (the vivid hues already hold AA on graphite) and elevation goes flat (borders do the work shadows did). ------------------------------------------------------------------------- */ [data-theme="dark"] { --bg: #0A0C0E; --surface: #101418; --border: rgba(255, 255, 255, 0.08); --text: #E8EAED; --muted: rgba(255, 255, 255, 0.7); --hairline: rgba(255, 255, 255, 0.08); --hairline-strong: rgba(255, 255, 255, 0.24); --accent: #2EE6A8; --accent-ink: #2EE6A8; /* dark already holds AA — no darkening needed */ --amber: #FFB13D; --amber-ink: #FFB13D; --danger: #FF5C4D; --danger-ink: #FF5C4D; /* 6.1:1 on graphite surface */ --interactive: #6E96FF; --interactive-ink: #6E96FF; --on-interactive: #0A0C0E; /* graphite label on soft cobalt — 6.8:1 AA (white on #6E96FF fails at 2.8:1) */ --hover-bg: rgba(255, 255, 255, 0.03); --dashed: rgba(255, 255, 255, 0.12); --dot-border: rgba(255, 255, 255, 0.08); --dot-ring: #FFB13D; /* dark: the ring is the amber itself */ --selection: rgba(46, 230, 168, 0.28); --amber-soft: rgba(255, 177, 61, 0.45); --amber-tint: rgba(255, 177, 61, 0.06); --skeleton: rgba(255, 255, 255, 0.06); --surface-glass: rgba(255, 255, 255, 0.07); /* frosted glass over the graphite aurora (founder 2026-07-19) */ --glass-blur: blur(10px); --shadow: none; /* dark elevation is flat — borders carry the edges */ --shadow-menu: none; --shadow-pane: none; --scrim: rgba(0, 0, 0, 0.5); /* aurora stage — graphite, tuned for dark: same blob geometry as light, but screen-blend (multiply vanishes on dark) at a softer alpha so it glows without muddying, + a fainter grid */ --stage-bg: #0A0C0E; --stage-blob-a: rgba(46, 230, 168, 0.32); --stage-blob-b: rgba(110, 150, 255, 0.30); --stage-blob-c: rgba(255, 177, 61, 0.18); --stage-blob-blend: screen; --stage-aurora-opacity: 0.70; --stage-grid: rgba(255, 255, 255, 0.5); --stage-grid-opacity: 0.10; --stage-grid-fade: 1.5px; /* softer, more spread dots on graphite (founder) */ --stage-ink: #E8EAED; --stage-ink-muted: #8A9199; --stage-card: #101418; --stage-card-border: rgba(255, 255, 255, 0.08); } /* ---------------------------------------------------------------------------- 8 · SEMANTIC ALIASES — what components actually consume. TWO AXES, NEVER MIXED (the A3 color law): · Semantic rails say what a thing IS: emerald = cross-team surfacing / verified · amber = open loop · red = contradiction. · Interactive cobalt says what you can DO: "you can act here" — borders, links, focus rings, the scanline. Cobalt never labels content meaning; rails never mark affordances. ------------------------------------------------------------------------- */ :root, [data-theme="dark"] { /* card rails — set `--rail` on a card via these, nothing else */ --rail-crossteam: var(--accent); /* something surfaced across the team */ --rail-openloop: var(--amber); /* a promise or thread left open */ --rail-conflict: var(--danger); /* two sources disagree — held open, not resolved */ /* verification — the provenance unfold's VERIFIED state */ --verified: var(--accent); --verified-ink: var(--accent-ink); /* open-loop text + urgency */ --openloop-ink: var(--amber-ink); --urgency-fill: var(--amber); /* dot-meter fills — never numeric */ /* contradiction / destructive actions (bordered, never filled) */ --conflict-ink: var(--danger-ink); --destructive: var(--danger); --destructive-ink: var(--danger-ink); /* act-here (cobalt is already semantically named; aliased for symmetry) */ --act: var(--interactive); --act-ink: var(--interactive-ink); /* connection status dots (Sources) */ --status-ok: var(--accent); /* reading continuously */ --status-idle: transparent; /* with 1px var(--dot-border) outline */ }