Phase 0 · token verification
Design system
Rendered from the CSS custom properties in globals.css. If a value here disagrees with the design document, the token is wrong.
Primary
Coral Pink
#F59996
Taupe
#917670
Neutrals
Blush
#FEF4F4
Light Blush
#FFF0F0
Warm Gray
#F2F2F2
Gray
#E5E5E5
White
#FFFFFF
Semantic
Success
#8FBC9A
Warning
#FAC77A
Info
#8DB4E2
Destructive
#AE3232
The design document lists Error as #F59996, identical to the coral primary — destructive actions would be indistinguishable from primary ones. The existing kit’s #secondary_red_color is used instead.
Typography
H1 · 40 / 600 / 120%
Your destination. Your celebration.
H2 · 28 / 600 / 130%
Your destination. Your celebration.
H3 · 22 / 600 / 140%
Your destination. Your celebration.
H4 · 18 / 600 / 140%
Your destination. Your celebration.
Body Large · 16 / 400 / 160%
Your destination. Your celebration.
Body · 14 / 400 / 160%
Your destination. Your celebration.
Small · 12 / 400 / 150%
Your destination. Your celebration.
Buttons
Every shape the interface is allowed to use. Sixty-six were written by hand before this section existed, and they had drifted — four horizontal paddings, two hover strengths, three different reds.
44px is the baseline, not 32px: these are forms filled in on a phone. Focus is ring-2 ring-ring to match the focus-ring utility — and that ring measures 2.13:1 on white, under the 3:1 WCAG asks of a focus indicator. Fixing it means changing --ring.
Form controls
44px tall, label always visible.
E-mail is not a valid email address.
You need to agree before continuing.
The checkbox is coloured with accent-primary, not text-primary. A native checkbox draws its own tick and ignores color, so the hand-written copies that set text-primary all rendered the browser’s default blue.