Foundation
Typography
Text styles from Figma and the tokens that define them.
Heading
| Style | Properties | Token | Preview |
|---|---|---|---|
Hero Title Poppins | 72px · SemiBold Line height 110% | eu-font-size-12 | The quick brown fox |
H1 Poppins | 48px · SemiBold Line height 120% | eu-font-size-11 | The quick brown fox |
H2 Poppins | 36px · SemiBold Line height 120% | eu-font-size-9 | The quick brown fox |
H3 Poppins | 32px · SemiBold Line height 120% | eu-font-size-8 | The quick brown fox |
H4 Poppins | 24px · SemiBold Line height 120% | eu-font-size-6 | The quick brown fox |
H5 Poppins | 20px · SemiBold Line height 150% | eu-font-size-5 | The quick brown fox |
H6 Poppins | 16px · SemiBold Line height 150% | eu-font-size-3 | The quick brown fox |
Label
| Style | Properties | Token | Preview |
|---|---|---|---|
Active/Regular Poppins | 16px · SemiBold Line height 110% | eu-font-size-3 | The quick brown fox |
Default/Regular Poppins | 16px · Regular Line height 110% | eu-font-size-3 | The quick brown fox |
Active/Small Poppins | 14px · SemiBold Line height 110% | eu-font-size-2 | The quick brown fox |
Default/Small Poppins | 14px · Regular Line height 110% | eu-font-size-2 | The quick brown fox |
Tag Poppins | 11px · SemiBold Line height 110% | eu-font-size-0 | The quick brown fox |
Text
| Style | Properties | Token | Preview |
|---|---|---|---|
2XLarge Poppins | 24px · Regular Line height 160% | eu-font-size-6 | The quick brown fox |
XLarge Poppins | 20px · Regular Line height 160% | eu-font-size-5 | The quick brown fox |
Large Poppins | 18px · Regular Line height 150% | eu-font-size-4 | The quick brown fox |
Link/Large Poppins | 18px · SemiBold Line height 150% | eu-font-size-4 | The quick brown fox |
Link/Regular Poppins | 16px · SemiBold Line height 150% | eu-font-size-3 | The quick brown fox |
Regular Poppins | 16px · Regular Line height 150% | eu-font-size-3 | The quick brown fox |
Regular Bold Poppins | 16px · SemiBold Line height 150% | eu-font-size-3 | The quick brown fox |
Link/Small Poppins | 14px · SemiBold Line height 150% | eu-font-size-2 | The quick brown fox |
Small Poppins | 14px · Regular Line height 150% | eu-font-size-2 | The quick brown fox |
Small Bold Poppins | 14px · SemiBold Line height 150% | eu-font-size-2 | The quick brown fox |
Link/Tiny Poppins | 12px · SemiBold Line height 150% | eu-font-size-1 | The quick brown fox |
Tiny Poppins | 12px · Regular Line height 150% | eu-font-size-1 | The quick brown fox |
Tiny Bold Poppins | 12px · SemiBold Line height 150% | eu-font-size-1 | The quick brown fox |