Typography
The type system is built on a two-track scale — a display scale for large headings and marketing copy, and a text scale for body copy and UI labels. Both are defined in tokens.ts and map directly to Tailwind utilities.
Font families
Font families are set per design theme via --font-heading and --font-body CSS custom properties. The active theme determines which typefaces are used for headings and body text.
sans
Inter
Aa Bb Cc 0123456789
mono
ui-monospace
Aa Bb Cc 0123456789
Font weights
Four weights are available across the system.
regular
400
The quick brown fox jumps over the lazy dog
medium
500
The quick brown fox jumps over the lazy dog
semibold
600
The quick brown fox jumps over the lazy dog
bold
700
The quick brown fox jumps over the lazy dog
Display scale
Used for hero headings, section titles, and large marketing copy. Negative letter-spacing tightens large text for a polished feel.
| Name | Size | Line height | Letter spacing | Preview |
|---|---|---|---|---|
| Display 2xl | 72px / 4.5rem | 90px / 5.625rem | -0.02em | The quick brown fox |
| Display xl | 60px / 3.75rem | 72px / 4.5rem | -0.02em | The quick brown fox |
| Display lg | 48px / 3rem | 60px / 3.75rem | -0.02em | The quick brown fox |
| Display md | 36px / 2.25rem | 44px / 2.75rem | -0.02em | The quick brown fox |
| Display sm | 30px / 1.875rem | 38px / 2.375rem | — | The quick brown fox |
| Display xs | 24px / 1.5rem | 32px / 2rem | — | The quick brown fox |
Text scale
Used for body copy, labels, captions, and all general UI text.
| Name | Size | Line height | Letter spacing | Preview |
|---|---|---|---|---|
| Text xl | 20px / 1.25rem | 30px / 1.875rem | — | The quick brown fox |
| Text lg | 18px / 1.125rem | 28px / 1.75rem | — | The quick brown fox |
| Text md | 16px / 1rem | 24px / 1.5rem | — | The quick brown fox |
| Text sm | 14px / 0.875rem | 20px / 1.25rem | — | The quick brown fox |
| Text xs | 12px / 0.75rem | 18px / 1.125rem | — | The quick brown fox |
Type specimen
A full specimen showing display and text sizes together at their intended weights.
Display 2xl — Bold
Display xl — Semibold
Display lg — Semibold
Display md — Medium
Display sm — Medium
Display xs — Medium
Text xl — The quick brown fox jumps over the lazy dog
Text lg — The quick brown fox jumps over the lazy dog
Text md — The quick brown fox jumps over the lazy dog
Text sm — The quick brown fox jumps over the lazy dog
Text xs — The quick brown fox jumps over the lazy dog