The default fonts we use are Inter for regular text and
JetBrains Mono for monospace text.
CSS variables
Font sizes are defined in a 12-step scale from smallest to largest.
| --font-size-1 | 12px |
| --font-size-2 | 14px |
| --font-size-3 | 16px |
| --font-size-4 | 18px |
| --font-size-5 | 20px |
| --font-size-6 | 24px |
| --font-size-7 | 30px |
| --font-size-8 | 36px |
| --font-size-9 | 48px |
| --font-size-10 | 60px |
| --font-size-11 | 72px |
| --font-size-12 | 96px |
Font weights are defined as light, regular, medium and bold.
| --font-weight-thin | 100 |
| --font-weight-extra-light | 200 |
| --font-weight-light | 300 |
| --font-weight-regular | 400 |
| --font-weight-medium | 500 |
| --font-weight-semi-bold | 600 |
| --font-weight-bold | 700 |
| --font-weight-extra-bold | 800 |
| --font-weight-black | 900 |
Component props
| size | Responsive<"1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9"> |
| weight | Responsive<"light" | "normal" | "medium" | "bold"> |