Verified against Brand Book §10.7. Click any swatch to copy its hex. Toggle the theme to confirm every role flips by meaning, not by duplicated CSS.
The six frozen brand colors. The ratio they hold — roughly 60 / 30 / 8 / 2 — is what makes the brand recognisable before the logo.
Each brand color extends into a small working ramp for states and surfaces — derived, never invented at use time. Poppy 500 is frozen; the rest are state shades.
Components consume these, never raw hex. Toggle the theme above: the swatch column re-renders live because every role is theme-aware.
| Token | Live | Light | Dark | Use |
|---|---|---|---|---|
| --surface-page | #F7F1E4 | #1A140E | Page canvas | |
| --surface-raised | #FFFFFF | #221C15 | Cards, fields | |
| --text-primary | #1A140E | #F7F1E4 | Body & headings | |
| --text-muted | #8A8273 | cream 50% | Captions | |
| --accent | #FF4A1C | #FF4A1C | The scalpel | |
| --text-accent | #B23A1A | #FF7A52 | Poppy text (passes contrast) | |
| --border-default | #C7BFAC | cream 20% | Card / input borders | |
| --focus-ring | #FF4A1C | #FF4A1C | 3px focus halo |
Status communicates with its own colors and always pairs an icon/dot with text — never color alone.
Assign series in order. One poppy win, then context. More than four colors means it's two charts.
Poppy is a scalpel — one focal use per view, never a surface fill, never body text. And raw poppy fails contrast for small text on cream, so poppy text uses --text-accent.
| Use | Allowed? | Rule / contrast |
|---|---|---|
| Primary CTA background | ✓ yes | One primary action per view |
| Body text in raw poppy | ✕ no | #FF4A1C on cream ≈ 2.9:1 — fails. Use --text-accent (#B23A1A → 4.8:1) |
| Links | limited | Poppy underline, not poppy fill |
| One data series | ✓ yes | Labeled, not color-only |
| Status color | ✕ no | Status uses its own ramp |
| Full-surface background | ✕ no | Poppy never fills a surface (≤ ~8% of a view) |
| Focus ring | ✓ yes | 3px halo — the signature focus cue |