StartFoundationsComponentsContent
Overview Color Typography Spacing Radius Elevation Focus Motion Icons Aspect ratio

Spacing

One scale of spacing tokens on a 4px base. The name is the value: space-16 is 16px.

GuideTokens
Save Cancel 
<div style="display: flex; gap: var(--space-8)">
  <tk-button variant="primary">Save</tk-button>
  <tk-button>Cancel</tk-button>
</div>

Using the scale

  • Take every gap, padding, and margin from space-*. All steps are multiples of 4px, except three fine steps described below. The full list is in the token table.
  • Set spacing on the parent: gap and padding on the container, not margins on each child.
  • The most used steps are 8, 16, and 24. Use 32 to 96 between page sections.
  • space-0 removes spacing.
  • Values don't change with screen size. To adapt a layout, pick a different step.

Distance shows relationship

Elements that sit close together read as one group. More space means a looser relationship. Space can separate groups without lines.

Undo Redo
Cut Copy 
<div style="display: flex; flex-wrap: wrap; gap: var(--space-24)">
  <div style="display: flex; gap: var(--space-8)">
    <tk-button>Undo</tk-button>
    <tk-button>Redo</tk-button>
  </div>
  <div style="display: flex; gap: var(--space-8)">
    <tk-button>Cut</tk-button>
    <tk-button>Copy</tk-button>
  </div>
</div>
Step Between
space-8 items of one group, such as a label and its field
space-16 separate items that sit side by side
space-24 groups within one section
space-32 sections of a page

Use the same distance for the same kind of relationship, so the rhythm reads.

Fine steps

space-2, space-6, and space-10 are the only steps off the 4px base. They are for padding inside small controls, where 4px steps are too coarse: space-6 pads a Kbd key, space-10 pads a large field. Between blocks, use the 4px steps.

Accessibility

  • Group with space, not only with lines or color. Clear grouping helps everyone, including people under cognitive load.
  • Don't size tap targets from space-*. A control's size comes from the component, not from the spacing around it.

Limits

  • Spacing is in px. It grows with browser zoom, but not with the browser's default font-size setting.

Do / Don't

✅ Do ❌ Don't
Take values from the space-* scale Use values like 13px or 18px
Set gap and padding on the container Put margins on each child
Use space-8 inside a group and 24 or more between groups Use one spacing for everything
Repeat one distance for the same relationship Mix 12 and 16 for no reason
Give sections room with 32 to 96 Pack a page tightly to look compact
Change the step to adapt a layout Compute fluid values between steps
  • Radius: nested corners depend on padding.
  • Typography: line heights sit on the same 4px grid.
  • Prose: spacing between blocks of authored text.