Layout
A 12-column grid, comfortable and compact density, page templates and content widths.
Density is a token mode, built like light and dark (DECISIONS.md #18). Set data-density="compact" on html or any region and control heights, the TopBar, gutters, margins, stack spacing and card padding tighten together. Type sizes and badge sizes do not change, and no control goes below the 24 px target size. Components read the tokens through utilities, so they adapt without props.
Side by side
The same Card, Input and Button composition in a comfortable scope and a compact scope.
Payout schedule
Next payout on 14 Oct 2026
Payout schedule
Next payout on 14 Oct 2026
What changes
From the token metadata: every layout and size token, its compact value, and the utility that reads it.
| Token | Comfortable | Compact | Utility |
|---|---|---|---|
| size.target.min WCAG 2.2 SC 2.5.8 minimum target size | 24px | same | min-h-target-min |
| size.control.sm | 28px | 24px | h-control-sm |
| size.control.md | 32px | 28px | h-control-md |
| size.control.lg | 40px | 32px | h-control-lg |
| size.topbar Height of the application TopBar. Sticky elements below it offset by this. | 56px | 48px | h-topbar · top-topbar |
| size.sidenav Width of the SideNav. | 240px | same | w-sidenav |
| layout.gutter Gap between grid columns. | 24px | 16px | gap-gutter |
| layout.margin Page padding at the edge of the main area. | 32px | 24px | px-margin |
| layout.section Space between page sections. | 32px | 24px | py-section · gap-section |
| layout.stack-xs | 4px | same | gap-stack-xs |
| layout.stack-sm | 8px | same | gap-stack-sm |
| layout.stack-md | 16px | 12px | gap-stack-md |
| layout.stack-lg | 24px | 16px | gap-stack-lg |
| layout.inline-sm | 8px | same | gap-inline-sm |
| layout.inline-md | 12px | same | gap-inline-md |
| layout.card-x | 20px | 12px | px-card-x (Card padding md) |
| layout.card-y | 16px | 12px | py-card-y (Card padding md) |
| layout.card-x-sm | 16px | 8px | px-card-x-sm (Card padding sm) |
| layout.card-y-sm | 12px | 8px | py-card-y-sm (Card padding sm) |
| layout.grid.columns Columns in the page grid. Divides into 2, 3, 4 and 6. | 12 | same | layout-grid |
| layout.container.prose | 720px | same | max-w-prose |
| layout.container.form | 640px | same | max-w-form |
| layout.container.page | 1280px | same | max-w-page |
| layout.container.wide | 1536px | same | max-w-wide |
When to use compact
- Data-dense products used all day by specialists: ledgers, reconciliation, trading and operations consoles.
- One dense region inside a comfortable page, such as a long transactions table.
- Not for onboarding, settings or anything a person visits rarely; comfortable is the default.
- Never as a fix for a layout that does not fit. Change the layout, not the density.
Recipe
<html lang="en" data-density="compact"> {/* the whole product */}
<section data-density="compact">…</section> {/* one dense region, such as a ledger table */}
<section data-density="comfortable">…</section> {/* opt back out inside a compact page */}