Density

Generous spacing is how a dense product quietly becomes a sparse one, so the cap is the design: no component spacing above 32px, no control above 36px, every corner square.

Spacing

Reach for the role first: a cell’s padding is --pad-cell-x, not a number. Every role token below is under the 32px cap, and each is drawn at its own width.

--pad-cell-x8px
table cell horizontal
--pad-cell-y6px
table cell vertical
--pad-control-x8px
input, button, select
--pad-badge-x6px
--pad-badge-y2px
--pad-chip-x6px
--pad-chip-y2px
--pad-sidebar-item8px
--pad-card12px
--pad-panel12px
--pad-popover8px
--pad-popup-list4px
popup edge or separator to its row stack, §7.4
--pad-page-x16px
shell column gutter — top nav, sidebar, panel
--pad-page-y16px
first content below a shell header band
--pad-content-x24px
<main>'s side gutter
--pad-band-y8px
header band, around its --h-control child
--gap-bonded2px
title to its timestamp — ONE unit
--gap-icon-label2px
icon to its label inside a badge or chip
--gap-control-icon6px
icon to its label inside a control
--gap-chip2px
between chips in a filter group
--gap-inline8px
between distinct inline controls
--gap-field8px
between form fields
--gap-group12px
between control groups
--gap-tree-indent12px
per level in a lineage tree
--gap-section32px
between page sections — the component ceiling, §7.4
--gap-nav-group24px
between groups in a sidebar nav

The frame tier

The one tier above 32px, capped at 64px. It is paid once per page, not once per row, so only shells use it: the space around a page, never inside a table, card or form.

--pad-frame-x48px
main's side gutter, page header and body
--pad-frame-top48px
main body's top inset, below the page header band
--pad-frame-empty64px
vertical air in EmptyState size="page"

Control and row heights

The real definition of density. A 32px control, a 28px row, and nothing above 36px.

--h-row-xs24px
dense table rows, log lines, activity feed
--h-row-sm28px
default table row
--h-control-sm24px
control inside a table row — 2px clearance in --h-row-sm
--h-control32px
default control — input, button, select
--h-control-lg36px
primary action, page-header control — cap

Shape

Square. Every rectangle names its tier, so re-rounding stays a one-line change, and round marks stay round.

--radius-xs0px
status badge, cell focus outline, checkbox
--radius-sm0px
a part inset inside a control (segmented tab, switch thumb)
--radius-md0px
interactive — input, button, filter chip, tab, switch; card, panel, dropdown, popover
--radius-lg0px
modal, drawer
--radius-full9999px
status dot, count badge, avatar, progress track

Borders

Borders do the work whitespace does elsewhere. Every line is 1px; 2px is kept for the agent rail, the focus ring and the active tab. Dashed means a placeholder. A double rule means a total adds up.

--border-width1px
--border-width-22px
--ring-width2px

A dashed frame marks something still to come: a to-build component, a slot a row will fill.

Shell widths

Widths carry no cap. They exist because the same number was written in more than one place.

--w-sidebar240px
AppShell sidebar, and popups sized to match it
--w-panel440px
AppShell trailing panel — the chat drawer
--w-content1280px
main's content column, frame gutters included, centred