Spacing & radius

A 4px-derived scale for space, a doubling scale for corners — and the sentences that carry the rules: a label is a pill, an action is a square, the inside is one step smaller than the outside.

Space

	Token	Value
	space/2	2px
	space/4	4px
	space/8	8px
	space/12	12px
	space/16	16px
	space/20	20px
	space/24	24px
	space/32	32px
	space/40	40px
	space/48	48px
	space/64	64px
	space/80	80px
	space/96	96px
	space/128	128px

Radius

	Token	Value	What it is for
	radius/4	4px	inner rows, breadcrumb ring
	radius/8	8px	controls: buttons, inputs, nav items, slots
	radius/16	16px	cards, dialogs, the topbar, the rail
	radius/32	32px	the deck body card
	radius/64	64px	reserved
	radius/full	9999px	pill — chips, badges, toggles

Rules that carry a why

• Labels are pills, actions are squares — a chip or a badge is radius/full; a button is radius/8. The rule is the sentence, not the number.
• The inside is one step smaller than the outside — an r16 card holds r8 slots, an r8 row holds r4 rows; the same radius inside and outside looks wrong.
• Padding is the same on all four sides of a container — 12 / 12 / 12 / 12, never 6 top and 12 sides.
• A bullet list’s rows are 8 apart on every slide and every layout — no layout may override it.
• An insight block is never wider than three quarters of the canvas — 1344 of 1792.
• Gutters are equal: 32 between the rail and the content, 32 on the right; the rail floats with 24 above and below; cards start 24 under the top bar.
• Card padding is space/24 with space/16 between items on the product and the web; deck cards are 20 / 12.

On the Figma page

Each bar’s width is bound to its space variable and each swatch’s corners to its radius variable — change the token and the specimen follows. The rules below the scales are the ones components already carry: Card space/24 · space/16 (the product; 20 · 12 on slides), KPI tile space/20 · space/12, Table cells space/12 × space/16, Nav item space/8 × space/12, Dialog space/24 · space/16, the rail’s 24 insets and 32 gutter. A value between two steps takes the nearest step — never a new step.

The same page in the Figma library: Spacing & radius.