Foundation
Typography
Text styles from Figma and the tokens that define them.
Heading
| Style | Properties | Token | Preview |
|---|---|---|---|
H1 Inter | 72px · SemiBold Line height 120% | — | The quick brown fox |
H2 Inter | 48px · SemiBold Line height 120% | — | The quick brown fox |
H3 Inter | 32px · SemiBold Line height 120% | — | The quick brown fox |
H4 Inter | 24px · SemiBold Line height 120% | — | The quick brown fox |
H5 Inter | 20px · SemiBold Line height 120% | — | The quick brown fox |
H6 Inter | 16px · SemiBold Line height 120% | — | The quick brown fox |
Label
| Style | Properties | Token | Preview |
|---|---|---|---|
Large Space Mono | 18px · Regular Line height 150% | — | The quick brown fox |
Medium Space Mono | 16px · Regular Line height 150% | — | The quick brown fox |
Small Space Mono | 14px · Regular Line height 150% | — | The quick brown fox |
Tiny Space Mono | 12px · Regular Line height 150% | — | The quick brown fox |
Text
| Style | Properties | Token | Preview |
|---|---|---|---|
Extra large Inter | 24px · Regular Line height 150% | — | The quick brown fox |
Large Inter | 18px · Regular Line height 150% | — | The quick brown fox |
Regular Inter | 16px · Regular Line height 150% | — | The quick brown fox |
Small Inter | 14px · Regular Line height 150% | — | The quick brown fox |
Tiny Inter | 12px · Regular Line height 150% | — | The quick brown fox |