/** * YWA Design Tokens * --------------------------------------------------------------------------- * Generated from project-specific-guidelines/visual/tokens-spec.md * Naming: spec uses dot-delimited (color.text.default); CSS uses kebab-case * with a `--` prefix (--color-text-default). Mapping is mechanical. * * Tier order (never skip a level): * primitive / brand -> semantic -> component * Components reference semantics. Semantics reference brand or primitives. * * DO NOT hardcode raw values in templates. Always reference a token. */ :root { /* ========================================================================= 1. PRIMITIVE TIER — raw ramps, never consumed directly ========================================================================= */ /* Utility neutral (chroma 0) — borders, surface tints, muted backgrounds. Deliberately decoupled from brand.ink so a brand retune leaves utility scaffolding untouched. */ --primitive-neutral-50: #F8F8F8; /* Added 2026-07-26. The ramp steps 7 -> 11 -> 22 as it descends, so the coarsest jump relative to its neighbours sits right at the light end — exactly where near-white SECTION tones have to live. `surface.subtle` at neutral-100 read as too strong a beat against `canvas` when the two alternate down a page (judged on the full page, not a swatch). This is the step between them. Chosen for the role, not to reproduce a value: the earlier version of this tone was a 50% blend of two tokens landing on the same colour off-ramp, which is what prompted minting it properly. */ --primitive-neutral-75: #F3F3F3; --primitive-neutral-100: #EDEDED; --primitive-neutral-200: #D7D7D7; --primitive-neutral-300: #BABABA; --primitive-neutral-400: #9E9E9E; --primitive-neutral-500: #838383; --primitive-neutral-600: #6F6F6F; --primitive-neutral-700: #595959; --primitive-neutral-800: #424242; --primitive-neutral-900: #2B2B2B; --primitive-neutral-950: #161616; /* Functional danger — distinct from brand.whiff-red by design. A brand-primary CTA and an error banner must not read as the same thing. */ --primitive-red-50: #FFF6F5; --primitive-red-100: #FFE6E3; --primitive-red-200: #FFC8C1; --primitive-red-300: #FF9B90; --primitive-red-400: #FF6459; --primitive-red-500: #E83531; --primitive-red-600: #CE0E18; --primitive-red-700: #AB000E; --primitive-red-800: #810008; --primitive-red-900: #580003; --primitive-red-950: #320001; /* Functional info — distinct from brand yale-blue */ --primitive-blue-50: #F2FAFF; --primitive-blue-100: #DBF0FF; --primitive-blue-200: #AFDFFF; --primitive-blue-300: #77C5F5; --primitive-blue-400: #39A9E6; --primitive-blue-500: #008DC9; --primitive-blue-600: #0077AB; --primitive-blue-700: #00608B; --primitive-blue-800: #004869; --primitive-blue-900: #002F47; --primitive-blue-950: #001828; /* Functional success */ --primitive-green-50: #F3FBF3; --primitive-green-100: #E0F3E1; --primitive-green-200: #BEE3C0; --primitive-green-300: #91CC96; --primitive-green-400: #67B36F; --primitive-green-500: #41994E; --primitive-green-600: #29833A; --primitive-green-700: #116C27; --primitive-green-800: #06511A; --primitive-green-900: #04360F; --primitive-green-950: #021C06; /* Functional warning */ --primitive-amber-50: #FFF7F1; --primitive-amber-100: #FFE8D7; --primitive-amber-200: #FCCDAA; --primitive-amber-300: #F0A971; --primitive-amber-400: #DE8637; --primitive-amber-500: #C26900; --primitive-amber-600: #A45800; --primitive-amber-700: #864700; --primitive-amber-800: #653400; --primitive-amber-900: #442100; --primitive-amber-950: #260F00; /* ========================================================================= 2. BRAND TIER — Whiff identity, never consumed directly ========================================================================= */ /* Whiff Red — seed #DC3618 from the Whiff logo. Referenced from semantics ONLY via color.accent.* */ --brand-whiff-red-50: #FFF6F4; --brand-whiff-red-100: #FFE7E1; --brand-whiff-red-200: #FFC9BD; --brand-whiff-red-300: #FF9C88; --brand-whiff-red-400: #FC694E; --brand-whiff-red-500: #E43F22; --brand-whiff-red-600: #CA2400; --brand-whiff-red-700: #A51B00; --brand-whiff-red-800: #7D1200; --brand-whiff-red-900: #550900; --brand-whiff-red-950: #310200; /* Yale Blue — seed #00356B, Yale's official primary */ --brand-yale-blue-50: #F4F9FF; --brand-yale-blue-100: #E2EEFD; --brand-yale-blue-200: #C2DAF7; --brand-yale-blue-300: #9ABEEA; --brand-yale-blue-400: #74A1DA; --brand-yale-blue-500: #5486C2; --brand-yale-blue-600: #4070AB; --brand-yale-blue-700: #2D5B91; --brand-yale-blue-800: #1F436F; --brand-yale-blue-900: #132C4A; --brand-yale-blue-950: #071629; /* Ink — warm near-black, seed #1A1A17. TEXT ROLES ONLY. Utility greys use primitive-neutral instead. */ --brand-ink-50: #F8F8F8; --brand-ink-100: #EDEDEC; --brand-ink-200: #D7D7D6; --brand-ink-300: #BBBBB8; --brand-ink-400: #9F9F9B; --brand-ink-500: #838380; --brand-ink-600: #6F6F6B; --brand-ink-700: #5A5A56; --brand-ink-800: #424240; --brand-ink-900: #2B2B29; --brand-ink-950: #161615; /* ========================================================================= 3. SEMANTIC TIER — LIGHT MODE (the default) — consume these ========================================================================= */ /* Surface — pick by elevation/containment relationship, never by matching a source colour. Ladder: canvas -> raised(+shadow) -> sunken(true wells only) -> layer.01/02/03 for nesting. */ --color-surface-canvas: var(--primitive-neutral-50); --color-surface-raised: #FFFFFF; --color-surface-sunken: var(--primitive-neutral-200); --color-surface-overlay: rgba(43, 43, 43, 0.50); --color-surface-inverse: var(--primitive-neutral-900); /* Added in Figma after tokens-spec.md was written — reconciled 2026-07-20. row-alt is the alternating table-row tint (Media Library tables). */ /* Retuned 2026-07-26: neutral-100 -> neutral-75. The ROLE is unchanged — a section set apart from its neighbours by tone, no depth. Judged on the full page (Josh): against `canvas` the 100 step read as a hard band rather than a beat, especially with the near-black Archives and the sunken Newsletter already carrying the page's weight lower down. `row-alt` deliberately stays at neutral-100: zebra striping is read at row height across a table, where the finer step would disappear. Two roles that used to share a value now correctly diverge — which is the alias layer doing its job, and removes one of the value collisions the audit flagged. */ --color-surface-subtle: var(--primitive-neutral-75); --color-surface-row-alt: var(--primitive-neutral-100); /* Text — brand voice, so these ride brand.ink not primitive.neutral */ --color-text-default: var(--brand-ink-900); --color-text-subdued: var(--brand-ink-700); --color-text-subtle: var(--brand-ink-500); --color-text-strong: var(--brand-ink-950); --color-text-inverse: var(--brand-ink-50); --color-text-link: var(--brand-yale-blue-700); --color-text-link-hover: var(--brand-yale-blue-800); --color-text-link-visited: var(--brand-yale-blue-900); /* Border — utility, so neutral not ink */ --color-border-default: var(--primitive-neutral-200); --color-border-subtle: var(--primitive-neutral-100); --color-border-strong: var(--primitive-neutral-400); --color-border-focus: var(--brand-yale-blue-500); /* Action: primary — filled INK (not Yale Blue). Changed in Figma after tokens-spec.md was written; reconciled against the live file 2026-07-20. Yale Blue remains in use for links, focus and the tertiary tier — it moved off the primary button only. */ --color-action-primary-bg-rest: var(--brand-ink-900); --color-action-primary-bg-hover: var(--brand-ink-800); --color-action-primary-bg-active: var(--brand-ink-950); --color-action-primary-bg-disabled: var(--primitive-neutral-200); --color-action-primary-fg-rest: var(--brand-ink-50); --color-action-primary-fg-disabled: var(--primitive-neutral-400); /* Action: secondary — ink text, neutral outline */ --color-action-secondary-bg-rest: transparent; --color-action-secondary-bg-hover: var(--primitive-neutral-100); --color-action-secondary-fg-rest: var(--brand-ink-900); --color-action-secondary-border-rest: var(--primitive-neutral-400); --color-action-secondary-border-hover: var(--primitive-neutral-600); /* Action: tertiary — subtle Yale Blue ghost */ --color-action-tertiary-bg-rest: transparent; --color-action-tertiary-bg-hover: var(--brand-yale-blue-50); --color-action-tertiary-fg-rest: var(--brand-yale-blue-700); --color-action-tertiary-fg-hover: var(--brand-yale-blue-800); /* Action: ghost — ink text, neutral hover */ --color-action-ghost-bg-rest: transparent; --color-action-ghost-bg-hover: var(--primitive-neutral-100); --color-action-ghost-fg-rest: var(--brand-ink-700); --color-action-ghost-fg-hover: var(--brand-ink-900); /* Action: danger — primitive red, NEVER brand red */ --color-action-danger-bg-rest: var(--primitive-red-700); --color-action-danger-bg-hover: var(--primitive-red-800); --color-action-danger-bg-active: var(--primitive-red-900); --color-action-danger-fg-rest: var(--primitive-red-50); /* Status — all primitive tier, no brand */ --color-status-success-bg: var(--primitive-green-50); --color-status-success-fg: var(--primitive-green-800); --color-status-success-border: var(--primitive-green-300); --color-status-warning-bg: var(--primitive-amber-50); --color-status-warning-fg: var(--primitive-amber-900); --color-status-warning-border: var(--primitive-amber-300); --color-status-danger-bg: var(--primitive-red-50); --color-status-danger-fg: var(--primitive-red-800); --color-status-danger-border: var(--primitive-red-300); --color-status-info-bg: var(--primitive-blue-50); --color-status-info-fg: var(--primitive-blue-800); --color-status-info-border: var(--primitive-blue-300); /* Focus ring — :focus-visible (keyboard), not :focus */ --color-focus-ring: var(--brand-yale-blue-500); --color-focus-ring-offset: #FFFFFF; /* Layers — depth-aware nesting (matters most in the Media Library: person -> album -> song) */ --color-layer-01-bg: #FFFFFF; --color-layer-02-bg: var(--primitive-neutral-50); --color-layer-03-bg: var(--primitive-neutral-100); /* Accent — brand identity roles. The ONLY place brand-whiff-red is referenced from the semantic tier. */ --color-accent-default: var(--brand-whiff-red-500); --color-accent-emphasis: var(--brand-whiff-red-700); --color-accent-bg-subtle: var(--brand-whiff-red-100); --color-accent-fg-on-emphasis: var(--brand-whiff-red-50); --color-accent-text: var(--brand-whiff-red-700); /* ========================================================================= 4. TYPOGRAPHY ========================================================================= */ /* Families. Inter is the workhorse; Cooper Hewitt is navbar/footer chrome ONLY (never content, body, form or heading roles); Hedvig is editorial accent for the three largest roles only. */ --type-family-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --type-family-serif: "Hedvig Letters Serif", Georgia, "Times New Roman", serif; /* Cooper Hewitt. Named `brand` to match the live Figma variable (`type/family/brand`) — tokens-spec.md calls it `type.family.nav`, which is the stale name. Usage is unchanged: navbar and footer chrome only, never content, body, form or heading roles. */ --type-family-brand: "Cooper Hewitt", var(--type-family-sans); /* Not in the Figma system — added here because the `code` role needs a concrete mono stack and Figma has no variable for one. */ --type-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Sizes — MOBILE-FIRST. Tablet shares the mobile scale (per spec), so the desktop scale switches in at the lg breakpoint (1024px) below. */ --type-size-display: 40px; --type-size-title: 36px; --type-size-heading-1: 32px; /* Steps down on phones — the desktop block below holds it at 28. It is a chapter/section heading, and at 28 on a 390px screen the longer History chapters wrapped to two lines each, which turned a six-item index into a ten-line one. heading-1 deliberately does NOT step down with it: that role is used by the section headers our own blocks build, and Josh judged those at 32 on real pages. */ --type-size-heading-2: 24px; --type-size-heading-3: 20px; --type-size-heading-4: 20px; /* 16 below 1024, 18 from 1024 up (see the desktop block). This used to be 20 here — LARGER than the 18 it takes on desktop, making it the only role in the scale that grew as the screen shrank. Not a decision: the 2026-07-24 desktop step-down took body-lead 20 → 18 and explicitly left the mobile scale for later, so mobile kept the original Figma 20. Against 16px body that is a 25% jump on the narrowest screens, which is what Josh saw as "way too fat" (2026-07-27). Now matches body on small screens and steps up to 18 where there is room — an opening paragraph reads as an opener on desktop without shouting on a phone. */ --type-size-body-lead: 16px; --type-size-body: 16px; --type-size-code: 16px; --type-size-action: 16px; --type-size-data-row: 16px; --type-size-data-cell-emphasis: 16px; /* MOBILE 14px FLOOR — these six roles are 12px on desktop but lift to 14px on mobile, per the live Figma Typography collection. Deliberate: it crosses the studio "avoid 14" baseline by design, because 12px small text is genuinely hard to read on a phone and much of this audience is older. tokens-spec.md's mobile-delta list omits these; the Figma file is correct. */ --type-size-body-small: 14px; --type-size-body-compact: 14px; /* §2 card/dense-body role — held at 14 at ALL widths (no desktop override below), so card copy never drops to fine-print 12 */ --type-size-eyebrow: 14px; --type-size-meta: 14px; --type-size-action-small: 14px; --type-size-data-header: 14px; --type-size-data-cell-meta: 14px; /* Weights. Inter style names carry spaces ("Semi Bold"), numeric here. */ --type-weight-light: 350; /* Inter body — the "lighter Inter" default (2026-07-24) */ --type-weight-regular: 400; --type-weight-medium: 500; --type-weight-semibold: 600; --type-weight-bold: 700; /* Line heights — unitless so they scale with size across breakpoint modes */ --type-leading-display: 1.1; --type-leading-title: 1.15; --type-leading-heading-1: 1.15; --type-leading-heading-2: 1.2; --type-leading-heading-3: 1.25; --type-leading-heading-4: 1.3; --type-leading-body: 1.5; --type-leading-tight: 1.2; --type-leading-data: 1.4; /* Letter spacing — percentages in the spec, em here (1% = 0.01em) */ --type-tracking-display: -0.02em; --type-tracking-title: -0.015em; --type-tracking-heading-1: -0.01em; --type-tracking-heading-2: -0.005em; --type-tracking-none: 0; --type-tracking-eyebrow: 0.12em; --type-tracking-data-header: 0.08em; /* Nav chrome tracking. Cooper Hewitt Book at 0 tracking reads tight, so the nav/footer link text opens up slightly. Chosen on-screen 2026-07-23 (option "5.1"). NOT yet in the Figma Typography collection — owed to a design session so design + build stay in sync. */ --type-tracking-nav: 0.022em; /* ========================================================================= 5. SPACE — base 4px, numeric scale (room to insert space-150 later) ========================================================================= */ --space-0: 0; --space-100: 4px; --space-200: 8px; --space-300: 12px; --space-400: 16px; --space-500: 20px; --space-600: 24px; --space-800: 32px; --space-1000: 40px; --space-1200: 48px; --space-1600: 64px; --space-2000: 80px; --space-2400: 96px; --space-3200: 128px; /* ========================================================================= 6. RADIUS ========================================================================= */ --radius-none: 0; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 9999px; --radius-full: 50%; /* ========================================================================= 7. ELEVATION — semantic, not numeric. NOTE: spec marks these first-pass placeholders, to retune on real canvas. ========================================================================= */ --elevation-card: 0 1px 2px rgba(0, 0, 0, 0.08); --elevation-raised: 0 2px 8px rgba(0, 0, 0, 0.10); --elevation-overlay: 0 8px 24px rgba(0, 0, 0, 0.14); --elevation-dropdown: 0 4px 12px rgba(0, 0, 0, 0.10); /* ========================================================================= 8. MOTION ========================================================================= */ --motion-duration-fast: 100ms; --motion-duration-standard: 200ms; --motion-duration-slow: 400ms; --motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1); --motion-easing-decelerate: cubic-bezier(0, 0, 0.2, 1); --motion-easing-accelerate: cubic-bezier(0.4, 0, 1, 1); /* ========================================================================= 9. Z-INDEX — named layers, headroom between values ========================================================================= */ --z-base: 0; --z-dropdown: 1000; --z-sticky: 1020; --z-overlay: 1040; --z-modal: 1050; --z-popover: 1060; --z-toast: 1070; --z-tooltip: 1080; /* ========================================================================= 10. BREAKPOINTS — reference only. CSS media queries cannot read custom properties, so the literal values are repeated in @media rules. Keep these in sync by hand. ========================================================================= */ --breakpoint-sm: 640px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; --breakpoint-xl: 1280px; } /* =========================================================================== DESKTOP TYPE SCALE — lg (1024px) and up. Tablet intentionally stays on the mobile scale per tokens-spec.md ("tablet and mobile share one type scale, so no third mode is needed"). Only size changes per mode; leading and tracking are relative and follow. =========================================================================== */ @media (min-width: 1024px) { :root { /* Desktop scale stepped down one notch — LOCKED 2026-07-24, judged on the full front page. The editorial top ran large; body / action / small hold so readability doesn't move. 4px-grid throughout. OVERRIDES the Figma [YWA] Typography collection — owed back to the design lane (see reconciliation checklist in theme-build-workflow.md). Figma → here: display 64→56, title 48→40, heading-1 40→32, heading-2 32→28, body-lead 20→16 (heading-3/4, body, small unchanged). */ --type-size-display: 56px; /* Figma 64 */ --type-size-title: 40px; /* Figma 48 */ --type-size-heading-1: 32px; /* Figma 40 */ --type-size-heading-2: 28px; /* Figma 32 */ --type-size-heading-3: 24px; /* = Figma 24 */ --type-size-heading-4: 20px; /* = Figma 20 */ /* body-lead RETIRED as a distinct size — 16px, identical to body, at every width (Josh, 2026-07-28). It was the scale's one off-grid value: Figma 20, stepped to 18 on 2026-07-24, then judged still too heavy against 16px body once the real interior pages existed. Lead paragraphs now read at body size and earn their emphasis from position, not scale. The ROLE still exists and is still applied (hero intro, every page-intro opener) so nothing had to be re-tagged and the decision is reversible from this one line. Retiring the class properly is a follow-up. */ --type-size-body-lead: 16px; /* = --type-size-body; see note above */ /* The six small roles drop back to 12px on desktop — the 14px floor is a mobile-only measure. body, code, action, data/row and data/cell-emphasis are genuinely unchanged across modes. */ --type-size-body-small: 12px; --type-size-eyebrow: 12px; --type-size-meta: 12px; --type-size-action-small: 12px; --type-size-data-header: 12px; --type-size-data-cell-meta: 12px; } } /* =========================================================================== DARK MODE — OPT-IN ONLY. Applied via , deliberately NOT via @media (prefers-color-scheme: dark). ----------------------------------------------------------------------- Why opt-in: every approved YWA design is light. No dark-mode screens were designed or reviewed. If this were bound to the OS preference, any visitor whose device is set to dark would be served an auto-generated dark site nobody has ever looked at — including Frank, if his laptop is set that way. That is a launch-day surprise waiting to happen. The mappings below are faithful to tokens-spec.md and stay ready, so if dark mode is ever wanted it is a one-line switch plus a design review, not a rebuild. Flipping the selector to a media query is that one line. OPEN QUESTION FOR JOSH: is dark mode in scope at all? If yes it needs designs; if no, this block can eventually be deleted rather than shipped. =========================================================================== */ :root[data-theme="dark"] { --color-surface-canvas: var(--primitive-neutral-950); --color-surface-raised: var(--primitive-neutral-800); --color-surface-sunken: var(--primitive-neutral-950); --color-surface-overlay: rgba(22, 22, 22, 0.60); --color-surface-inverse: var(--primitive-neutral-50); --color-surface-subtle: var(--primitive-neutral-900); --color-surface-row-alt: var(--primitive-neutral-900); --color-text-default: var(--brand-ink-100); --color-text-subdued: var(--brand-ink-300); --color-text-subtle: var(--brand-ink-500); --color-text-strong: var(--brand-ink-50); --color-text-inverse: var(--brand-ink-900); --color-text-link: var(--brand-yale-blue-300); --color-text-link-hover: var(--brand-yale-blue-200); --color-text-link-visited: var(--brand-yale-blue-400); --color-border-default: var(--primitive-neutral-800); --color-border-subtle: var(--primitive-neutral-900); --color-border-strong: var(--primitive-neutral-700); --color-border-focus: var(--brand-yale-blue-400); --color-action-primary-bg-rest: var(--brand-ink-100); --color-action-primary-bg-hover: var(--brand-ink-200); --color-action-primary-bg-active: var(--brand-ink-50); --color-action-primary-bg-disabled: var(--primitive-neutral-800); --color-action-primary-fg-rest: var(--brand-ink-950); --color-action-primary-fg-disabled: var(--primitive-neutral-600); --color-action-secondary-bg-hover: var(--primitive-neutral-800); --color-action-secondary-fg-rest: var(--brand-ink-100); --color-action-secondary-border-rest: var(--primitive-neutral-600); --color-action-secondary-border-hover: var(--primitive-neutral-400); --color-action-tertiary-bg-hover: var(--brand-yale-blue-900); --color-action-tertiary-fg-rest: var(--brand-yale-blue-300); --color-action-tertiary-fg-hover: var(--brand-yale-blue-200); --color-action-ghost-bg-hover: var(--primitive-neutral-800); --color-action-ghost-fg-rest: var(--brand-ink-300); --color-action-ghost-fg-hover: var(--brand-ink-100); --color-action-danger-bg-hover: var(--primitive-red-600); --color-action-danger-bg-active: var(--primitive-red-500); --color-status-success-bg: var(--primitive-green-900); --color-status-success-fg: var(--primitive-green-200); --color-status-success-border: var(--primitive-green-700); --color-status-warning-bg: var(--primitive-amber-900); --color-status-warning-fg: var(--primitive-amber-200); --color-status-warning-border: var(--primitive-amber-700); --color-status-danger-bg: var(--primitive-red-900); --color-status-danger-fg: var(--primitive-red-200); --color-status-danger-border: var(--primitive-red-700); --color-status-info-bg: var(--primitive-blue-900); --color-status-info-fg: var(--primitive-blue-200); --color-status-info-border: var(--primitive-blue-700); --color-focus-ring: var(--brand-yale-blue-400); --color-focus-ring-offset: var(--primitive-neutral-950); --color-layer-01-bg: var(--primitive-neutral-900); --color-layer-02-bg: var(--primitive-neutral-800); --color-layer-03-bg: var(--primitive-neutral-700); --color-accent-default: var(--brand-whiff-red-400); --color-accent-emphasis: var(--brand-whiff-red-300); --color-accent-bg-subtle: var(--brand-whiff-red-900); --color-accent-fg-on-emphasis: var(--brand-whiff-red-950); --color-accent-text: var(--brand-whiff-red-300); }