Spacing
A 4 px base scale: step n is n × 4 px, with half steps where controls need them. Tight inside groups, generous between them. Fewer choices means more consistent screens.
In a layout
A review card built from the real components. Tinted areas are spacing: card padding, the gap between blocks and the gap inside a row of controls. They come from density tokens: switch to Compact to tighten them.
Soften the page backgroundIn review
A proposed change to color.bg.default. Check the contrast pairs before you approve it.
- Card padding layout.inset
- Between blocks layout.gap
- Title to badge, between buttons control.gap
- Padding inside cards, dialogs, popovers.20pxspace 5
5 components
Components
- 16pxspace 4
- 8pxspace 2
1 component
Components
- 12pxspace 3
5 components
Components
- 16pxspace 4
- 20pxspace 5
1 component
Components
- 16pxspace 4
1 component
Components
Scale
space16 tokensInside a control: space 2 to 4. Between related items: space 1 to 3. Inside a card or panel: space 4 to 5. Between sections: space 8 and up.
- 0pxUnused
- 2px
- 4px
- 6px
- 8px
- 12px
- 16px
- 20px
10 components
- 24px
7 components
- 28pxUnused
- 32px
4 components
Components
- 40px
2 components
Components
- 48px
1 component
Components
- 64px
1 component
Components
- 80pxUnused
- 96px
1 component
Components