Spacing and radius govern the rhythm of an interface. Rather than creating arbitrary padding per component, this system pairs a single 4px base scale with semantic aliases (inset, stack, inline, layout). It also tests where a signature asymmetric corner adds character versus where symmetric controls protect tap targets.
Preview
Spacing scale
Named steps, linear off a base unit — spacing isn't modular like type, it's built from a shared grid unit. Bars are proportional to px value.
Spacing in a component
Card padding = inset.md · title/body gap = stack.sm · gap between cards = layout.sm. Three different alias categories, same raw scale underneath. The first card also carries the signature radius, if applied to cards.
Spacing and radius are judged here the same way color and type were — in a real component, on the real background, not as bare numbers on a ruler.
A second card at the same tokens, without the signature radius, so the two read side by side.
Grid gutter
A layout.* alias driving a grid gap — the macro tier, and the one that may go fluid (see panel 2) instead of staying fixed like inset/stack/inline.
Radius across component types
Buttons, tags and thumbnails stay symmetric for predictable click targets. The panel shows the signature radius when applied.
Linear spacing scale anchored on a single base grid unit (3xs to 4xl). Modifying the base adjusts interface density globally.
Computed scale (px)
Semantic aliases mapped to the core scale. Aliases provide intentional component-level abstractions (inset, stack, inline, layout) that can be remapped without altering underlying grid math.
inset — component padding
Chip/tag → card/button → spacious panel.
stack — vertical rhythm
Title/body → block-to-block → major section break.
inline — horizontal rhythm
Icon/label → tag row → toolbar item.
layout — macro / page level
Card row gutter → section-to-section → page-level break. The only tier allowed to go fluid.
Fluid layout gutters (clamp on resize)
layout.* tokens compress smoothly on viewport resize via clamp(), while internal component padding (inset/stack) remains fixed for consistency.Symmetric corner radii (sm, md, lg, xl) for standard interactive controls, thumbnails, and surface panels.
Computed scale (px)
Brand-signature diagonal radii mirroring the mark's geometry. Applies opposite rounded and sharp corners across four scale steps.
Computed asymmetric scale
Which corners round? (global)
First stack card
Radius-row panel
Mark-tile echo size
Selects the layout.* token used for the 3-column specimen grid.