Foundation
Typography tokens
Typography presets
| Class | Value | Preview |
|---|---|---|
| text-body-lg | font-size: 1.125rem /* 18px */ line-height: 1.5rem /* 24px */ font-weight: 400 | The quick brown fox |
| text-body-md | font-size: 1rem /* 16px */ line-height: 1.375rem /* 22px */ font-weight: 400 | The quick brown fox |
| text-body-sm | font-size: 0.875rem /* 14px */ line-height: 1.125rem /* 18px */ font-weight: 400 | The quick brown fox |
| text-body-xs | font-size: 0.75rem /* 12px */ line-height: 1rem /* 16px */ font-weight: 400 | The quick brown fox |
| text-display | font-size: 1.5rem /* 24px */ line-height: 2rem /* 32px */ font-weight: 700 | The quick brown fox |
| text-label-lg | font-size: 1.125rem /* 18px */ line-height: 1.5rem /* 24px */ font-weight: 500 | The quick brown fox |
| text-label-md | font-size: 1rem /* 16px */ line-height: 1.375rem /* 22px */ font-weight: 500 | The quick brown fox |
| text-label-sm | font-size: 0.875rem /* 14px */ line-height: 1.125rem /* 18px */ font-weight: 500 | The quick brown fox |
| text-label-xs | font-size: 0.75rem /* 12px */ line-height: 1rem /* 16px */ font-weight: 500 | The quick brown fox |
| text-title-lg | font-size: 1.125rem /* 18px */ line-height: 1.5rem /* 24px */ font-weight: 600 | The quick brown fox |
| text-title-md | font-size: 1rem /* 16px */ line-height: 1.375rem /* 22px */ font-weight: 600 | The quick brown fox |
| text-title-sm | font-size: 0.875rem /* 14px */ line-height: 1.125rem /* 18px */ font-weight: 600 | The quick brown fox |
Font family
| Class | Value | Preview |
|---|---|---|
| font-default | 'Inter', 'Open Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif | The quick brown fox |
| font-display | 'Epilogue', 'Open Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif | The quick brown fox |
Font size
| Class | Value | Preview |
|---|---|---|
| text-xs | 0.75rem /* 12px */ | The quick brown fox |
| text-sm | 0.875rem /* 14px */ | The quick brown fox |
| text-md | 1rem /* 16px */ | The quick brown fox |
| text-lg | 1.125rem /* 18px */ | The quick brown fox |
| text-xl | 1.25rem /* 20px */ | The quick brown fox |
| text-2xl | 1.5rem /* 24px */ | The quick brown fox |
| text-3xl | 1.75rem /* 28px */ | The quick brown fox |
| text-4xl | 2rem /* 32px */ | The quick brown fox |
| text-5xl | 2.25rem /* 36px */ | The quick brown fox |
Font weight
| Class | Value | Preview |
|---|---|---|
| font-normal | 400 | The quick brown fox |
| font-medium | 500 | The quick brown fox |
| font-semibold | 600 | The quick brown fox |
| font-bold | 700 | The quick brown fox |
Line height
| Class | Value | Preview |
|---|---|---|
| leading-12 | 0.75rem /* 12px */ | The quick brown fox |
| leading-14 | 0.875rem /* 14px */ | The quick brown fox |
| leading-16 | 1rem /* 16px */ | The quick brown fox |
| leading-18 | 1.125rem /* 18px */ | The quick brown fox |
| leading-20 | 1.25rem /* 20px */ | The quick brown fox |
| leading-22 | 1.375rem /* 22px */ | The quick brown fox |
| leading-24 | 1.5rem /* 24px */ | The quick brown fox |
| leading-26 | 1.625rem /* 26px */ | The quick brown fox |
| leading-28 | 1.75rem /* 28px */ | The quick brown fox |
| leading-32 | 2rem /* 32px */ | The quick brown fox |
| leading-40 | 2.5rem /* 40px */ | The quick brown fox |
| leading-42 | 2.625rem /* 42px */ | The quick brown fox |
Letter spacing
| Class | Value | Preview |
|---|---|---|
| tracking-normal | 0em /* 0px */ | The quick brown fox |
| tracking-display | -0.04em /* -0.64px */ | The quick brown fox |
| tracking-headline | -0.02em /* -0.32px */ | The quick brown fox |