/* ═════════════════════════════════════════════════════════════════════════ Design tokens — the single source of truth for colour and type. Loaded FIRST by every page, before that page's own stylesheet. Pages map their local variables onto these rather than restating hex values, so a brand change happens here and nowhere else. Three layers, and the distinction matters: 1. BRAND raw palette, taken from lse-growth-lab-logo-01.svg. Never referenced directly by a component — always through a semantic token, so components stay re-themeable. 2. SEMANTIC what components actually use: ink, line, accent, focus. 3. DATA colours that ENCODE meaning in a map or chart. These are deliberately NOT brand-constrained; see the note below. Contrast: every value used for text or a UI boundary was checked against the page background (#F5F4EF) and passes WCAG AA. The ratio is noted in a comment where it is the reason the value is what it is. ═════════════════════════════════════════════════════════════════════════ */ :root { /* ── 1. Brand palette ─────────────────────────────────────────────────── The six logo colours, verbatim. Three of them (gold, blue, green) are light: they are FILL colours and fail badly as text (1.6–2.0 on cream), so each has an "-ink" step below at the same hue, darkened until it passes AA. Use the raw hue for fills, the -ink step for anything read. */ --gl-grey: #454545; /* logo wordmark 8.71 on cream */ --gl-gold: #dfbf63; /* fill only 1.62 — never text */ --gl-red: #cf2f2e; /* passes as text 4.65 */ --gl-blue: #7fb3d8; /* fill only 2.04 — never text */ --gl-rose: #d94d52; /* large text / UI only 3.71 */ --gl-green: #6bbea2; /* fill only 2.00 — never text */ /* Readable steps, same hue, darkened to clear AA with headroom */ --gl-blue-ink: #2770a3; /* 4.85 on cream · 5.34 under white */ --gl-green-ink: #2d775e; /* 4.87 on cream · 5.37 under white */ --gl-gold-ink: #896b13; /* 4.57 on cream */ /* Soft washes for pills, hovers and focus rings (82% toward white) */ --gl-blue-soft: #e8f1f8; --gl-green-soft: #e4f3ee; --gl-gold-soft: #f9f3e3; --gl-red-soft: #f6dad9; /* Neutral ramp, warmed slightly to sit on the cream ground */ --gl-grey-900: #2b2b2b; /* headings 12.86 */ --gl-grey-600: #6f6f6f; /* muted body 4.56 */ --gl-grey-400: #9a9a9a; /* decorative only 2.56 — never text */ /* ── 2. Semantic tokens ─────────────────────────────────────────────── */ --color-bg: #F5F4EF; --color-surface: #FFFFFF; --color-surface-2: #EFEEE8; --color-ink: var(--gl-grey-900); --color-ink-body: var(--gl-grey); --color-ink-muted: var(--gl-grey-600); --color-ink-subtle: var(--gl-grey-400); --color-line: #E3E1DA; --color-line-strong: #C8C7C2; --color-accent: var(--gl-blue-ink); /* links, focus, interactive */ --color-accent-soft: var(--gl-blue-soft); --color-accent-fill: var(--gl-blue); /* solid areas, not text */ --color-positive: var(--gl-green-ink); --color-negative: var(--gl-red); --color-highlight: var(--gl-gold); --color-focus: var(--gl-blue-ink); --color-focus-ring: var(--gl-blue-soft); /* GOV.UK focus yellow. Not a brand colour: it is the high-visibility focus indicator the devolution explorer inherits along with that palette. */ --color-focus-govuk: #ffdd00; /* Per-tool accents used on the landing page cards and page chrome. Three brand hues, all AA, all clearly distinct from one another. */ --accent-devolution: var(--gl-blue-ink); --accent-dashboard: var(--gl-green-ink); --accent-clusters: var(--gl-red); /* ── 3. Data-encoding colours ─────────────────────────────────────────── NOT brand colours, on purpose. These carry meaning in a map or chart, so they are chosen for how far apart they are — including under colour vision deficiency — rather than for brand fit. The devolution tiers are the GOV.UK Analysis Function categorical set. Measured against a brand-only alternative of grey/blue/gold/green: GOV.UK set worst adjacent pair ΔE 14.0 (CVD) · 23.8 (normal vision) brand-only worst adjacent pair ΔE 9.6 (CVD) · 15.4 (normal vision) 15 is the hard floor for normal vision, so the brand version sits right on it, and three of its four fills fall below 3:1 against the map. The GOV.UK set stays. Brand alignment stops at the chrome. */ --tier-established: #12436d; --tier-mayoral: #28a197; --tier-foundation: #f46a25; --tier-proposed: #a285d1; --tier-none: #8a9196; /* Clustering categories. Six hues — more than the brand can separate. */ --data-cat-1: #2a78d6; --data-cat-2: #1baf7a; --data-cat-3: #eda100; --data-cat-4: #008300; --data-cat-5: #4a3aa7; --data-cat-6: #e34948; /* ── 4. Type ────────────────────────────────────────────────────────── */ --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; /* The devolution explorer and the clustering page use the system stack on purpose: one follows GOV.UK/ONS conventions, the other is a dense report. Kept here so it is a managed choice rather than a hardcoded one. Switching either to --font-sans is a one-line change plus the Google Fonts link. */ --font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* ── 5. Logo sizing ───────────────────────────────────────────────────── Full Growth Lab logo height on the landing page and the data explorer's entry screen (assets/lse-growth-lab.svg, the trimmed copy). LSE Cities is set at 0.87x this. Tool headers use only the hexagon mark. */ --logo-h-feature: 44px; }