Typography
Instrument Sans for people, JetBrains Mono for machines.
| Token | Family | Use |
|---|---|---|
font-sans | Instrument Sans 400–700 | Headlines, body, buttons, labels in sentence case |
font-mono | JetBrains Mono 400–500 | Eyebrows, numbers, IDs, dates, code, shortcuts |
Scale
| Name | Size / line height | Weight · tracking | Where |
|---|---|---|---|
| display-2xl | 152 / 0.92 | 700 · −5.5% | Marketing hero |
| display-xl | 96 / 0.95 | 700 · −5% | Marketing |
| display-lg | 64 / 0.98 | 700 · −4.5% | Marketing sections |
| h1 | 44 / 1.05 | 700 · −3.5% | Page titles |
| h2 | 32 / 1.1 | 600 · −2.5% | Section titles |
| h3 | 24 / 1.2 | 600 · −2% | Card and dialog titles |
| h4 | 20 / 1.3 | 600 · −1.5% | Sub-sections |
| body-lg | 18 / 1.55 | 400 | Marketing body |
| body | 16 / 1.55 | 400 | Long-form product copy |
| ui | 14 / 1.45 | 400 | Default in product screens |
| ui-sm | 13 / 1.4 | 400 | Helper text, table meta |
| caption | 12 / 1.4 | 400 | Timestamps |
| eyebrow | 12 / 1.3 mono | 500 · +8% caps | Section labels: the eyebrow utility |
Display sizes are for marketing. Product screens top out at h1.
Eyebrows
<span className="eyebrow text-muted-foreground">Monthly revenue</span>