Typography
Font families, sizes, and weights used in the design system.
Font families
The design system uses two font families:
| Font | Class | Usage |
|---|---|---|
| Geist | font-sans | All UI text — labels, buttons, body copy |
| Atkinson Hyperlegible Mono | font-mono | Code blocks, technical values, badge counts |
Both are loaded from Google Fonts via the tokens.css file.
Geist — Sans Serif
The quick brown fox jumps over the lazy dog
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Atkinson Hyperlegible Mono — Monospace
const result = await fetchData()
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Weight scale
Normal 400Design systems bring consistency
Medium 500Design systems bring consistency
Semibold 600Design systems bring consistency
Bold 700Design systems bring consistency
Type scale
| Class | Size | Common usage |
|---|---|---|
text-xs | 12px | Badges, captions, helper text |
text-sm | 14px | Buttons, form labels, table cells |
text-base | 16px | Body text, descriptions |
text-lg | 18px | Section headings, card titles |
text-xl | 20px | Page section headings |
text-2xl | 24px | Page titles |
Font weights
| Class | Weight | Usage |
|---|---|---|
font-normal | 400 | Body text, descriptions |
font-medium | 500 | Buttons, labels, nav items |
font-semibold | 600 | Headings, card titles |
font-bold | 700 | Page titles, emphasis |