/* ============================================================ The Whitley Brand System — tokens.css v1.0 (2026-07-25) One brand, seven vibes. See BRAND.md for usage rules. Usage: → vibe's primary mode → explicit mode Vibes: trusted (default) | corporate | exclusive | cutting-edge | playful Primary modes: trusted/exclusive/playful = light; corporate/cutting-edge = dark. ============================================================ */ /* ---- Constants (never vary) ---- */ :root { --font-serif: "Source Serif 4", "Source Serif Pro", Cambria, Georgia, serif; /* Never put "Franklin Gothic Medium" in this stack — it has only a medium-bold weight, so fallback renders ALL sans text semi-bold. */ --font-sans: "Libre Franklin", "Segoe UI", Arial, sans-serif; --font-mono: "JetBrains Mono", "Cascadia Mono", Consolas, monospace; --font-display: var(--font-serif); /* vibe dial may override */ --display-style: normal; /* playful sets italic */ --measure: 66ch; --label-tracking: 0.14em; --radius: 3px; --radius-btn: 3px; /* playful sets 999px */ /* chart semantics — constant across vibes */ --chart-positive: #014D81; --chart-negative: #C0302B; } /* ---- Trusted (default vibe, light-primary) ---- */ :root, [data-vibe="trusted"] { --bg: #FBF8F1; --surface: #F4EFE3; --ink: #1E1B16; --ink-soft: #4B453B; --ink-mute: #6E6655; --rule: #E7E0CF; --seal: #014D81; --seal-fg: #F6EFDC; --accent: #014D81; --accent-2: #01243C; --highlight: #F0DCB1; --negative: #C0302B; } /* Primary dark since 2026-08-04: Deep Midnight (Round T; Economist #050815 lineage). The original warm dark survives as the OPT-IN "lamplight" variant below — for special series pieces, on request. */ [data-vibe="trusted"][data-mode="dark"] { --bg: #0A1220; --surface: #131E33; --ink: #E9E6DA; --ink-soft: #A6ADBE; --ink-mute: #7A8296; --rule: #232F49; --seal: #3E7FB5; --seal-fg: #0A1220; --accent: #7FB2D6; --accent-2: #9CC4E4; --highlight: #1E2A45; --negative: #D9605B; } [data-vibe="trusted"][data-mode="dark"][data-variant="lamplight"] { --bg: #171511; --surface: #201D17; --ink: #ECE6D8; --ink-soft: #B5AF9F; --ink-mute: #847D6C; --rule: #38342A; --seal: #3E7FB5; --seal-fg: #171511; --accent: #6FA8D3; --accent-2: #9CC4E4; --highlight: #3A3323; --negative: #D9605B; } /* ---- Corporate (dark-primary) ---- */ [data-vibe="corporate"] { --bg: #141210; --surface: #1D1A17; --ink: #F8F7F4; --ink-soft: #AAA7A3; --ink-mute: #908C87; --rule: #3A342C; --seal: #936846; --seal-fg: #141210; --accent: #936846; --accent-2: #C89A6E; --highlight: #2A241C; --negative: #C0302B; --label-tracking: 0.18em; } [data-vibe="corporate"][data-mode="light"] { --bg: #F8F7F4; --surface: #F0EDE7; --ink: #0D0C0B; --ink-soft: #494540; --ink-mute: #6B665F; --rule: #E3DFD8; --seal: #936846; --seal-fg: #F8F7F4; --accent: #936846; --accent-2: #7A5538; --highlight: #EFE4D4; --negative: #C0302B; } /* ---- Exclusive (light-primary) ---- Deep forest replaced the ink seal 2026-07-27 (green admitted). */ [data-vibe="exclusive"] { --bg: #F5F5EC; --surface: #EDEEE0; --ink: #17281F; --ink-soft: #4E5B52; --ink-mute: #78857C; --rule: #D0CFC0; --seal: #1F3D2E; --seal-fg: #F5F5EC; --accent: #1F3D2E; --accent-2: #F05735; /* the one permitted flare */ --highlight: #E6E9D6; --gold: #B08725; --negative: #C0302B; } [data-vibe="exclusive"][data-mode="dark"] { --bg: #15221B; --surface: #1D2C24; --ink: #F5F5EC; --ink-soft: #A9B8AE; --ink-mute: #8FA096; --rule: #2A3B31; --seal: #F5F5EC; --seal-fg: #1F3D2E; /* the only permitted seal reversal */ --accent: #9DB8A6; --accent-2: #F27052; --highlight: #24352B; --gold: #C89B45; --negative: #D9605B; } /* ---- Cutting Edge (dark-primary) ---- */ [data-vibe="cutting-edge"] { --bg: #0B0F1A; --surface: #131A2B; --ink: #E6EAF4; --ink-soft: #9AA4BC; --ink-mute: #6B7690; --rule: #232A3D; --seal: #4D7CFF; --seal-fg: #0B0F1A; --accent: #4D7CFF; --accent-2: #6FE3D2; --highlight: #1A2440; --negative: #E0524D; --font-display: var(--font-mono); /* the dial: mono headlines */ } [data-vibe="cutting-edge"][data-mode="light"] { --bg: #F2F4F9; --surface: #FFFFFF; --ink: #10141F; --ink-soft: #4E566B; --ink-mute: #7A8299; --rule: #D8DEEC; --seal: #2B5FE8; --seal-fg: #F2F4F9; --accent: #2B5FE8; --accent-2: #0E8F84; --highlight: #E3EAFB; --negative: #C0302B; } /* ---- Playful (light-primary) ---- */ [data-vibe="playful"] { --bg: #FAF3E1; --surface: #F3E9CF; --ink: #1F3A43; --ink-soft: #4A626B; --ink-mute: #7A8D93; --rule: #E4D7B8; --seal: #E2725B; --seal-fg: #FAF3E1; --accent: #0E7C86; --accent-2: #E2725B; --highlight: #F2C94C; --negative: #C0302B; --display-style: italic; /* the dial: italic headlines */ --radius-btn: 999px; --stripe: repeating-linear-gradient(90deg, var(--accent) 0 26px, var(--accent-2) 26px 52px); } [data-vibe="playful"][data-mode="dark"] { --bg: #14262B; --surface: #1C333A; --ink: #F5EBD8; --ink-soft: #A9BDBB; --ink-mute: #7E9694; --rule: #2C4750; --seal: #EF8A70; --seal-fg: #14262B; --accent: #4FB3BC; --accent-2: #EF8A70; --highlight: #E8C558; --negative: #D9605B; --stripe: none; /* stripes rest at night */ } /* ============================================================ Base components (optional starter — style through tokens) ============================================================ */ .brand-body { background: var(--bg); color: var(--ink); font-family: var(--font-sans); } .brand-prose { font-family: var(--font-serif); max-width: var(--measure); line-height: 1.55; } .brand-headline { font-family: var(--font-display); font-style: var(--display-style); font-weight: 700; line-height: 1.15; text-wrap: balance; } .brand-label { font-family: var(--font-sans); font-size: 0.7rem; font-weight: 600; letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--accent-2); } .brand-data { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .brand-btn { font-family: var(--font-sans); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; background: var(--accent); color: var(--bg); padding: 9px 16px; border-radius: var(--radius-btn); border: none; } .brand-rule { border: none; border-top: 1px solid var(--rule); } /* The Seal. ≥20px: place seal-.svg (wren). <20px: this empty disc. */ .seal { border-radius: 50%; background: var(--seal); display: inline-flex; } .seal-end { width: 10px; height: 10px; border-radius: 50%; background: var(--seal); margin-left: 6px; display: inline-block; } /* ---- Minimalist (light-primary; added 2026-07-28) ---- Retro-minimalist: Anthropic register (oat/ink/warm grays) × 1990s Norton paperback. Licensed deviations (THIS VIBE ONLY): justified+hyphenated reading prose; centered title registers (chapter opener at weight 900; tracked-caps title page); pill buttons. Flare = Wren blue, rationed to once per page. Seal: ink, wren ≥20px; dark mode reverses (cream seal, ink wren). */ [data-vibe="minimalist"] { --bg: #FAF9F5; --surface: #F0EEE6; --ink: #141413; --ink-soft: #5E5D59; --ink-mute: #87867F; --rule: #E8E6DC; --seal: #141413; --seal-fg: #FAF9F5; --accent: #141413; --accent-2: #014D81; /* the rationed blue flare */ --highlight: #E3DACC; --negative: #C0302B; --radius-btn: 999px; } [data-vibe="minimalist"][data-mode="dark"] { --bg: #1F1E1D; --surface: #30302E; --ink: #F5F4ED; --ink-soft: #B0AEA5; --ink-mute: #87867F; --rule: #3D3D3A; --seal: #FAF9F5; --seal-fg: #141413; /* reversal: cream seal, ink wren */ --accent: #F5F4ED; --accent-2: #6FA8D3; --highlight: #3A362E; --negative: #D9605B; --radius-btn: 999px; } /* ---- Classic (light-primary; added 2026-08-03) ---- Ivy coastal, Tidewater accent: J.Press oxford × Williamsburg apothecary. Seal: hydrangea periwinkle disc, NAVY wren (the embroidered-on-oxford exception to light-bird-on-disc); dark mode lifts the disc, keeps the navy bird. Textures (role-split, this vibe only): university stripe = surface cloth; repp regimental = accent bands/dividers; body content on plain ground. Script license: ONE flourish per surface (lead word or signature line) in Edwardian Script ITC/Kunstler. Navy anchors mastheads and footers. */ [data-vibe="classic"] { --bg: #FBFAF6; --surface: #EDF2F8; --ink: #232A3A; --ink-soft: #525C70; --ink-mute: #7C8598; --rule: #D9DFE8; --seal: #8291C7; --seal-fg: #1F2A44; --accent: #4F5B9E; --accent-2: #5F7A4E; /* deep periwinkle · petal leaf */ --anchor: #1F2A44; /* blazer navy: mastheads, footers */ --highlight: #EEF0DC; --gold: #C9A227; --negative: #C0302B; --stripe-oxford: repeating-linear-gradient(90deg, #EDF2F8 0 4px, #FBFAF6 4px 8px); --stripe-repp: repeating-linear-gradient(-55deg, #1F2A44 0 14px, #5F7A4E 14px 22px, #1F2A44 22px 36px, #C9A227 36px 40px); } [data-vibe="classic"][data-mode="dark"] { --bg: #18223B; --surface: #222E4E; --ink: #EFF2F7; --ink-soft: #B4BDD2; --ink-mute: #8A94AE; --rule: #303C5E; --seal: #98A5DC; --seal-fg: #1F2A44; --accent: #98A5DC; --accent-2: #8FAF7E; --anchor: #111A2E; --highlight: #33406A; --gold: #D9B855; --negative: #D9605B; --stripe-oxford: repeating-linear-gradient(90deg, #222E4E 0 4px, #18223B 4px 8px); --stripe-repp: repeating-linear-gradient(-55deg, #98A5DC 0 14px, #8FAF7E 14px 22px, #98A5DC 22px 36px, #D9B855 36px 40px); } /* ============================================================ Chart tokens (Component Canon C1, locked 2026-07-26) Ordered categorical series. Rules: use strictly in order; >5 series → redesign the chart; no green; red stays reserved for negative. chart-1 is always the vibe's own accent. ============================================================ */ :root { --chart-grid: var(--rule); --chart-zero: var(--ink-mute); --chart-axis: var(--ink-soft); } :root, [data-vibe="trusted"] { --chart-1:#014D81; --chart-2:#B08725; --chart-3:#6E7FC9; --chart-4:#7D8F6D; --chart-5:#936846; } [data-vibe="trusted"][data-mode="dark"] { --chart-1:#7FB2D6; --chart-2:#D3AD55; --chart-3:#96A5E8; --chart-4:#97A987; --chart-5:#C89A6E; } [data-vibe="corporate"] { --chart-1:#C89A6E; --chart-2:#7FA3C4; --chart-3:#D9C79A; --chart-4:#8C949E; --chart-5:#E8DFD0; } [data-vibe="corporate"][data-mode="light"] { --chart-1:#936846; --chart-2:#4E7395; --chart-3:#A98E45; --chart-4:#6B7280; --chart-5:#3A342C; } [data-vibe="exclusive"] { --chart-1:#1F3D2E; --chart-2:#B08725; --chart-3:#F05735; --chart-4:#8A8A88; --chart-5:#6E5F3F; } [data-vibe="exclusive"][data-mode="dark"] { --chart-1:#9DB8A6; --chart-2:#C89B45; --chart-3:#F27052; --chart-4:#9C9C9A; --chart-5:#B0A280; } [data-vibe="cutting-edge"] { --chart-1:#4D7CFF; --chart-2:#6FE3D2; --chart-3:#9D7CFF; --chart-4:#FFC24D; --chart-5:#C8D2EC; } [data-vibe="cutting-edge"][data-mode="light"] { --chart-1:#2B5FE8; --chart-2:#0E8F84; --chart-3:#7A4DE8; --chart-4:#D99A1F; --chart-5:#8B98B8; } [data-vibe="playful"] { --chart-1:#0E7C86; --chart-2:#E2725B; --chart-3:#F2C94C; --chart-4:#1F3A43; --chart-5:#7C8A4A; } [data-vibe="playful"][data-mode="dark"] { --chart-1:#4FB3BC; --chart-2:#EF8A70; --chart-3:#E8C558; --chart-4:#B5CDD3; --chart-5:#A9B573; } [data-vibe="minimalist"] { --chart-1:#141413; --chart-2:#014D81; --chart-3:#8A8879; --chart-4:#7D8F6D; --chart-5:#B5B0A1; } [data-vibe="minimalist"][data-mode="dark"] { --chart-1:#F5F4ED; --chart-2:#6FA8D3; --chart-3:#B0AEA5; --chart-4:#97A987; --chart-5:#6B6A64; } [data-vibe="classic"] { --chart-1:#4F5B9E; --chart-2:#5F7A4E; --chart-3:#C9A227; --chart-4:#1F2A44; --chart-5:#A8916B; } [data-vibe="classic"][data-mode="dark"] { --chart-1:#98A5DC; --chart-2:#8FAF7E; --chart-3:#D9B855; --chart-4:#8E9AB8; --chart-5:#C2AC85; } /* Ramps (C4, locked 2026-07-27): Sequential — color-mix(in srgb, var(--accent) P%, var(--bg)), P ∈ {8,25,45,70,100}. Diverging — accent-poled: positive side mixes var(--accent), negative side mixes var(--negative), midpoint = var(--bg). The NEGATIVE pole is always red; only the positive pole speaks the vibe. Green is never semantic. */