Typography
Typeface
The system uses Inter as the primary sans-serif family and a monospace stack for code and token values. Inter provides excellent readability at small sizes and clean geometric forms at display sizes.
| Property | Value |
|---|---|
| Sans-serif | Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif |
| Monospace | SF Mono, Cascadia Code, Fira Code, monospace |
Type Scale
Each step in the scale serves a specific role. Avoid using arbitrary font sizes outside of this set.
Display
36px / 700
The quick brown fox jumps
Heading 1
28px / 700
The quick brown fox jumps over the lazy dog
Heading 2
22px / 700
The quick brown fox jumps over the lazy dog
Heading 3
18px / 600
The quick brown fox jumps over the lazy dog
Body
15px / 400
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. How vexingly quick daft zebras jump.
Small
13px / 500
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
Caption
11px / 600 / uppercase
The quick brown fox jumps over the lazy dog
Weight System
| Weight | CSS Value | Usage |
|---|---|---|
| Regular | 400 |
Body text, descriptions |
| Medium | 500 |
Navigation items, labels |
| Semibold | 600 |
Subheadings, table headers |
| Bold | 700 |
Page titles, emphasis |
| Extra Bold | 800 |
Display text, hero elements |
Token Reference
| Token | Value | Role |
|---|---|---|
--font-sans |
Inter, system stack | Primary typeface |
--font-mono |
SF Mono, Cascadia Code | Code, token values |
--font-size-xs |
11px |
Captions, labels |
--font-size-sm |
13px |
Small text, metadata |
--font-size-base |
15px |
Body copy |
--font-size-lg |
18px |
Subheadings |
--font-size-xl |
22px |
Section headings |
--font-size-2xl |
28px |
Page titles |
--font-size-3xl |
36px |
Display text |