Tokens

UI scale and palette

Single source of class names for typography, spacing, and neutral colours.

Typography scale

Use these semantic roles across pages for consistent hierarchy.

Eyebrow / Meta

Body — 16px / 1.6. Use for primary copy blocks.

Small — 14px / 1.5. Use for supporting detail or meta.

Usage: import `ui` tokens or reuse PageHeader/Section components.

Base spacing in px; multiply as needed for padding and gaps.

4px

8px

12px

16px

24px

32px

Usage: prefer ui.grid/stack helpers for layout; reserve custom spacing for special cases.

Default slate palette for surfaces, borders, and text.

Slate 50

#f8fafc

Slate 100

#f1f5f9

Slate 200

#e2e8f0

Slate 400

#94a3b8

Slate 600

#475569

Slate 900

#0f172a

Usage: white/slate-50 for surfaces, slate-200 for borders, slate-900/600/500 for text.