Spacing & radii
Tailwind's 4px rhythm; radii derived from --radius (0.875rem).
Spacing scale
1 · 4px
1.5 · 6px
2 · 8px
3 · 12px
4 · 16px
5 · 20px
6 · 24px
8 · 32px
10 · 40px
12 · 48px
16 · 64px
20 · 80px
24 · 96px
Gap rhythm in practice
Two gaps carry most layouts. gap-2 (8px) is the control-row
beat — the breath between buttons, chips, and inline fields. gap-6 (24px) is the section beat — the air between distinct blocks.
Reach past these only when content earns it.
gap-2 · 8px · control row
Save Cancel Filter
gap-6 · 24px · section beat
Section one
Distinct block of related content
Section two
Separated by the 24px section beat
Radii
xs calc(var(--radius) - 8px)
sm calc(var(--radius) - 4px)
md calc(var(--radius) - 2px)
lg var(--radius)
xl calc(var(--radius) + 4px)
full 9999px
Semantic radius tiers
The radius a component should reach for — by role, not by raw scale. Controls are pill; panels
and cards are the 14px base. Don't put rounded-xl or larger on a
panel or control.
control --radius-control Buttons, inputs, selects, toggles, chips — pill
panel --radius-panel Modals, drawers, command shells — 14px base
card --radius-card Cards — 14px base
pill --radius-pill Raw pill — controls route through --radius-control
Sizing & focus primitives
Small, physical values the Tailwind scale doesn't cover. Component-scoped custom properties, never inline magic numbers.
--ring-width Focus-visible ring width
3px--border-hairline Structural 1px borders / dividers
1px--tabsline-h Section tabline band height (all variant="line")
3rem--switch-track-w-default Switch track width (default)
2rem--switch-track-h-default Switch track height (default)
1.15rem--drawer-handle-w Drawer drag-handle width
6.25rem--overlay Modal scrim — consumed as bg-overlay
#0c0c0e99