Typography
Inter is the system typeface. All size and weight decisions are made with purpose. Use the heading scale for hierarchy, body scale for content, and mono for code or token references.
Heading scale
Display36px / 700
The edge of precision.
H130px / 700
Section heading level 1
H224px / 600
Section heading level 2
H320px / 600
Subsection heading
H418px / 600
Card or group heading
H516px / 500
Inline section label
H614px / 500
Small section or field group label
Body & utility scale
Body (p)16px / 400
Body text for paragraphs and longer-form content. Readable at comfortable line-height. Use for main content areas, descriptions, and explanatory copy.
Small (p)14px / 400
Small text used for labels, captions, metadata, and secondary information throughout the interface.
Caption12px / 400
Caption text for table headers, timestamps, helper text, and fine print.
Mono14px / 400
--primary: 0 0% 9%;
Tailwind class reference
| Level | Element | Tailwind classes | Size | Weight |
|---|---|---|---|---|
| Display | h1 | text-4xl font-bold | 36px | 700 |
| H1 | h1 | text-3xl font-bold | 30px | 700 |
| H2 | h2 | text-2xl font-semibold | 24px | 600 |
| H3 | h3 | text-xl font-semibold | 20px | 600 |
| H4 | h4 | text-lg font-semibold | 18px | 600 |
| H5 | h5 | text-base font-medium | 16px | 500 |
| H6 | h6 | text-sm font-medium | 14px | 500 |
| Body (p) | p | text-base font-normal | 16px | 400 |
| Small (p) | p | text-sm font-normal | 14px | 400 |
| Caption | span | text-xs font-normal | 12px | 400 |
| Mono | code | text-sm font-mono | 14px | 400 |