# Design system

## Font-family

[Inter](https://fonts.google.com/specimen/Inter?query=inter)

## Font-size

| Class | font-size / line-height |
| ---------- | ----------------------- |
| text-xs | 12px / 16px |
| text-sm | 14px / 20px |
| text-base | 16px / 24px |
| text-lg | 18px / 28px |
| text-xl | 20px / 28px |
| text-2xl | 24px / 32px |
| text-3xl | 30px / 36px |
| text-4xl | 36px / 40px |
| text-5xl | 48px / 48px |
| text-6xl | 60px / 60px |
| text-7xl | 72px / 72px |
| text-8xl | 96px / 96px |
| text-9xl | 128px / 128px |

## Font-weight

| Class | font-weight |
| ------------------- | ----------- |
| font-light | 300 |
| font-normal | 400 |
| font-medium | 500 |
| font-semibold | 600 |
| font-bold | 700 |

## Border-radius

| Class | border-radius |
| ----------------- | ----------------- |
| rounded-sm | 2px |
| rounded | 4px |
| rounded-md | 6px |
| rounded-lg | 8px |
| rounded-xl | 12px |
| rounded-2xl | 16px |
| rounded-3xl | 24px |
| rounded-full | 9999px |

## Box-shadow

| Class | box-shadow |
| ---------------- | ------------------------------------------------------------------------ |
| shadow-sm | 0 1px 2px 0 rgb(0 0 0 / 0.05) |
| shadow | 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) |
| shadow-md | 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) |
| shadow-lg | 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) |
| shadow-xl | 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) |
| shadow-2xl | 0 25px 50px -12px rgb(0 0 0 / 0.25) |
| shadow-inner | inset 0 2px 4px 0 rgb(0 0 0 / 0.05) |

## Spacing (px)

4 - 8 - 12 - 16 - 20 - 24 - 28 - 32 - 36 - 40 - 44 - 48 - 56 - 64 - 80 - 96 -
112 - 128 - 144 - 160 - 176 - 192 - 208 - 224 - 240 - 256 - 288 - 320 - 384