# Spacing

> Three spacing scales named by what sits on either side of the gap: layout between page regions, section between groups inside a region, component inside one part. Each step resolves per breakpoint, so a page tightens on tablet and mobile without new tokens.

## Layout

Between page regions: the nav and the hero, one section and the next.

- `spacing/layout/none`
- `spacing/layout/xs`
- `spacing/layout/sm`
- `spacing/layout/md`
- `spacing/layout/lg`
- `spacing/layout/xl`

## Section

Between groups inside a region: a heading and its grid, one row of cards and the next.

- `spacing/section/none`
- `spacing/section/xs`
- `spacing/section/sm`
- `spacing/section/md`
- `spacing/section/lg`
- `spacing/section/xl`

## Component

Inside one part: an icon and its label, a field and its hint.

- `spacing/component/none`
- `spacing/component/xs`
- `spacing/component/sm`
- `spacing/component/md`
- `spacing/component/lg`
- `spacing/component/xl`