Swatches · 10 roles
Primary
--primary · #0E4A56
PRIMARY · Deep teal. The calm color: headings' accent, icons, links, secondary button outline, the booking band and footer. White on it 9.8:1; as text 8.4:1+ on white, alt and tint.
Secondary
--secondary · #E3EFF0
SECONDARY · Teal tint. The trust strip, step icon discs, hover washes. A ground only.
Accent
--accent · #F4B183
ACCENT · Soft apricot. The primary (booking) button fill only; label text-primary 8.6:1.
Background
--background · #FFFFFF
BACKGROUND · White. Lots of it.
Surface (cards)
--surface · #FFFFFF
SURFACE · Cards on white, set apart by shadow-sm and a hairline.
Text Primary
--text-primary · #13262B
TEXT PRIMARY. Headlines and body on white, alt, tint and apricot (8.6:1+).
Text Secondary
--text-secondary · #4A5C61
TEXT SECONDARY. Captions, labels, hours on white, alt and tint (6:1+). Not on apricot.
Border
--border · #DCE4E5
BORDER · Hairlines (decorative).
Success
--success · #1F6B50
SUCCESS · With a check icon and words. 5.4:1+ on white, alt, tint.
Error
--error · #B3372B
ERROR · With an alert icon and a sentence. 5.1:1+ on white, alt, tint.
Contrast · which text passes on which ground (WCAG AA 4.5:1)
| White | Alt surface | Teal tint | Apricot | Deep teal | |
|---|---|---|---|---|---|
| Text Primary | Aa 15.7AA | Aa 14.7AA | Aa 13.3AA | Aa 8.6AA | — |
| Text Secondary | Aa 7.0AA | Aa 6.6AA | Aa 6.0AA | Aa 3.8AA large text only | — |
| Deep teal (as text) | Aa 9.8AA | Aa 9.2AA | Aa 8.4AA | Aa 5.4AA | — |
| Success | Aa 6.4AA | Aa 6.0AA | Aa 5.5AA | Aa 3.5AA large text only | — |
| Error | Aa 6.0AA | Aa 5.6AA | Aa 5.1AA | Aa 3.3AA large text only | — |
| White (on teal) | — | — | — | — | Aa 9.8AA |
Apricot is a button fill: its label is text-primary (8.6:1). text-secondary, success and error do not go on apricot. White and the teal tint read on deep teal (9.8:1 / 8.4:1). Control edges use border-strong (3:1+). Focus ring = primary teal, 9.8:1.