Swatches · 10 roles
Primary
--primary · #14233F
PRIMARY · Midnight navy. Primary buttons on light grounds, headings' accent, the info bar, booking band and footer. White on it 15.7:1.
Secondary
--secondary · #EFEBE4
SECONDARY · Warm stone. Alternate section grounds (problem, doctor, FAQ). Ink 13.9:1, slate 5.9:1.
Accent
--accent · #7E5E2B
ACCENT · Brass. Small-caps kickers, thin rules, step numerals. As text 5:1+ on white and stone. Used sparingly.
Background
--background · #FFFFFF
BACKGROUND · White.
Surface (cards)
--surface · #FFFFFF
SURFACE · Cards: steps, FAQ rows, locations, fields, the appointment card.
Text Primary
--text-primary · #1A1F29
TEXT PRIMARY · Ink. 13.9:1+ on white and stone.
Text Secondary
--text-secondary · #525A66
TEXT SECONDARY · Slate. 5.9:1+ on white and stone.
Border
--border · #E2DDD5
BORDER · Hairlines (decorative).
Success
--success · #2F6B4A
SUCCESS · With a check icon and words. 5.3:1+.
Error
--error · #A63A2C
ERROR · With an alert icon and a sentence. 5.4:1+.
Contrast · which text passes on which ground (WCAG AA 4.5:1)
| White | Stone | Light stone | Navy | Hero scrim | |
|---|---|---|---|---|---|
| Text Primary | Aa 16.5AA | Aa 13.9AA | Aa 14.9AA | — | — |
| Text Secondary | Aa 7.0AA | Aa 5.9AA | Aa 6.3AA | — | — |
| Navy (as text) | Aa 15.6AA | Aa 13.2AA | Aa 14.1AA | — | — |
| Brass (as text) | Aa 6.0AA | Aa 5.0AA | Aa 5.4AA | — | — |
| Success | Aa 6.3AA | Aa 5.3AA | Aa 5.7AA | — | — |
| Error | Aa 6.4AA | Aa 5.4AA | Aa 5.8AA | — | — |
| White (on navy) | — | — | — | Aa 15.6AA | Aa 14.4AA |
| Pale brass (on navy) | — | — | — | Aa 8.3AA | Aa 7.7AA |
Light grounds take ink, slate, navy, brass, success and error (4.9:1+). Dark grounds (navy, the hero scrim) take white (14:1+) and pale brass (7.7:1+) only. Control edges use border-strong (3.1:1+). Focus ring = primary navy on light, pale brass on dark.