Layout
One 4px unit, read as three axes and four layers, tight to open.
Scale and axes
One base unit, and three axes that say which way a gap runs: inset, stack and inline.
The 4px scale
Open full cardOne base unit. The name is the multiplier.
Three axes
Open full card16px does not say what the gap is for. The axis name does.
Layers
Four layers say how closely two things belong together, and text and modules add the gaps inside a block of text and the room a module takes. The layout's character moves them as one: tight and technical, balanced, or open with room to breathe. Stack and Inline take a layer and a spacing prop.
Layers
Open full cardHow closely two things belong together, and how the layout's character moves the gap.
Text and modules
Open full cardThe gaps inside a block of text, the room a module takes at each character, and its padding steps.
Spacing in use
Open full cardA card built entirely from space tokens.