Foundations / Tokens

Token foundation

Three tiers (primitive ramps → semantic roles → component tokens) across five dimensions. Colour comes from the live OKLCH engine; the dimensions below are brand-independent and equally live. Flip density — every control retunes from one multiplier.

Density → control sizing (Tier-3 tokens)

Pill chip

Elevation → shadow-xs … shadow-xl

shadow-xs
shadow-sm
shadow-md
shadow-lg
shadow-xl

Type scale

--text-2xs … --text-display
Display 28Title 24Large 18Body 14Small 13XS 12

This looks better
on desktop

View our design system on a bigger screen.

Refract Design System