Spacing

Sixteen steps, derived by measuring what the components use rather than by imposing a grid on them. The rule is a multiple of four used more than once, which accounts for 90% of spacing declarations; the values it leaves out are listed with their reasons instead of being absorbed.

CSS Tokens SASS Tokens Tailwind DTCG
in-sync·Source: css:blocks/base.css·Last synced 42d ago

Spacing Scale

Each step in the scale is a multiple of the base unit 1.25rem (20px). Use these tokens consistently to maintain rhythm across layouts and components.

--spacing-00px0pxExplicit zero. Every block resets heading, paragraph and list margins.
--spacing-44px4pxHairline offset. Gallery caption inset and title margin.
--spacing-88px8pxTight gap. Icon-to-label, badge internals, stat figure to label.
--spacing-1212px12pxGap between adjacent controls: hero button row, FAQ question row, footer legal links.
--spacing-1616px16pxCard grid gap, and the margin from a heading to the paragraph under it.
--spacing-2020px20pxEyebrow-to-heading margin, header row padding, nav link gap.
--spacing-2424px24pxCard and panel interior padding. Feature cards, FAQ items, CTA button.
--spacing-3232px32pxSection side padding on the narrow blocks (hero, closing CTA) and the stats column gap.
--spacing-3636px36pxHeading block rhythm in the hero, plus the header nav group gap.
--spacing-4040px40pxGap between large adjacent regions: gallery cards, stacked columns below 900px.
--spacing-4848px48pxSpace before a grid or column set. Features intro to grid, footer columns.
--spacing-5656px56pxThe standard section side padding. Seven of the eight blocks use it.
--spacing-6464px64pxStats block rhythm: the row gap and the margin below the intro.
--spacing-7272px72pxFooter top padding and the gap between its link columns.
--spacing-8080px80pxHero top padding and the FAQ two-column gap.
--spacing-9696px96pxThe standard section vertical padding. Features, FAQ, gallery, CTA panel and the hero's lower edge.
:root {
  --spacing-0: 0px; /** Explicit zero. Every block resets heading, paragraph and list margins. */
  --spacing-4: 4px; /** Hairline offset. Gallery caption inset and title margin. */
  --spacing-8: 8px; /** Tight gap. Icon-to-label, badge internals, stat figure to label. */
  --spacing-12: 12px; /** Gap between adjacent controls: hero button row, FAQ question row, footer legal links. */
  --spacing-16: 16px; /** Card grid gap, and the margin from a heading to the paragraph under it. */
  --spacing-20: 20px; /** Eyebrow-to-heading margin, header row padding, nav link gap. */
  --spacing-24: 24px; /** Card and panel interior padding. Feature cards, FAQ items, CTA button. */
  --spacing-32: 32px; /** Section side padding on the narrow blocks (hero, closing CTA) and the stats column gap. */
  --spacing-36: 36px; /** Heading block rhythm in the hero, plus the header nav group gap. */
  --spacing-40: 40px; /** Gap between large adjacent regions: gallery cards, stacked columns below 900px. */
  --spacing-48: 48px; /** Space before a grid or column set. Features intro to grid, footer columns. */
  --spacing-56: 56px; /** The standard section side padding. Seven of the eight blocks use it. */
  --spacing-64: 64px; /** Stats block rhythm: the row gap and the margin below the intro. */
  --spacing-72: 72px; /** Footer top padding and the gap between its link columns. */
  --spacing-80: 80px; /** Hero top padding and the FAQ two-column gap. */
  --spacing-96: 96px; /** The standard section vertical padding. Features, FAQ, gallery, CTA panel and the hero's lower edge. */
}
PreviousTypographyNext Effects