Foundation
Typography
Text styles from Figma and the tokens that define them.
Brand Fonts
Aa
Cera Pro
Custom font
RegularBold
Heading
| Style | Properties | Token | Preview |
|---|---|---|---|
Hero Title Cera Pro | 64px · Bold Line height 110% | fi-font-size-64 | The quick brown fox |
H1 Cera Pro | 48px · Bold Line height 120% | fi-font-size-48 | The quick brown fox |
H2 Cera Pro | 36px · Bold Line height 120% | fi-font-size-36 | The quick brown fox |
H3 Cera Pro | 32px · Bold Line height 120% | fi-font-size-32 | The quick brown fox |
H4 Cera Pro | 24px · Bold Line height 120% | fi-font-size-24 | The quick brown fox |
H5 Cera Pro | 20px · Bold Line height 120% | fi-font-size-20 | The quick brown fox |
H6 Cera Pro | 16px · Bold Line height 150% | fi-font-size-16 | The quick brown fox |
Label
| Style | Properties | Token | Preview |
|---|---|---|---|
Active/Regular Cera Pro | 16px · Bold Line height 110% | fi-font-size-16 | The quick brown fox |
Default/Regular Cera Pro | 16px · Regular Line height 110% | fi-font-size-16 | The quick brown fox |
Active/Small Cera Pro | 14px · Bold Line height 110% | fi-font-size-14 | The quick brown fox |
Default/Small Cera Pro | 14px · Regular Line height 110% | fi-font-size-14 | The quick brown fox |
Tag Cera Pro | 12px · Regular Line height 110% | fi-font-size-12 | The quick brown fox |
Text
| Style | Properties | Token | Preview |
|---|---|---|---|
Extra Large Cera Pro | 24px · Regular Line height 150% | fi-font-size-24 | The quick brown fox |
Large Cera Pro | 18px · Regular Line height 150% | fi-font-size-18 | The quick brown fox |
Link/Large Cera Pro | 18px · Bold Line height 150% | fi-font-size-18 | The quick brown fox |
Link/Regular Cera Pro | 16px · Bold Line height 150% | fi-font-size-16 | The quick brown fox |
Regular Cera Pro | 16px · Regular Line height 150% | fi-font-size-16 | The quick brown fox |
Link/Small Cera Pro | 14px · Bold Line height 150% | fi-font-size-14 | The quick brown fox |
Small Cera Pro | 14px · Regular Line height 150% | fi-font-size-14 | The quick brown fox |
Link/Tiny Cera Pro | 12px · Bold Line height 150% | fi-font-size-12 | The quick brown fox |
Tiny Cera Pro | 12px · Regular Line height 150% | fi-font-size-12 | The quick brown fox |
Typography primitives
| Token | Value | Preview |
|---|---|---|
| fi-font-size-11 | 1.1rem | Aa |
| fi-font-size-12 | 1.2rem | Aa |
| fi-font-size-14 | 1.4rem | Aa |
| fi-font-size-16 | 1.6rem | Aa |
| fi-font-size-18 | 1.8rem | Aa |
| fi-font-size-20 | 2rem | Aa |
| fi-font-size-24 | 2.4rem | Aa |
| fi-font-size-28 | 2.8rem | Aa |
| fi-font-size-32 | 3.2rem | Aa |
| fi-font-size-36 | 3.6rem | Aa |
| fi-font-size-40 | 4rem | Aa |
| fi-font-size-48 | 4.8rem | Aa |
| fi-font-size-64 | 6.4rem | Aa |
| fi-font-weight-regular | 400 | Aa |
| fi-font-weight-bold | 700 | Aa |
| fi-brand-font-copy | Cera Pro | Aa |
| fi-brand-font-display | Cera Pro | Aa |