Typography
A serif sets headings, a sans sets everything read at length, and a mono names tokens and code.
Families
System fonts keep the starter fast, portable, and free of licensing assumptions.
| Token | Custom property | Value | Use |
|---|---|---|---|
font.sans | --font-sans | ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif | Body and interface text. |
font.serif | --font-serif | Georgia, "Times New Roman", serif | Display headings. |
font.mono | --font-mono | "SFMono-Regular", Consolas, "Liberation Mono", monospace | Token names and code. |
Clear thinking, clearly expressed.
Use hierarchy, rhythm, and plain language to make the next step easy to understand.
color: var(--color-ink);
Scale
Six sizes, each with one job. Pick the role; never resize a role to make copy fit.
| Token | Custom property | Value | Use |
|---|---|---|---|
type.display | --type-display | clamp(2.25rem, 4.5vw, 3.5rem) | Page titles. |
type.title | --type-title | clamp(1.5rem, 2.6vw, 2.125rem) | Section headings. |
type.lead | --type-lead | 1.125rem | Introductory paragraphs. |
type.body | --type-body | 1rem | Reading text. |
type.small | --type-small | 0.875rem | Help text, captions, and table cells. |
type.label | --type-label | 0.75rem | Eyebrows, table headers, and tags. |