---
title: "Spacing"
subtitle: "One scale, and the rule about which layer applies it"
description: "The spacing scale and the discipline around it: sections carry macro spacing, blocks carry micro spacing, and containers carry width and nothing else."
author: "Studio"
section: "Website"
subsection: "Foundations"
order: 5
status: "published"
---

Spacing is one scale applied at three layers, and most layout problems come from applying it at the wrong one. Sections set the distance between major bands of a page, blocks set the rhythm inside a stack, and containers set width. The utility class names are indexed on the [Classes](/website/classes.html) page; this page is the scale itself and the rule about who applies it.

## The scale

`--space-*` tokens alias the unit scale, so re-stepping the units moves every spacing decision on the site at once.

| Token | Value | Token | Value |
| --- | --- | --- | --- |
| `var(--space-none)` | 0 | `var(--space-6xl)` | 64px |
| `var(--space-2xs)` | 2px | `var(--space-7xl)` | 72px |
| `var(--space-xs)` | 4px | `var(--space-8xl)` | 80px |
| `var(--space-s)` | 8px | `var(--space-9xl)` | 88px |
| `var(--space-m)` | 12px | `var(--space-10xl)` | 96px |
| `var(--space-l)` | 16px | `var(--space-11xl)` | 104px |
| `var(--space-xl)` | 24px | `var(--space-12xl)` | 112px |
| `var(--space-2xl)` | 32px | `var(--space-13xl)` | 120px |
| `var(--space-3xl)` | 40px | `var(--space-14xl)` | 160px |
| `var(--space-4xl)` | 48px | | |
| `var(--space-5xl)` | 56px | | |

Only eight of these have gap utilities and six have padding utilities. The rest exist for component CSS, which reaches for the token directly.

## Section spacing

Sections take their vertical space from a separate set of tokens, deliberately coarser than the block scale so the gap between bands never lands near the gap inside one.

| Token | Resolves to | Value | Utility |
| --- | --- | --- | --- |
| `var(--section-xs)` | `var(--space-xl)` | 24px | none |
| `var(--section-s)` | `var(--space-2xl)` | 32px | `.top-small` · `.bottom-small` |
| `var(--section-m)` | `var(--space-6xl)` | 64px | `.top-medium` · `.bottom-medium` |
| `var(--section-l)` | `var(--space-10xl)` | 96px | `.top-large` · `.bottom-large` |
| `var(--section-xl)` | `var(--space-14xl)` | 160px | `.top-xl` · `.bottom-xl` |

<div class="demo-preview is-joined">
  <div class="block gap-m">
    <div class="bg-faded padding-l top-small bottom-small">Small — 32px above and below</div>
    <div class="bg-faded padding-l top-medium bottom-medium">Medium — 64px</div>
    <div class="bg-faded padding-l top-large bottom-large">Large — 96px</div>
  </div>
</div>

```html
<section class="top-large bottom-large">
  <div class="padding-global">…</div>
</section>
```

## Gap

Inside a block, gap is the only source of vertical spacing. `.block > *` has its block margins zeroed for exactly this reason: flex gap does not collapse with margins the way margins collapse with each other — it adds to them, so leaving both in place doubles the space.

<div class="demo-preview is-joined">
  <div class="block gap-xl">
    <div class="block gap-none">
      <p class="demo-eyebrow">gap-none</p>
      <div class="bg-faded padding-s">Medically reviewed</div>
      <div class="bg-faded padding-s">14 May 2026</div>
    </div>
    <div class="block gap-s">
      <p class="demo-eyebrow">gap-s — 8px</p>
      <div class="bg-faded padding-s">Medically reviewed</div>
      <div class="bg-faded padding-s">14 May 2026</div>
    </div>
    <div class="block gap-l">
      <p class="demo-eyebrow">gap-l — 16px</p>
      <div class="bg-faded padding-s">Medically reviewed</div>
      <div class="bg-faded padding-s">14 May 2026</div>
    </div>
    <div class="block gap-2xl">
      <p class="demo-eyebrow">gap-2xl — 32px</p>
      <div class="bg-faded padding-s">Medically reviewed</div>
      <div class="bg-faded padding-s">14 May 2026</div>
    </div>
  </div>
</div>

```html
<div class="block gap-l">
  <h2>Heart Health</h2>
  <p>Medically reviewed</p>
</div>
```

## Padding

<div class="demo-preview is-joined">
  <div class="block gap-m">
    <div class="border border-faded padding-s">padding-s — 8px</div>
    <div class="border border-faded padding-l">padding-l — 16px</div>
    <div class="border border-faded padding-2xl">padding-2xl — 32px</div>
  </div>
</div>

`.padding-global` is the page gutter — 24px on the left and right — and it is what keeps every section's content aligned to the same edge. It belongs on a wrapper inside the section, never on the section itself.

## Interaction sizing

`var(--target-min)` is 44px, and it is a floor rather than a preference. Anything a reader taps — a button, a close control, a chip — must clear it in both dimensions, including when the visible artwork is smaller than the hit area.

- **Never shrink a control below 44px to make a layout fit.** If the space is too tight, the layout is wrong, not the target.

## Safe areas

Four tokens wrap the browser's `env()` insets so a docked element can clear a notch or a home indicator: `--safe-area-top`, `--safe-area-right`, `--safe-area-bottom` and `--safe-area-left`. Each falls back to `0px`.

```css
padding-bottom: calc(var(--space-m) + var(--safe-area-bottom));
```

They report a real value only when the document opts in with `viewport-fit=cover`. **This site does not set it**, so all four resolve to zero here — the pattern is documented because it costs nothing now and becomes correct the moment the flag is added.

## Rules

- **Sections control macro spacing, blocks control micro spacing.** Mixing them is what produces layouts where two bands are closer together than the lines inside one of them.
- **Never apply spacing to a container.** Its job is width and centring; padding on a container fights the gutter that `.padding-global` already sets.
- **Never use a spacer div.** An empty element to create space is a gap or a section utility that was not reached for.
- **Never hardcode a pixel gap.** Every step on the scale exists so that a later re-step moves the whole site together.