/* ========================================================================== NEW DAY AI — v2 DESIGN TOKENS September 2026 · design/v2 · source of truth for web-v2 and the design-system page. HOW THIS FILE IS ORGANISED 1. Fonts (@font-face, self-hosted woff2, latin subset) 2. Primitive colour ramps --c-- 3. Semantic colour roles --color- (use these in components) 4. Section themes [data-theme="paper|dawn|ink|night"] 5. Typography --font-*, --text-*, --leading-*, --tracking-* 6. Space, layout, grid --space-*, --section-*, --gutter, --margin 7. Radii, borders, elevation --radius-*, --border-*, --shadow-* 8. Motion --dur-*, --ease-*, --stagger-* 9. Layers --z-* 10. Breakpoints (documented; CSS cannot read vars in @media) 11. Reduced motion overrides RULES THAT TRAVEL WITH THE TOKENS - Gold is for OUTCOMES only (booked, confirmed, answered). It never sits beside blue inside one component. The one sanctioned exception is the logomark's right square turning gold on arrival (the brand's own motif). - Contrast ratios in comments are WCAG 2.x against the ground named. Body text must be >= 4.5:1; large display text (>= 24px) >= 3:1. - Additions to the v1 palette are marked [ADDITION] with the reason. ========================================================================== */ /* ---------- 1. FONTS ---------------------------------------------------- */ /* Montserrat — display, headings, numerals and the interface. Lora — running text and the italic accents in headlines. Both variable, SIL Open Font License (LICENSE-montserrat.txt, LICENSE-lora.txt), Latin only. Chosen by Corey at launch (Sept 2026) over the Fraunces + Figtree draft. */ @font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-var-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; } @font-face { font-family: "Lora"; src: url("../fonts/lora-var.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: "Lora"; src: url("../fonts/lora-var-italic.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; } /* JetBrains Mono — tiny labels and numerals only (01, 02, 1920s, 1:00). */ @font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } :root { /* ---------- 2. PRIMITIVE COLOUR RAMPS --------------------------------- */ /* Dawn — the paper. Warm off-white grounds. */ --c-dawn-50: #FBFAF6; /* [ADDITION] lifted paper: inputs, raised cards on Dawn */ --c-dawn-100: #F7F5EF; /* Dawn. The page ground. */ --c-dawn-200: #EFEBE2; /* Dawn deep (v1 --r2-dawn-deep). Panels on Dawn. Graphite on it 4.56:1 */ --c-dawn-300: #E4DED2; /* [ADDITION] warm paper tint, section band ground */ --c-dawn-400: #D8D2C8; /* hairline on Dawn (v1 --nd-rule) */ /* Ink — the warm near-black of the wordmark. */ --c-ink-950: #171415; /* [ADDITION] "Night": a deeper, warmer ground for the dramatic, pinned sections (gate, how it works). Dawn on it 16.8:1 */ --c-ink-900: #231F20; /* Ink. Type on Dawn 14.95:1; dark section ground. */ --c-ink-800: #2B2728; /* Ink raised (v1 --r2-ink-raised). Panels on Ink. */ --c-ink-700: #3A3536; /* [ADDITION] hairline on Ink/Night, pressed state on Ink */ --c-ink-600: #413C3C; /* Ink soft. Secondary type on Dawn. */ /* Graphite — neutral greys. */ --c-graphite-500: #676A70; /* muted text on Dawn 4.97:1 */ --c-graphite-400: #9A968F; /* non-text only (dots, rules) on Dawn */ --c-graphite-300: #969BA3; /* muted text on Ink 5.66:1 / Night 6.55:1 */ --c-graphite-200: #ADB2B8; /* body text on Ink 7.3:1 / Night 8.57:1 */ /* Blue — the primary accent. */ --c-blue-900: #1C2B3C; /* Midnight. Deep fills, pressed. */ --c-blue-700: #2C577A; /* small accent text on Dawn 7.00:1 */ --c-blue-500: #3A6E99; /* THE accent. Fills, marks, buttons. On Dawn 4.98:1 */ --c-blue-400: #4785B4; /* large accent text on Dawn 3.65:1 */ --c-blue-300: #6C9BC2; /* [ADDITION] lines and marks on Night 6.19:1 */ --c-blue-200: #8FB0CC; /* accent text on Ink 7.18:1 / Night 8.06:1 */ --c-blue-100: #D5E1EC; /* [ADDITION] tint fill on Dawn (selection, focus halo) */ --c-blue-50: #EAF0F5; /* [ADDITION] faintest tint */ /* Gold — OUTCOMES ONLY. */ --c-gold-700: #7E5C1B; /* small gold text on Dawn 5.61:1 */ --c-gold-500: #AC7F27; /* large gold text on Dawn 3.31:1 (>= 24px only) */ --c-gold-400: #C99A34; /* gold fills; Ink text on it 6.33:1; on Night 7.11:1 */ --c-gold-200: #DDBB6C; /* gold text on Ink 8.85:1 / Night 9.94:1 */ --c-gold-100: #F2E6C8; /* [ADDITION] faint outcome tint on Dawn */ /* Clay — [ADDITION] muted attention colour. Missed calls, leaks, "and then..." consequences. Deliberately NOT gold (gold means good news) and not the alarm red of --c-danger. */ --c-clay-600: #9A4A30; /* attention text on Dawn 5.67:1 */ --c-clay-500: #A4553A; /* attention marks on Dawn 4.89:1 */ --c-clay-300: #D98C6E; /* attention text on Ink 6.15:1 / Night 6.91:1 */ /* System (from v1; muted, never decorative) */ --c-success: #4B7B4E; --c-danger: #B0432E; /* ---------- 3. SEMANTIC COLOUR ROLES (light default = Dawn) ---------- Components use ONLY these. Section themes (below) reassign them. */ --color-bg: var(--c-dawn-100); --color-bg-raised: var(--c-dawn-50); --color-bg-sunken: var(--c-dawn-200); --color-text: var(--c-ink-900); --color-text-soft: var(--c-ink-600); --color-text-muted: var(--c-graphite-500); --color-line: var(--c-dawn-400); --color-line-soft: #EBE6DC; --color-dot: var(--c-graphite-400); /* the tiny grid squares */ --color-accent: var(--c-blue-500); /* fills, marks */ --color-accent-text: var(--c-blue-700); /* small accent text */ --color-accent-strong: var(--c-blue-900); --color-on-accent: var(--c-dawn-100); --color-outcome: var(--c-gold-400); /* fills, the gold square */ --color-outcome-text: var(--c-gold-700); /* small outcome text */ --color-outcome-large: var(--c-gold-500); /* outcome display text >= 24px */ --color-attention: var(--c-clay-600); --color-focus: var(--c-blue-500); --color-selection: var(--c-blue-100); /* ---------- 5. TYPOGRAPHY -------------------------------------------- */ --font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif; /* headings, display, numerals */ --font-ui: "Montserrat", "Helvetica Neue", Arial, sans-serif; /* nav, buttons, kickers, labels, forms */ --font-text: "Lora", Georgia, "Times New Roman", serif; /* running text, italic accents */ --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Fluid type scale. clamp(min at 360px, fluid, max at 1440px+). Names describe the job, not the size. */ /* Montserrat is a wide geometric sans: display sizes sit ~12% below what a serif would take, or the hero and the big numerals overflow at 390px. */ --text-hero: clamp(2.5rem, .9rem + 6.1vw, 6.75rem); /* 40 → 102px. The h1, once; clear of the hero card. */ --text-display: clamp(2.125rem, 1rem + 4.3vw, 5rem); /* 34 → 80px. Section heads. */ --text-title: clamp(1.75rem, 1.15rem + 2.2vw, 3.125rem); /* 28 → 50px. Sub-heads, big statements. */ --text-heading: clamp(1.25rem, 1.05rem + .8vw, 1.75rem); /* 20 → 28px. Card titles. */ --text-lead: clamp(1.125rem, 1rem + .5vw, 1.4375rem); /* 18 → 23px. Intro paragraphs. */ --text-body: 1.0625rem; /* 17px. Body copy. */ --text-small: .9375rem; /* 15px. Captions, UI. */ --text-label: .8125rem; /* 13px. Mono data labels (times, eras, durations). Never smaller. */ --text-kicker: .875rem; /* 14px. Montserrat 500 section kickers, sentence case. */ --text-numeral: clamp(3rem, 1.5rem + 6.6vw, 7.5rem); /* KPI numeral. */ --leading-tight: 1.02; /* hero, display */ --leading-snug: 1.1; /* titles */ --leading-heading: 1.2; --leading-body: 1.55; --tracking-hero: -.045em; --tracking-display: -.035em; --tracking-title: -.025em; --tracking-body: 0; --tracking-label: .02em; /* mono data labels, sentence case (no uppercase: it read as a dev tool) */ --weight-display: 620; /* Montserrat at display sizes: lighter reads thin and generic */ --weight-title: 600; --weight-text: 400; /* Lora body */ --weight-strong: 600; --measure: 60ch; /* max line length for body copy */ --measure-narrow: 44ch; /* ---------- 6. SPACE, LAYOUT, GRID ----------------------------------- */ /* 4px base. Use the named steps, not raw numbers. */ --space-1: .25rem; /* 4 */ --space-2: .5rem; /* 8 */ --space-3: .75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ --space-9: 6rem; /* 96 */ --space-10: 8rem; /* 128 */ --space-11: 12rem; /* 192 */ --section-y: clamp(4.5rem, 2.5rem + 7vw, 9.5rem); /* vertical rhythm between sections (80 → 152px) */ --section-y-tight: clamp(3.5rem, 2rem + 4vw, 6rem); --margin: clamp(1.25rem, .5rem + 3.4vw, 4rem); /* page side margin (20 → 64) */ --gutter: clamp(1rem, .6rem + 1.4vw, 2rem); /* grid column gap */ --max-width: 1440px; --grid-columns: 12; /* ---------- 7. RADII, BORDERS, ELEVATION ----------------------------- */ /* Crisp, never pill. The logomark is square-cornered; so is the UI. */ --radius-0: 0; --radius-xs: 2px; /* chips, tags */ --radius-sm: 4px; /* buttons, inputs */ --radius-md: 8px; /* cards */ --radius-lg: 14px; /* media panels */ --border-hair: 1px; --border-mark: 1.5px; /* icon + diagram stroke */ /* Flat by default. Elevation is used sparingly for things that float (nav on scroll, popovers, the SMS bubble). Warm-tinted shadows. */ --shadow-1: 0 1px 2px rgb(35 31 32 / .06), 0 1px 1px rgb(35 31 32 / .04); --shadow-2: 0 6px 18px -6px rgb(35 31 32 / .14), 0 2px 4px rgb(35 31 32 / .05); --shadow-3: 0 24px 60px -18px rgb(23 20 21 / .28), 0 6px 16px -8px rgb(23 20 21 / .12); /* Grain finishing layer */ --grain-opacity: .05; /* ---------- 8. MOTION ------------------------------------------------ */ /* Durations */ --dur-instant: 120ms; /* colour on hover/focus */ --dur-fast: 220ms; /* small UI: accordions chevrons, toggles */ --dur-base: 420ms; /* reveals of small elements */ --dur-slow: 800ms; /* line reveals, panel reveals */ --dur-slower: 1200ms; /* the gate lift, hero arrival */ --dur-scene: 1600ms; /* one scene of a click-to-play sequence */ --dur-draw: 550ms; /* the brand square drawing in; a connector line drawing */ /* Easings — ONE family. Every CSS transition and every GSAP tween uses one of these; the GSAP name is in brackets. No overshoot, no spin, anywhere. (?motion-check in the URL lists any script ease outside this set.) */ --ease-out: cubic-bezier(.25, 1, .5, 1); /* [quart.out] the default: UI, blocks, small moves */ --ease-quart: var(--ease-out); /* alias kept for older references */ --ease-expo: cubic-bezier(.16, 1, .3, 1); /* [expo.out] headline lines, big arrivals */ --ease-in-out: cubic-bezier(.65, 0, .35, 1); /* [power3.inOut] things that travel: lines drawing, squares drawing in, wipes */ --ease-in: cubic-bezier(.55, 0, 1, .45); /* [power2.in] exits only */ --ease-linear: linear; /* [none] scrubbed timelines */ /* One exception: the gate's lift uses [expo.inOut], once, on purpose. */ /* Choreography */ --stagger-line: 60ms; /* between split lines */ --stagger-item: 80ms; /* between list items / cards */ --reveal-y: 1.1em; /* how far a line rises into its mask (it's masked, so 100% also OK) */ --reveal-y-block: 24px; /* how far a block rises */ /* ---------- 9. LAYERS ------------------------------------------------ */ --z-base: 0; --z-raised: 1; --z-sticky: 10; --z-nav: 50; --z-overlay: 80; --z-gate: 90; --z-preloader: 100; --z-grain: 110; /* pointer-events: none */ --z-skip: 200; /* skip link above everything */ /* ---------- 10. BREAKPOINTS (reference only) -------------------------- CSS custom properties cannot be used inside @media, so these are the canonical values used literally in the stylesheets: --bp-sm: 560px large phones / small tablets --bp-md: 800px tablets; two-column layouts begin --bp-lg: 1080px laptops; pinned side-by-side sequences begin --bp-xl: 1360px wide desktop Test widths: 390 (iPhone 14/15), 834 (iPad), 1440 (laptop). */ --bp-sm: 560px; --bp-md: 800px; --bp-lg: 1080px; --bp-xl: 1360px; } /* ---------- 4. SECTION THEMES -------------------------------------------- Put data-theme on a
. Everything inside re-reads the roles. Light themes restate EVERY role, so a light block nested inside a dark one (or vice versa) never inherits the wrong text colour. */ [data-theme="dawn"], [data-theme="paper"] { --color-bg: var(--c-dawn-100); --color-bg-raised: var(--c-dawn-50); --color-bg-sunken: var(--c-dawn-200); --color-text: var(--c-ink-900); --color-text-soft: var(--c-ink-600); --color-text-muted: var(--c-graphite-500); --color-line: var(--c-dawn-400); --color-line-soft: #EBE6DC; --color-dot: var(--c-graphite-400); --color-accent: var(--c-blue-500); --color-accent-text: var(--c-blue-700); --color-accent-strong: var(--c-blue-900); --color-on-accent: var(--c-dawn-100); --color-outcome: var(--c-gold-400); --color-outcome-text: var(--c-gold-700); --color-outcome-large: var(--c-gold-500); --color-attention: var(--c-clay-600); --color-focus: var(--c-blue-500); --color-selection: var(--c-blue-100); } [data-theme="paper"] { --color-bg: var(--c-dawn-200); --color-bg-raised: var(--c-dawn-100); --color-bg-sunken: var(--c-dawn-300); --color-line: #D3CCBF; } [data-theme="ink"], [data-theme="night"] { --color-bg: var(--c-ink-900); --color-bg-raised: var(--c-ink-800); --color-bg-sunken: var(--c-ink-950); --color-text: var(--c-dawn-100); --color-text-soft: var(--c-graphite-200); --color-text-muted: var(--c-graphite-300); --color-line: var(--c-ink-700); --color-line-soft: #2F2A2B; --color-dot: #5A5557; --color-accent: var(--c-blue-300); --color-accent-text: var(--c-blue-200); --color-accent-strong: var(--c-blue-200); --color-on-accent: var(--c-ink-950); --color-outcome: var(--c-gold-400); --color-outcome-text: var(--c-gold-200); --color-outcome-large: var(--c-gold-200); --color-attention: var(--c-clay-300); --color-focus: var(--c-blue-200); --color-selection: var(--c-blue-900); } [data-theme="night"] { --color-bg: var(--c-ink-950); --color-bg-raised: var(--c-ink-900); --color-bg-sunken: #100E0F; } /* ---------- 11. REDUCED MOTION -------------------------------------------- Durations collapse; the JS reads the same media query and skips Lenis, pinning and scrubbing entirely, jumping every sequence to its end state. */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-slower: 1ms; --dur-scene: 1ms; --dur-draw: 1ms; --stagger-line: 0ms; --stagger-item: 0ms; --reveal-y: 0; --reveal-y-block: 0; } }