Micro — component internals
--space-chip
4px
badge padding · icon–label gap · border offsets · micro nudges
--space-element
8px
chip/pill padding · inline gaps · icon inset · tight row spacing
--space-component
12px
button vertical padding · input inset · list row gap · label-to-field
Component — internal layout
--space-group
16px
card inset · input horizontal padding · form field gap · default gap
--space-cluster
20px
grouped nav items · related form sections · compact panel inset
--space-panel
24px
sidebar/panel inset · modal body · drawer padding · section subheader gap
Layout — between components & sections
--space-block
32px
content block gaps · card grid gutter · toolbar height
--space-content
40px
major content group spacing · dialog padding · sub-section gap
--space-section
48px
page section breaks · feature group dividers · hero subheading gap
Page — large layout & full-bleed
--space-region
64px
hero vertical padding · layout area spacing · large feature gaps
--space-zone
80px
page-scale layout spacing · full-width section vertical rhythm
--space-canvas
96px
page margins · full-bleed hero top padding · maximum layout gutter