Typography
Two-font pairing is a design system decision: display font for personality, body font for readability at scale.
Display
Fraunces
Headlines, wordmarks, marketing hero lines
Body
DM Sans
UI copy, forms, tables, long paragraphs
| Token | Sample | Usage |
|---|---|---|
| Display XL | The quick brown fox | Hero headlines, marketing landings |
| Display LG | The quick brown fox | Page titles, empty states |
| Heading | The quick brown fox | Section headers, card titles |
| Body LG | The quick brown fox | Lead paragraphs, descriptions |
| Body | The quick brown fox | Default UI copy, form labels |
| Caption | The quick brown fox | Badges, metadata, helper text |
Live composition
This paragraph uses the body font at Body LG size. Headlines above use the display font. Without a type scale, engineers guess font sizes and every page drifts.