/* ============================================================================= Margin Notes — Brand Tokens (v9) ============================================================================= THE SOURCE OF TRUTH for color, type, motion easing, and reading geometry. This file is served at /design/tokens.css and consumed by: - The React shell (imported via index.css's @theme block — values mirror these hex literals for Tailwind utility generation) - Every bespoke article HTML (linked first in , before any other CSS) When you change a token here, update the same value in index.css's @theme block. (Future P1: build script auto-syncs the two.) Locked palette (Tushar, May 2026): Canvas #FBFAF7 warm off-white — print-publication weight, kills glare Ink #2A3B6E navy primary — hero, closer, pull-quote, endcard pill Ink-soft #475C9A navy secondary — h2/h3, inline , deeplink labels Prose #3A4B82 navy body text — running prose Accent #c73e2a vermilion — diagram heat, scratch, fastlane, glow Acc-ink #a02d1a dark vermilion — fine type / strokes ≤1.5px ============================================================================= */ :root { /* --- Color: surface + ink (navy hierarchy) ----------------------------- */ --canvas: #FBFAF7; --ink-deep: #1F2844; /* solid fills only — cover bg, button bg, favicon block, m,n pill, dark cards. NEVER a stroke on a light surface. The loudest navy. */ --ink: #2A3B6E; --ink-soft: #475C9A; --prose: #3A4B82; --mute-1: #5A6280; /* captions, marginalia */ --mute-2: #8F95A8; /* inactive UI, sub-labels */ --mute-3: #C5C9D4; /* hairlines, inactive lines */ --hairline: #E5E2DA; /* warm hairline matching warm canvas */ /* --- Color: chrome + accents ------------------------------------------- */ --link: #0d9488; /* teal-600 — inline body links only */ --chrome: #2563eb; /* blue-600 — focus rings + ::selection ONLY */ --accent: #c73e2a; /* vermilion — diagram heat */ --accent-ink: #a02d1a; /* dark vermilion — fine type, 1.5px strokes */ --select-bg: #dbeafe; /* blue-100 — ::selection bg */ --select-fg: #1e3a8a; /* blue-900 — ::selection fg */ /* --- Type --------------------------------------------------------------- Five-font system (May 14 2026 — Caveat reinstated, two-script vocabulary): Newsreader display + serif body voice (hero, dek, pullquote, emph, closer-question, end-card) Inter UI chrome + body fallback (nav, buttons, captions) Mono labels + the logo (meta lines, deeplink labels, bypass labels, mn glyph) Sacramento wordmark + signature (homepage hero "margin notes", |mn endcard seal, /about signature) — ceremonial, scarce Caveat in-article hand-marks (scratch corrections, hand- numerals like "60%", journey captions, AFTER tags, T/Pi cross-outs) — working surface, used inside motion moments Two scripts coexist because each has a non-overlapping job: Sacramento is the publication's signature; Caveat is the writer's working pencil. */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-display: "Newsreader", Georgia, "Times New Roman", serif; --font-script: "Sacramento", cursive; --font-hand: "Caveat", "Sacramento", cursive; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* --- Motion ------------------------------------------------------------- */ --ease: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quint, house easing */ --ease-in: cubic-bezier(0.64, 0, 0.78, 0); /* --- Reading geometry --------------------------------------------------- */ --col-reading: 640px; --col-margin: 300px; --gutter: 72px; }