Foundation
Typography
Text styles from Figma and the tokens that define them.
Brand Fonts
Aa
Instrument Sans
Google Fonts
RegularMediumSemiBoldBold
Heading
| Style | Properties | Token | Preview |
|---|---|---|---|
Desktop/Hero Title Instrument Sans | 72px · Bold Line height 110% | wi-font-size-12 | The quick brown fox |
Desktop/H1 Instrument Sans | 48px · Bold Line height 120% | wi-font-size-11 | The quick brown fox |
Mobile/Hero Title Instrument Sans | 40px · Bold Line height 110% | wi-font-size-10 | The quick brown fox |
Desktop/H2 Instrument Sans | 40px · Bold Line height 120% | wi-font-size-10 | The quick brown fox |
Mobile/H1 Instrument Sans | 36px · Bold Line height 120% | wi-font-size-9 | The quick brown fox |
Mobile/H2 Instrument Sans | 32px · Bold Line height 120% | wi-font-size-8 | The quick brown fox |
Desktop/H3 Instrument Sans | 32px · Bold Line height 120% | wi-font-size-8 | The quick brown fox |
Mobile/H3 Instrument Sans | 28px · Bold Line height 120% | wi-font-size-7 | The quick brown fox |
Desktop/H4 Instrument Sans | 24px · Bold Line height 120% | wi-font-size-6 | The quick brown fox |
Mobile/H4 Instrument Sans | 24px · Bold Line height 120% | wi-font-size-6 | The quick brown fox |
Desktop/H5 Instrument Sans | 20px · Bold Line height 150% | wi-font-size-5 | The quick brown fox |
Mobile/H5 Instrument Sans | 20px · Bold Line height 150% | wi-font-size-5 | The quick brown fox |
Desktop/H6 Instrument Sans | 16px · Bold Line height 150% | wi-font-size-3 | The quick brown fox |
Mobile/H6 Instrument Sans | 16px · Bold Line height 150% | wi-font-size-3 | The quick brown fox |
Label
| Style | Properties | Token | Preview |
|---|---|---|---|
Active/Regular Instrument Sans | 16px · SemiBold Line height 110% | wi-font-size-3 | The quick brown fox |
Default/Regular Instrument Sans | 16px · Medium Line height 110% | wi-font-size-3 | The quick brown fox |
Active/Small Instrument Sans | 14px · SemiBold Line height 110% | wi-font-size-2 | The quick brown fox |
Default/Small Instrument Sans | 14px · Medium Line height 110% | wi-font-size-2 | The quick brown fox |
Active/Tiny Instrument Sans | 12px · Regular Line height 110% | wi-font-size-1 | The quick brown fox |
Default/Tiny Instrument Sans | 12px · Medium Line height 110% | wi-font-size-1 | The quick brown fox |
Tag Instrument Sans | 11px · SemiBold Line height 110% | wi-font-size-0 | The quick brown fox |
Text
| Style | Properties | Token | Preview |
|---|---|---|---|
Large Instrument Sans | 18px · Regular Line height 150% | wi-font-size-4 | The quick brown fox |
Link/Large Instrument Sans | 18px · SemiBold Line height 150% | wi-font-size-4 | The quick brown fox |
Link/Regular Instrument Sans | 16px · SemiBold Line height 150% | wi-font-size-3 | The quick brown fox |
Regular Instrument Sans | 16px · Regular Line height 150% | wi-font-size-3 | The quick brown fox |
Link/Small Instrument Sans | 14px · SemiBold Line height 150% | wi-font-size-2 | The quick brown fox |
Small Instrument Sans | 14px · Regular Line height 150% | wi-font-size-2 | The quick brown fox |
Link/Tiny Instrument Sans | 12px · SemiBold Line height 150% | wi-font-size-1 | The quick brown fox |
Tiny Instrument Sans | 12px · Regular Line height 150% | wi-font-size-1 | The quick brown fox |