Foundations
Typography
Typography is the skillful arrangement of type to naturally establish hierarchy within the user interface.
Heading
| Token | Weight | Size (px) | Line Height (px) |
|---|---|---|---|
| heading-6xl | Semibold 600 | 60px | 72px |
| heading-5xl | Semibold 600 | 48px | 56px |
| heading-4xl | Semibold 600 | 36px | 44px |
| heading-3xl | Semibold 600 | 30px | 38px |
| heading-2xl | Semibold 600 | 24px | 32px |
| heading-xl | Semibold 600 | 20px | 30px |
| heading-lg | Medium 500 | 18px | 28px |
| heading-md | Medium 500 | 16px | 24px |
| heading-sm | Medium 500 | 14px | 20px |
Body
| Token | Weight | Size (px) | Line Height (px) |
|---|---|---|---|
| body-lg | Regular 400 | 18px | 28px |
| body-lg | medium | Medium 500 | 18px | 28px |
| body-md | Regular 400 | 16px | 24px |
| body-md | medium | Medium 500 | 16px | 24px |
| body-md | underline | Medium 500 | 16px | 24px |
| body-sm | Regular 400 | 14px | 20px |
| body-sm | medium | Medium 500 | 14px | 20px |
| body-sm | underline | Medium 500 | 14px | 20px |
| body-sm | uppercase | Regular 400 | 14px | 20px |
| body-xs | Regular 400 | 12px | 16px |
| body-xs | medium | Medium 500 | 12px | 16px |
| body-xs | underline | Medium 500 | 12px | 16px |
| body-xs | uppercase | Regular 400 | 12px | 16px |
| body-2xs | Regular 400 | 10px | 16px |
| body-2xs | medium | Medium 500 | 10px | 16px |
| body-2xs | uppercase | Regular 400 | 10px | 16px |
Backdrop Tokens
Shadows