Type, size & spacing
Two rules hold the product together, as on the Integrity site: everything sits on an 8px grid, and there is one 8px corner radius.
Type tokens
Two families and a short scale. Each theme size carries its own line height, always a multiple of 8px; the type roles in global.css combine them for headings, ledes, labels and meta.
| Family | Utility | Weights |
|---|---|---|
| General Sans | font-heading | 600 only |
| Asap | font-sans | 400 reading, 500 meta, 600 controls and labels |
| Theme size | Size / line |
|---|---|
text-xs | 12 / 16 |
text-sm | 14 / 24 |
text-base | 16 / 24 |
text-lg | 18 / 32 |
text-xl | 22 / 32 |
text-2xl | 32 / 40 |
text-3xl | 40 / 48 |
text-4xl | 56 / 64 |
| Role | Size / line |
|---|---|
.type-display | 56/64 · 40/48 below 768px |
.type-title | 40/48 · 32/40 below 768px |
.type-section | 22/32 |
.type-item | 16/24 |
.type-lede | 18/32 |
.text-base | 16/24 |
.text-sm | 14/24 |
.type-meta | 13/16 |
.type-label | 12/16 capitals |
Spacing
One spacing step is 8px (--spacing: 0.5rem), so p-1 is 8px and gap-3 is 24px. Whole steps only: p-0.5 and gap-1.5 are off the grid.
18pxIcon to label, chip padding, tight stacks216pxControl padding, card padding, gaps in a row324pxBetween groups inside a section432pxBetween a heading block and its content540pxPage gutter on a wide screen, sheet header648pxSection padding, top and bottom864pxSection padding, left and right
Control sizes
Controls are a whole number of steps tall. A field and a button side by side are both 40px, so toolbars line up without extra rules.
| Size | Height | Use |
|---|---|---|
xs | 24px · h-3 | Badges, keys, dense table actions |
sm | 32px · h-4 | Toolbars, pagers, segmented items |
default | 40px · h-5 | Buttons and fields everywhere |
lg | 48px · h-6 | Marketing pages only |
Radius
One corner radius: 8px (--radius). rounded is the only radius class; rounded-full is kept for avatars, dots and switch tracks, and rounded-none for a hard edge.
rounded · 8pxEverythingrounded-fullAvatars, dots, switchesrounded-noneRules, barsLayout
The measures that frame every page. They step at breakpoints rather than scaling with the viewport, so they stay on the grid.
- Page gutter
- 16px on a phone, 24px on a tablet, 40px from 1024px.
- Reading column
- 640px for prose: ledes, docs, release notes.
- Rails
- 248px for the Library, 280px for the docs, 264px for this guide.
- Section rhythm
- 48px between sections, 24px between groups, 16px inside a group.