Swatches · 10 roles
Primary
--primary · #1D6A48
PRIMARY · Grid green. Primary button fill, links, step numerals. White on it 6.6:1. As text: on background, paper, wash (5.9:1+). Not on accent.
Secondary
--secondary · #C2272D
SECONDARY · Red pen. Check marks, the current-language underline, tag stickers, the first-visit numerals. As text 5.5:1+ on white and paper — short labels only. White on it 5.8:1.
Accent
--accent · #F7CB46
ACCENT · Pencil yellow. Round stickers, the highlighted line of the hero headline boxes. Only text-primary (10.4:1) and text-secondary (4.7:1) on it.
Background
--background · #FFFFFF
BACKGROUND · White exercise-book paper. Most of the page stays plain white so it reads trustworthy.
Surface (cards)
--surface · #FFFFFF
SURFACE · Cards. White cards with a border edge; body copy always sits on these, never on the grid.
Text Primary
--text-primary · #18241E
TEXT PRIMARY · Pencil-lead ink. Headlines and body on every ground (13:1+).
Text Secondary
--text-secondary · #4B5A52
TEXT SECONDARY. Captions, hours, hints, footer on white/paper/wash (5.9:1+).
Border
--border · #D3DDD6
BORDER · Card edges and dividers (decorative).
Success
--success · #1D6A48
SUCCESS · Same grid green, always with a check icon and words.
Error
--error · #A3171C
ERROR · Darker than red pen (7.8:1 on white) and always with an alert icon and a sentence.
Contrast · which text passes on which ground (WCAG AA 4.5:1)
| Background | Grid paper | Pencil yellow | Wash | Primary fill | Red-pen fill | |
|---|---|---|---|---|---|---|
| Text Primary | Aa 16.0AA | Aa 15.2AA | Aa 10.4AA | Aa 14.5AA | — | — |
| Text Secondary | Aa 7.3AA | Aa 6.9AA | Aa 4.7AA | Aa 6.6AA | — | — |
| Primary (as text) | Aa 6.5AA | Aa 6.2AA | Aa 4.2AA large text only | Aa 5.9AA | — | — |
| Red pen (as text) | Aa 5.8AA | Aa 5.5AA | Aa 3.8AA large text only | Aa 5.2AA | — | — |
| Success | Aa 6.5AA | Aa 6.2AA | Aa 4.2AA large text only | Aa 5.9AA | — | — |
| Error | Aa 7.8AA | Aa 7.4AA | Aa 5.0AA | Aa 7.0AA | — | — |
| On-primary (white) | — | — | — | — | Aa 6.5AA | Aa 5.8AA |
Pencil yellow is a sticker and highlight color only: ink and text-secondary pass on it; green and red text don't. Grid lines are decorative (no contrast requirement) and never sit under body text. Control edges use border-strong (3.4:1+). Focus ring = text-primary, 16:1.