/* ============================================================================ VSVSV — DESIGN TOKENS ============================================================================ The identity, as code. Loaded BEFORE style.css on every page, and intended to be loaded by the SSB sub-app too so both surfaces share one palette. WHY THIS FILE EXISTS There was no VSVSV visual identity source of truth. docs/brand-guidelines.md describes the RETIRED brand (the pre-VSVSV source identifier) and a logo the Brand Rule forbids us from using, so "follow the guidelines" was only half-defined. Two things drifted into that gap, and neither was detectable: * the SSB sub-app invented a near-miss palette — #0f2e5c (222 uses) where the navy is #002D62, #b22222 (34) where the crimson is #A6192E, plus #2a7d6e and #d97e2e which are in no palette at all; * an externally-authored redesign brief supplied family accents that fail the WCAG AA bar the same brief set as its own acceptance criterion. `npm run check:brand` measures brand STRINGS. Nothing measured colour. That is what `npm run check:brand-visual` now does, and this file is what it measures against. Add a colour here before you use it anywhere. WHAT IS *NOT* HERE The brand palette itself (--brand-navy etc.) still lives in style.css :root, which has 533 var(--brand-*) consumers. Re-declaring those values here would recreate the duplication that caused the drift in the first place. style.css :root and this file together are the identity; the gate scans both. ============================================================================ */ :root { /* ---- Family accents ---------------------------------------------------- Each course family gets an accent so certificates, instructor courses, SSB practice and "not for sale" read differently at a glance. THREE tokens per family, deliberately. Do not collapse them into one: --accent-x operative. Used ANYWHERE the colour carries or sits behind TEXT — roundel letters, price chips, pills, icons on tints. Every one is >= 4.5:1 on white. --accent-x-vivid decorative only. Rails, card top borders, gradients, halo rings. Never has text on or near it, so it can stay bright. --accent-x-rgb the vivid colour as "r,g,b", so tints are written rgba(var(--accent-x-rgb), .07) rather than color-mix(), which is still missing from older Android WebViews — a large share of this audience. Measured contrast on white (verified in the live DOM, not asserted): A 4.88 · B 5.33 · C 5.37 · instructor 6.60 SSB 5.78 · soon 5.42 · school 7.14 The brief's single flat value per family measured B 3.41, C 2.81, SSB 3.95, soon 3.64 — all under 4.5. Its amber failed even the 3:1 large-text floor, so white letters on the C roundel were unreadable. */ --accent-cert-a: #2f6fd0; --accent-cert-a-vivid: #2f6fd0; --accent-cert-a-rgb: 47,111,208; --accent-cert-b: #157a53; --accent-cert-b-vivid: #1e9e6a; --accent-cert-b-rgb: 30,158,106; --accent-cert-c: #9a5c08; --accent-cert-c-vivid: #d9880f; --accent-cert-c-rgb: 217,136,15; --accent-inst: #b3213b; --accent-inst-vivid: #b3213b; --accent-inst-rgb: 179,33,59; --accent-ssb: #0a7370; --accent-ssb-vivid: #0e8f8a; --accent-ssb-rgb: 14,143,138; --accent-soon: #5b6b85; --accent-soon-vivid: #7c8798; --accent-soon-rgb: 124,135,152; --accent-school: #6246a3; --accent-school-vivid: #6246a3; --accent-school-rgb: 98,70,163; /* ---- Surface neutrals, biased toward the navy -------------------------- A pure mid-grey reads as unconsidered next to a navy brand. These are the only greys new work should use; the audit found ten unsystematised values already in live use (#666, #333, #555, #808080, #3a4757, #5b6b7f and four near-identical off-whites) which these replace as pages are reworked. */ --surface-line: #dde4ee; /* hairline borders */ --surface-line-soft: #e8edf5; /* dividers inside a card */ --surface-panel: #f5f7fa; /* section ground */ --surface-card: #ffffff; /* Muted body text. Measured 5.48:1 on --surface-card and 5.10:1 on --surface-panel, so it clears AA for normal text on BOTH grounds — the panel is the binding one. It is the most-repeated literal on the site (secondary paragraphs, help text, expiry notes); anything dimmer than this fails against the panel ground. */ --surface-ink-muted: #5a6b7d; /* Notice surface — used by the tri-lingual machine-translation disclaimer (frontend/js/tri-lingual.js). A caution tone that is NOT an error: the page is working as intended, the reader is simply being told the non-English text is machine-produced. Measured on --notice-bg: ink 9.76:1, strong ink 7.29:1, both above AA. The border is decorative and carries no text. */ --notice-bg: #fff8e8; --notice-line: #e6d3a8; --notice-ink: #4a3f28; --notice-ink-strong: #6b4e12; /* Semantic states the palette had no name for. These are PROMOTIONS, not new choices: --danger is the red already used on 11 auth/dashboard error surfaces and --info the blue already used on 6 classroom/dashboard information bars. Naming them at their existing values changes no pixels and gives the next person something to reach for other than pasting a hex. --success (#1e8e5a) and --warning (#c98a00) already exist in style.css :root. NOT promoted here: the three rival "success" greens (#2e7d32, #1b7f3b, #27ae60, 24 uses) and the slate text scale — reconciling those DOES move pixels, so it stays an owner decision. */ --danger: #c0392b; --info: #2f80ed; /* --success is a FILL colour: 4.14:1 on white, fine behind a badge or a border but BELOW the 4.5 AA floor for text. The three rival greens it replaces were used as text 11 times, nine of them currently PASSING (5.13 and 5.07), so folding them straight onto --success would have quietly created nine new accessibility failures while "cleaning up" the palette. --success-ink is the same hue darkened to 5.40:1, which is where those text uses already sat, so the text barely changes and now clears AA. One green identity, two roles. */ --success-ink: #1a794d; /* Same fill-vs-ink split as the greens, for the same reason: white text on --info measures 3.87:1, under the 4.5 AA floor. --info-ink is the same hue darkened until white text on it clears AA (4.62:1). Used by the toast, which is plain 16px text — the "large text" 3:1 allowance does not apply to it. */ --info-ink: #1570eb; /* ---- Vertical rhythm --------------------------------------------------- THE ONE RULE: a container owns the space below it. Children do not carry bottom margins for section separation. Why this exists: the visual audit found 18 dead bands over 110px across five pages. On /courses.html a single gap measured 196px, assembled from THREE mechanisms that knew nothing about each other — .courses-grid margin-bottom 60px (legacy, from the old flat layout) + .track padding-bottom 80px + .track margin-bottom 56px Each was individually reasonable. Stacked, they left a hole the width of a phone screen. Use these tokens on the CONTAINER and delete the child's margin; do not add a new bottom margin to solve a spacing problem. */ --rhythm-tight: 18px; /* between rows inside one block */ --rhythm-block: 28px; /* between blocks inside a section */ --rhythm-section: 56px; /* between sibling sections */ --rhythm-band: 80px; /* around a major page-level band */ }