Spacing

Usage

Components use the semantic tokens through their CSS variables; the primitives are only what they point to. Copy a variable from its card.

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-gap-related);
  padding: var(--space-padding-md);
}

Scale

The primitive steps the padding and gap tokens point to. Components never use them directly.

• space/00px--space-0
• space/22px--space-2
• space/44px--space-4
• space/88px--space-8
• space/1212px--space-12
• space/1616px--space-16
• space/2020px--space-20
• space/2424px--space-24
• space/2828px--space-28
• space/3232px--space-32
• space/4040px--space-40
• space/4848px--space-48
• space/6464px--space-64
• space/8080px--space-80
• space/9696px--space-96
• space/128128px--space-128
• space/160160px--space-160
• space/256256px--space-256

Padding

Space inside a component, between its edge and its content.

• space/padding/3xs2px · space/2--space-padding-3xs
• space/padding/2xs4px · space/4--space-padding-2xs
• space/padding/xs8px · space/8--space-padding-xs
• space/padding/sm12px · space/12--space-padding-sm
• space/padding/md16px · space/16--space-padding-md
• space/padding/lg24px · space/24--space-padding-lg
• space/padding/xl32px · space/32--space-padding-xl
• space/padding/2xl48px · space/48--space-padding-2xl
• space/padding/3xl96px · space/96--space-padding-3xl

Gap

Space between the elements of a component or a layout.

• space/gap/micro2px · space/2--space-gap-micro
• space/gap/related4px · space/4--space-gap-related
• space/gap/inline8px · space/8--space-gap-inline
• space/gap/grouped16px · space/16--space-gap-grouped
• space/gap/section48px · space/48--space-gap-section