Styleguide
Tokens live in src/styles/global.css. Components live in src/components/ui/. This page renders them so you can check a change by eye.
Colours
canvas
ink
ink-soft
ink-muted
brand
brand-hover
accent
accent-soft
accent-tint
accent-glow
navy
navy-deep
line
line-soft
line-strong
lavender
mist
Type scale
Display XL · 70/77 · 800 · -0.03em · text-display-xl
Translate every market. Keep your voice.
Display · 52/61 · 800 · -0.03em · text-display
Translate every market. Keep your voice.
Title · 30/38 · text-title font-extrabold
Translate every market. Keep your voice.
Heading · 22/28 · 700 · -0.02em · text-heading
Translate every market. Keep your voice.
Lead · 18/29 · text-lead
Translate every market. Keep your voice.
Body · 16/25 · text-body
Translate every market. Keep your voice.
Small · 14 · text-small
Translate every market. Keep your voice.
Caption · 12/19 · text-caption
Translate every market. Keep your voice.
Eyebrow · 13 · 800 · +0.03em · text-eyebrow uppercase
Translate every market. Keep your voice.
Space Grotesk · diagram labels
Content → translation → Publication
Buttons
Cards & chips
Light card
With icon chip, hover lift and the standard shadow.
Dark card
For the navy panel.
Brand card
Blue with the swirl texture.