Foundations · Rendered from the design system

Tokens, live

Two layers, per the system: a primitive brand palette, and semantic roles that give each colour a job. Build with the roles; reach for primitives only in colourway sections.

Brand palette — primitives

Aperol

--aperol · #FF5E29

Sandy Nude

--sandy-nude · #FFF1DB

Golden Sun

--golden-sun · #FFC476

Deep Walnut

--deep-walnut · #4E2E18

Stormy Teal

--stormy-teal · #125C5A

Seafoam Green

--seafoam-green · #A9DBC6

Semantic roles

--surface-page

--surface-raised

--surface-inverse

--surface-accent

--text-display

--text-heading

--text-body

--text-muted

--accent

--accent-hover

--accent-soft

--highlight

--positive

--positive-soft

--border-strong

--border-soft

--focus-ring

--link

--link-hover

Type scale

Every brand has a thread --text-4xl · 64px

Every brand has a thread --text-3xl · 44px

Every brand has a thread --text-2xl · 32px

Every brand has a thread --text-xl · 24px

Every brand has a thread --text-lg · 19px

Every brand has a thread --text-base · 16px

Every brand has a thread --text-sm · 14px

Every brand has a thread --text-xs · 12px

Display: Yeseva One (Belvare substitute) · Body: Nunito Sans (Avenir substitute), weights 400 / 600 / 800.