/* StatsCentral Apps Next — design tokens. Source: the "StatsCentral, GOV.UK-style" proof-of-concept canvas (claude.ai/artifact/JiAzh5RzTCoxdBiVVf3F7S), brand cardinal from CLAUDE.md, focus treatment from the GOV.UK Design System. Colours are space-separated RGB channels, as in design/apps and design/ucsa: rgb(var(--color-text) / .5). Components read the --color-* roles, never the primitives, so a role can be re-pointed without touching component CSS. tokens.json is generated from this file by tools/tokens_json.py. */ :root { /* ── Primitives: grey ── Neutral for text, borders and surfaces. */ --grey-0: 255 255 255; /* #FFFFFF */ --grey-50: 244 246 249; /* #F4F6F9 */ --grey-100: 233 236 240; /* #E9ECF0 */ --grey-200: 213 217 224; /* #D5D9E0 */ --grey-300: 177 184 195; /* #B1B8C3 */ --grey-500: 107 116 130; /* #6B7482 */ --grey-600: 79 88 103; /* #4F5867 */ --grey-700: 51 58 69; /* #333A45 */ --grey-900: 26 31 43; /* #1A1F2B */ /* ── Primitives: navy ── The header. */ --navy-200: 201 209 224; /* #C9D1E0 */ --navy-700: 74 88 120; /* #4A5878 */ --navy-900: 20 33 61; /* #14213D */ /* ── Primitives: blue ── Links and information. */ --blue-50: 234 242 251; /* #EAF2FB */ --blue-100: 221 233 248; /* #DDE9F8 */ --blue-200: 183 207 238; /* #B7CFEE */ --blue-600: 31 95 168; /* #1F5FA8 */ --blue-800: 20 63 112; /* #143F70 */ --blue-900: 18 58 107; /* #123A6B */ /* ── Primitives: cardinal ── Brand. Primary actions and the header rule. */ --cardinal-50: 251 233 236; /* #FBE9EC */ --cardinal-600: 196 30 58; /* #C41E3A */ --cardinal-700: 163 24 48; /* #A31830 */ --cardinal-800: 133 19 42; /* #85132A */ /* ── Primitives: red ── Errors and destructive actions. Distinct from cardinal so an error never reads as brand. */ --red-50: 251 227 224; /* #FBE3E0 */ --red-600: 180 35 24; /* #B42318 */ --red-800: 138 28 19; /* #8A1C13 */ /* ── Primitives: green ── Success. */ --green-50: 220 241 228; /* #DCF1E4 */ --green-600: 29 122 70; /* #1D7A46 */ --green-800: 19 83 47; /* #13532F */ /* ── Primitives: yellow ── Pending tags, and the focus fill. */ --yellow-50: 253 240 201; /* #FDF0C9 */ --yellow-400: 255 221 0; /* #FFDD00 */ --yellow-800: 92 67 0; /* #5C4300 */ /* ── Primitives: orange ── Stat card bars only. */ --orange-600: 217 115 13; /* #D9730D */ /* ── Primitives: purple ── Visited links and the purple tag. */ --purple-50: 237 231 248; /* #EDE7F8 */ --purple-700: 90 58 153; /* #5A3A99 */ --purple-800: 68 42 120; /* #442A78 */ /* ── Primitives: focus ink ── Text on the yellow focus fill (GOV.UK #0B0C0C). */ --focus-ink: 11 12 12; /* #0B0C0C */ /* ── App identity ── The square beside an app's name in the header, switcher and launcher. Never an action colour. Each clears 3:1 on white. */ --app-league-os: 196 30 58; /* #C41E3A */ --app-club-os: 37 99 235; /* #2563EB */ --app-team-os: 109 93 211; /* #6D5DD3 */ --app-player-portal: 144 101 176; /* #9065B0 */ --app-member-portal: 29 78 216; /* #1D4ED8 */ --app-corporate-games: 124 58 237; /* #7C3AED */ --app-youth-games: 194 65 12; /* #C2410C */ --app-tickets-central: 4 120 87; /* #047857 */ --app-overlay-os: 15 118 110; /* #0F766E */ --app-venue-os: 180 83 9; /* #B45309 */ --app-sportscast: 51 65 85; /* #334155 */ --app-officials-portal: 14 116 144; /* #0E7490 */ /* ── Roles: text ── */ --color-text: var(--grey-900); --color-text-secondary: var(--grey-600); --color-text-inverse: var(--grey-0); --color-text-inverse-secondary: var(--navy-200); /* ── Roles: links ── */ --color-link: var(--blue-600); --color-link-hover: var(--blue-800); --color-link-visited: var(--purple-700); --color-link-inverse: var(--grey-0); /* ── Roles: surfaces ── */ --color-bg: var(--grey-0); --color-surface: var(--grey-50); --color-surface-strong: var(--grey-100); --color-header: var(--navy-900); /* ── Roles: borders ── */ --color-border: var(--grey-200); --color-border-subtle: var(--grey-100); --color-border-input: var(--grey-500); --color-border-strong: var(--grey-900); --color-header-divider: var(--navy-700); /* ── Roles: action ── */ --color-accent: var(--cardinal-600); --color-accent-hover: var(--cardinal-700); --color-accent-pressed: var(--cardinal-800); --color-accent-text: var(--grey-0); --color-secondary-hover: var(--grey-50); /* ── Roles: focus ── GOV.UK: yellow fill, black text, 4px black bar. */ --color-focus: var(--yellow-400); --color-focus-text: var(--focus-ink); /* ── Roles: feedback ── */ --color-error: var(--red-600); --color-error-hover: var(--red-800); --color-error-bg: var(--red-50); --color-success: var(--green-600); --color-success-text: var(--green-800); --color-success-bg: var(--green-50); --color-info: var(--blue-600); --color-info-bg: var(--blue-50); --color-info-border: var(--blue-200); /* ── Roles: tags ── {tone}-50 fill with {tone}-800 text. Every tag carries a word; the tone only reinforces it. */ --tag-grey-bg: var(--grey-100); --tag-grey-text: var(--grey-700); --tag-green-bg: var(--green-50); --tag-green-text: var(--green-800); --tag-yellow-bg: var(--yellow-50); --tag-yellow-text: var(--yellow-800); --tag-blue-bg: var(--blue-100); --tag-blue-text: var(--blue-900); --tag-red-bg: var(--red-50); --tag-red-text: var(--red-800); --tag-purple-bg: var(--purple-50); --tag-purple-text: var(--purple-800); /* ── Roles: stat card bars ── Decorative; the label carries the meaning. Each clears 3:1 on the card surface. */ --stat-grey: var(--grey-600); --stat-green: var(--green-600); --stat-red: var(--red-600); --stat-blue: var(--blue-600); --stat-orange: var(--orange-600); --stat-purple: var(--purple-700); /* ── Type ── Source Sans 3 is the stand-in for GOV.UK Transport, which is Crown-only. */ --font-sans: "Source Sans 3", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --weight-regular: 400; --weight-semibold: 600; --weight-bold: 700; --text-stat: 56px; --text-display: 44px; --text-xl: 32px; --text-l: 26px; --text-m: 24px; --text-s: 20px; --text-body: 18px; --text-body-s: 16px; --text-small: 15px; --text-xs: 14px; --leading-tight: 1.1; --leading-heading: 1.2; --leading-body: 1.45; --tracking-display: -0.01em; /* ── Space ── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px; /* ── Layout ── Breakpoints are 641px (tablet) and 769px (desktop); CSS cannot read custom properties in media queries, so they appear as literals. */ --page-width: 1200px; --gutter: 30px; --readable-width: 720px; --control-height: 44px; --dialog-width: 560px; --drawer-width: 420px; /* ── Shape ── Square corners and no shadows, by decision. */ --radius: 0; --border-width: 1px; --border-width-error: 4px; --border-width-rule: 4px; --border-width-bar: 8px; --focus-width: 3px; --focus-bar: 4px; /* ── Motion ── */ --duration-fast: 120ms; --duration-base: 200ms; } @media (max-width: 640px) { :root { --text-stat: 40px; --text-display: 32px; --text-xl: 27px; --text-l: 22px; --text-m: 21px; --text-s: 18px; --text-body: 16px; --text-body-s: 16px; --text-small: 14px; --gutter: 16px; } }