Typography
Type scale based on Inter font. Consistent sizing and weights for hierarchy.
Font Family
Inter is used as the primary typeface across all UI.
Primary
Inter
Fallback
system-ui
font-family: 'Inter', system-ui, sans-serif
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
Font Weights
Available weights for Inter in the system.
400 Regular The quick brown fox jumps over the lazy dog
500 Medium The quick brown fox jumps over the lazy dog
600 Semi The quick brown fox jumps over the lazy dog
700 Bold The quick brown fox jumps over the lazy dog
800 Extra The quick brown fox jumps over the lazy dog
900 Black The quick brown fox jumps over the lazy dog
Type Scale
Complete typographic scale from Display to Caption.
Design System
Design System
Design System
Design System
Design System
Design System
Design System
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
Form field label
Secondary text, timestamps, helper text
SECTION LABEL
Usage Example
How types work together in a card layout.
NEW FEATURE
Typography System
A consistent type scale built on Inter ensures visual hierarchy and readability across all screens.
Key features:
- 13 type styles from Display to Overline
- 6 font weights (400-900)
- Optimized line heights per size
Last updated 2 hours ago
Token Reference
All typography tokens with their values.
| Token | Size | Weight | Line Height | Tracking |
|---|---|---|---|---|
| display | 48px | 800 | 1.1 | -0.02em |
| h1 | 36px | 800 | 1.15 | -0.02em |
| h2 | 30px | 700 | 1.2 | -0.015em |
| h3 | 24px | 700 | 1.25 | -0.01em |
| h4 | 20px | 600 | 1.3 | -0.01em |
| h5 | 18px | 600 | 1.35 | 0 |
| h6 | 16px | 600 | 1.4 | 0 |
| body-lg | 18px | 400 | 1.6 | 0 |
| body | 16px | 400 | 1.6 | 0 |
| body-sm | 14px | 400 | 1.5 | 0 |
| label | 14px | 500 | 1.4 | 0 |
| caption | 12px | 400 | 1.4 | 0 |
| overline | 11px | 600 | 1.4 | 0.06em |