Design system

Foundations

The tokens everything else is built from. Colour, typography and spacing live in one variable collection with a Dark default and a Light mode. Components only ever reference these tokens.

ColourTypographySpacingThemes

01Colour

Nine semantic colours. These are the only colours components use. Each card shows the same token in both modes: the left half is the Dark default, the right half is inside a theme-light wrapper.

Dark
Light

Page Background

Black / White. Body and section backgrounds.

Dark
Light

Card Background

Off Black / Light Grey. Cards, panels, alternating sections.

Dark
Light

Border

Border Grey / Light Grey. Dividers and outlines.

Dark
Light

Text Primary

White / Off Black. Headings and body copy.

Dark
Light

Text Secondary

Text Primary at 75%. Supporting copy, captions, labels.

Dark
Light

Accent

Cherry in both modes. Highlights, links, accent text.

Dark
Light

Accent Hover

Cherry Light in both modes. Hover state of accent elements.

Dark
Light

Button Background

White / Black. Primary button fill.

Dark
Light

Button Text

Black / White. Primary button label.

Primitives. The raw palette the semantic colours point at. Reference these from tokens only, never from an element.

Cherry

#F53971

Cherry Light

#FF5786

Black

#000000

Off Black

#1D1D1D

Border Grey

#292929

White

#FFFFFF

Light Grey

#E9F0F1

02Typography

Montserrat carries headings, Helvetica carries body copy. Every size is a token and every sample below is a live instance of a text element.

H1. Font/Heading 600. Size/Text H1 clamp 40 to 76px. Line Height Heading 1.05.

The quick brown fox

H2. Font/Heading 600. Size/Text H2 clamp 32 to 56px. Line height 1.

The quick brown fox

H3. Font/Body 500. Size/Text H3 clamp 24 to 32px. Line height 1.

The quick brown fox jumps over

H4. Font/Heading 600. Size/Text H4 20px. Line height 1.3.

The quick brown fox jumps over the lazy dog

Body. Font/Body 400. Size/Text Body 16px. Line Height Body 1.5.

The quick brown fox jumps over the lazy dog near the riverbank, then rests in the shade.

Small. Font/Body 400. Size/Text Small 14px. Line Height Body 1.5.

The quick brown fox jumps over the lazy dog near the riverbank.

Caption. Font/Body 400. Size/Text Caption 12px. Line Height Body 1.5.

The quick brown fox jumps over the lazy dog. Sept 10, 2025.

Eyebrow. Font/Body 400 uppercase. Size/Text Eyebrow 12px. Line height 1.7.

Eyebrow label

Stat. Font/Heading 600. Size/Text Stat 22px. Line height 1.1, tabular numerals.

200,000

03Spacing

Spacing scale (Size/Space 2XS to XXL)

4 / 8 / 16 / 32 / 56 / 80 / 120 px

04Themes

The same element instances in both variable modes. The left panel carries theme-dark, the right carries theme-light. Nothing else differs.

theme-dark (default mode)

Dark theme

Heading one

Heading two

Heading three

Heading four

Body text. The quick brown fox jumps over the lazy dog near the riverbank.

Muted body text for secondary copy.

Small text for captions and meta.

Accent eyebrow

PrimaryReverseAccentText link

theme-light (Light mode)

Light theme

Heading one

Heading two

Heading three

Heading four

Body text. The quick brown fox jumps over the lazy dog near the riverbank.

Muted body text for secondary copy.

Small text for captions and meta.

Accent eyebrow

PrimaryReverseAccentText link