Design system
The component kit.
Every token and shared component, rendered from the real files. Change src/styles/theme.css and this page updates.
Tokens
Color
Brand
- brand
- brand-strong
- brand-soft
- brand-tint
- brand-line
Accent
- accent
- accent-strong
- accent-soft
Accent 2
- accent-2
- accent-2-strong
- accent-2-light
- accent-2-muted
- accent-2-soft
Neutrals
- ink
- ink-2
- muted
- line-strong
- line
- surface-muted
- surface-subtle
- white
On dark
- night-panel
- night-raised
- on-dark
- on-dark-3
- brand-on-dark
- accent-on-dark
- accent-2-on-dark
Status
- warning
- warning-soft
- danger
- danger-soft
Tokens
Type
Eyebrow label
Gradient accent text.
CardGrid
Brand tone
Icon tile in the brand color.
Accent tone
Icon tile in the accent color.
Accent 2 tone
Icon tile in the second accent.
Outcome chip
CardGrid numbered
One
A short line of supporting text.
Two
A short line of supporting text.
Three
A short line of supporting text.
Four
A short line of supporting text.
ProofStats
- Label120+One line of context.
- Label96%One line of context.
- Label4.9One line of context.
- Label12One line of context.
FeatureSplit01
Feature split with media.
Copy beside media, with ticks and a link.
- First point.
- Second point.
At a glance
HighlightCard
- For heroes without a photo
- Sits on the mesh
- Tick list inside
Faq
An answer in plain text.
Another answer.
BlogGraphic (post variant; the card variant appears on blog cards)
Dark section
Same components, on dark.
Components inside a dark Section switch colors automatically.
Step 1: Step one
A short description.
Step 2: Step two
A short description.
Step 3: Step three
A short description.
Brand tone
Icon tile in the brand color.
Accent tone
Icon tile in the accent color.
Accent 2 tone
Icon tile in the second accent.
Outcome chip
LogoWall (wordmarks)
- Northwind
- Bluebird
- Summit
- Harbor
- Juniper
- Atlas