Foundations · Typography
Typography
H0–H6, Body, and Description — each tied to a specific job, not a visual preference. Font family is a role token (--font-heading / --font-body / --font-mono); the workspace supplies the real family, this kit uses the system UI stack.
H0 · 52/64 bold
Page title, once per screen
H1 · 36/44 semibold
Page sections
H2 · 24/32 semibold
Modal titles, core actions
H3 · 18/26 semibold
Key data points, nav labels
H4 · 16/24 semibold
Highlighted inline text, button labels
H5 · 14/20 medium
Input labels, short descriptions
H6 · 12/16 medium
Fine print, metadata
Body · 16/24 normal
Long-form or input content reads at Body size.
Description · 14/20 normal
Toast, alert, dialog, and popover descriptions read one step down from Body.
Mobile overrides (≤640px)
H0 steps down to 40/56, H1 to 32/40. Resize this window below 640px to see the live change — everything else in the scale is fixed across breakpoints.