Foundations
Typography
Three families with clear jobs, 28 text styles, and line heights that follow the role: 120–130% for headings, 160% for body, 140% for interface text.
Families
| Bricolage Grotesque | Headings |
|---|---|
| Manrope | Body, label, caption, overline and button |
| Geist Mono | Code |
Headings
H1 · 48pxThe quick brown foxBold · LH 120%
H2 · 36pxThe quick brown foxBold · LH 120%
H3 · 28pxThe quick brown foxSemiBold · LH 130%
H4 · 24pxThe quick brown foxSemiBold · LH 130%
H5 · 20pxThe quick brown foxMedium · LH 140%
H6 · 16pxThe quick brown foxMedium · LH 140%
Text styles
| Body | Large 18 · Default 16 · Small 14 · XSmall 12 — Manrope Regular, line height 160% |
|---|---|
| Label | Large 16 · Default 14 · Small 12 · XSmall 10 — Medium and SemiBold, line height 140% |
| Caption | Default 12 · Small 11 — Regular, line height 140% |
| Overline | Default 12 · Small 10 — Medium, line height 140% |
| Button | Large 18 · Default 16 · Small 14 · XSmall 12 — Medium, auto line height |
Rules
- Pair large headings with a fixed offset of 8px or 12px, so the rhythm stays even.
- On narrow screens headings scale down by about 20% to avoid awkward wraps.
- On dark canvases keep body text at #8C9199 or lighter to preserve AA legibility.