Spacing
Padding for the space inside a component, gap for the space between children — all from one numeric scale. Switch platform in the bar below for units.
Padding and gap tokens. Gap also has a matching negative ramp for overlaps.
All spacing comes from one numeric scale. Use padding for the space inside a component (between its edge and its content) and gap for the space between stacked or inline children. Never hardcode an off-scale value.
Padding — used for
Inner padding sets how tightly content sits inside a container. Smaller steps feel compact; larger steps feel open.
| Token | Value | Used for |
|---|---|---|
spacingPaddingNone | 0pt | Zero inset — flush surfaces and dividers. |
spacingPaddingXs | 2pt | Tight inline badges, tags, and icon containers. |
spacingPaddingSm | 4pt | Compact chips, small button labels, and dense list rows. |
spacingPaddingMd | 8pt | Default control padding — buttons, inputs, and list cell insets. |
spacingPaddingLg | 12pt | Cards and grouped sections with comfortable breathing room. |
spacingPaddingXl | 16pt | Roomy panels, modals, and highlighted callouts. |
spacingPadding2xl | 24pt | Large content blocks and hero section insets. |
spacingPadding3xl | 32pt | Page-level horizontal gutters and generous hero zones. |
spacingPadding4xl | 40pt | Extra-spacious screen-edge insets on tablet / large breakpoints. |
spacingPadding5xl | 56pt | Maximum structural whitespace — top-of-screen hero offsets. |
Gap — used for
Gap drives the space between siblings in a flex or grid container. Use the same scale as padding so rhythm stays consistent throughout the layout.
| Token | Value | Used for |
|---|---|---|
spacingGapPositiveNone | 0pt | No gap — items flush together (use padding inside each instead). |
spacingGapPositive2xs | 2pt | Hairline separation between tightly coupled elements, like an icon and its adjacent glyph. |
spacingGapPositiveXs | 4pt | Tightly packed icon + label pairs and badge stacks. |
spacingGapPositiveSm | 6pt | Form field labels above their inputs; related metadata rows. |
spacingGapPositiveMd | 8pt | Default stacked row spacing in lists and vertical forms. |
spacingGapPositiveLg | 10pt | Section-level spacing between distinct content groups. |
spacingGapPositiveXl | 12pt | Larger editorial or card-grid column gutters. |
spacingGapPositive2xl | 16pt | Wide horizontal spacing in grid layouts. |
spacingGapPositive3xl | 24pt | Structural top-level section separation. |
spacingGapPositive4xl | 32pt | Generous separation between major page regions and stacked sections. |
Applied
The same scale in practice — an inner-padded card and a gap-separated list.
spacingPaddingLgspacingGapPositiveMdAnatomy
A single card illustrating where padding and gap live: padding wraps the card’s content inward; gap separates the title from the body text within.
spacingPaddingLg · inner gap spacingGapPositiveSmDo & Don’t
spacingGapPositiveMd) between every row — rhythm feels uniform.