Swatches · 10 roles
Primary
--primary
Day #C23B1C · Night #FF8A66
The one warm accent. Fills the primary button and marks the current language. Text on it is on-primary (5.3:1 day, 7.9:1 night). As text it reads on background and surface only (4.9:1+) — never on accent.
Secondary
--secondary
Day #1E1A16 · Night #F3EDE4
Outline and label of the secondary button, the focus ring, the language underline on hover. Same value as text-primary: the notebook is ink + one accent.
Accent
--accent
Day #FFE1D2 · Night #4A2518
A highlighter stroke behind a few words (the hero's second line) and the selected-step tint. Only text-primary sits on it (14.0:1 / 11.5:1). Use at most once per screen.
Background
--background
Day #FAF6EF · Night #16130F
The page.
Surface (cards)
--surface
Day #FFFDF8 · Night #201C17
Note cards, FAQ, location cards, form fields, the mobile menu sheet.
Text Primary
--text-primary
Day #1E1A16 · Night #F3EDE4
Headlines and body on background, surface, surface-muted, accent and both washes — 11:1 or better in both themes.
Text Secondary
--text-secondary
Day #5A5249 · Night #BFB5A8
Captions, hours, placeholders, footer text, on background, surface, surface-muted and washes — 5.7:1 or better in both themes.
Border
--border
Day #E4DDD1 · Night #3A332B
1px dividers and card outlines. Decorative only — never the only edge of a control.
Success
--success
Day #2E6B45 · Night #86CFA0
"Sent" confirmations, always with ✅ and words. 5.9:1+ on background/surface in both themes.
Error
--error
Day #A8251A · Night #FF9285
ERROR · Red pen. Field errors, always with a ❗ and a sentence, never color alone. Darker than primary by day (6.6:1 vs 4.9:1) so the two don't read as the same red.
Contrast · which text passes on which ground
| Background | Surface | Accent | Wash | Primary fill |
|---|
| ☀️ Day |
|---|
| Text Primary | Aa 16.1
✅ AA | Aa 17.0
✅ AA | Aa 14.0
✅ AA | Aa 14.6
✅ AA | — |
| Text Secondary | Aa 7.1
✅ AA | Aa 7.5
✅ AA | Aa 6.2
✅ AA | Aa 6.5
✅ AA | — |
| Primary (as text) | Aa 5.0
✅ AA | Aa 5.2
✅ AA | Aa 4.3
❗ fail — don’t use | Aa 4.5
❗ fail — don’t use | — |
| Success | Aa 5.9
✅ AA | Aa 6.3
✅ AA | Aa 5.1
✅ AA | Aa 5.4
✅ AA | — |
| Error | Aa 6.6
✅ AA | Aa 7.0
✅ AA | Aa 5.8
✅ AA | Aa 6.0
✅ AA | — |
| On-primary | — | — | — | — | Aa 5.3
✅ AA |
| 🌙 Night |
|---|
| Text Primary | Aa 15.9
✅ AA | Aa 14.6
✅ AA | Aa 11.5
✅ AA | Aa 12.9
✅ AA | — |
| Text Secondary | Aa 9.2
✅ AA | Aa 8.4
✅ AA | Aa 6.6
✅ AA | Aa 7.4
✅ AA | — |
| Primary (as text) | Aa 8.0
✅ AA | Aa 7.3
✅ AA | Aa 5.8
✅ AA | Aa 6.5
✅ AA | — |
| Success | Aa 10.1
✅ AA | Aa 9.2
✅ AA | Aa 7.3
✅ AA | Aa 8.2
✅ AA | — |
| Error | Aa 8.6
✅ AA | Aa 7.8
✅ AA | Aa 6.2
✅ AA | Aa 6.9
✅ AA | — |
| On-primary | — | — | — | — | Aa 7.9
✅ AA |
Both themes are shown regardless of the page theme. Controls: border-strong is 3.6:1+ on every surface (3:1 needed). Focus ring = secondary, 11:1+.