Foundation
Typography
Text styles from Figma and the tokens that define them.
Brand Fonts
Aa
Zilla Slab
Google Fonts
Bold
Aa
Open Sans
Google Fonts
RegularMediumSemiBoldBold
Heading
| Style | Properties | Token | Preview |
|---|---|---|---|
Hero Title Zilla Slab | 72px · Bold Line height 110% | sg-font-size-12 | The quick brown fox |
H1 Zilla Slab | 48px · Bold Line height 120% | sg-font-size-11 | The quick brown fox |
H2 Zilla Slab | 40px · Bold Line height 120% | sg-font-size-10 | The quick brown fox |
H3 Zilla Slab | 32px · Bold Line height 120% | sg-font-size-8 | The quick brown fox |
H4 Zilla Slab | 24px · Bold Line height 120% | sg-font-size-6 | The quick brown fox |
H5 Zilla Slab | 20px · Bold Line height 120% | sg-font-size-5 | The quick brown fox |
H6 Zilla Slab | 16px · Bold Line height 120% | sg-font-size-3 | The quick brown fox |
Label
| Style | Properties | Token | Preview |
|---|---|---|---|
Active/Regular Open Sans | 16px · Bold Line height 110% | sg-font-size-3 | The quick brown fox |
Default/Regular Open Sans | 16px · Medium Line height 110% | sg-font-size-3 | The quick brown fox |
Active/Small Open Sans | 14px · Bold Line height 110% | sg-font-size-2 | The quick brown fox |
Default/Small Open Sans | 14px · Medium Line height 110% | sg-font-size-2 | The quick brown fox |
Tag Open Sans | 11px · SemiBold Line height 110% | sg-font-size-0 | The quick brown fox |
Text
| Style | Properties | Token | Preview |
|---|---|---|---|
Large Open Sans | 18px · Regular Line height 150% | sg-font-size-4 | The quick brown fox |
Link/Large Open Sans | 18px · SemiBold Line height 150% | sg-font-size-4 | The quick brown fox |
Link/Regular Open Sans | 16px · SemiBold Line height 150% | sg-font-size-3 | The quick brown fox |
Regular Open Sans | 16px · Regular Line height 150% | sg-font-size-3 | The quick brown fox |
Link/Small Open Sans | 14px · SemiBold Line height 150% | sg-font-size-2 | The quick brown fox |
Small Open Sans | 14px · Regular Line height 150% | sg-font-size-2 | The quick brown fox |
Link/Tiny Open Sans | 12px · SemiBold Line height 150% | sg-font-size-1 | The quick brown fox |
Tiny Open Sans | 12px · Regular Line height 150% | sg-font-size-1 | The quick brown fox |
Typography primitives
| Token | Value | Preview |
|---|---|---|
| sg-font-size-0 | 1.1rem | Aa |
| sg-font-size-1 | 1.2rem | Aa |
| sg-font-size-2 | 1.4rem | Aa |
| sg-font-size-3 | 1.6rem | Aa |
| sg-font-size-4 | 1.8rem | Aa |
| sg-font-size-5 | 2rem | Aa |
| sg-font-size-6 | 2.4rem | Aa |
| sg-font-size-7 | 2.8rem | Aa |
| sg-font-size-8 | 3.2rem | Aa |
| sg-font-size-9 | 3.6rem | Aa |
| sg-font-size-10 | 4rem | Aa |
| sg-font-size-11 | 4.8rem | Aa |
| sg-font-size-12 | 7.2rem | Aa |
| sg-font-weight-regular | 400 | Aa |
| sg-font-weight-medium | 500 | Aa |
| sg-font-weight-semibold | 600 | Aa |
| sg-font-weight-bold | 700 | Aa |
| sg-brand-font-copy | Open Sans | Aa |
| sg-brand-font-display | zilla slab | Aa |