# Space & Grid

> A 4px base unit, a fluid section rhythm, and a 1440px canvas. Atmosphere is mostly empty space used deliberately.

Canonical: https://brand.craftsmanplus.com/foundations/space

## The unit

Everything spatial is a multiple of 4px. The working scale:

| Token | Value | Typical use |
| --- | --- | --- |
| `--space-1` | 4px | Icon gaps, hairline padding |
| `--space-2` | 8px | Chip and badge padding |
| `--space-3` | 12px | Compact control padding |
| `--space-4` | 16px | Default gap |
| `--space-5` | 24px | Card padding |
| `--space-6` | 32px | Group separation |
| `--space-7` | 48px | Subsection separation |
| `--space-8` | 64px | Section-internal blocks |
| `--space-9` | 96px | Large section blocks |
| `--space-10` | 140px | Maximum section padding |

## Page rhythm

Vertical section padding is fluid: `clamp(56px, 9vw, 140px)`. Sections breathe more as the viewport grows. Never stack two full-padding sections without content between them; collapse to a single rhythm instead.

The content canvas is `min(1440px, 90%)`, centered. Prose measures at most `72ch`. Wide elements, tables, media, and interactive panels may break out of the prose measure but not out of the canvas.

## Radius

| Token | Value | Use |
| --- | --- | --- |
| `--radius-sm` | 6px | Chips, badges, small controls |
| `--radius-md` | 10px | Buttons, inputs, code blocks |
| `--radius-lg` | 14px | Panels, popovers |
| `--radius-card` | 20px | Cards and media frames |

One radius per element. Nested elements step down: a 20px card contains 10px controls, not 20px ones.

## Elevation

Depth comes from three quiet layers, not from heavy shadows:

1. **Surface color.** CRAFTSMAN BLACK ground, then the `--surface-raised` and `--surface-raised-2` tokens; exact values live in [tokens.json](/api/tokens.json).
2. **Hairline borders.** 6% white at rest, 12% on hover.
3. **The lift shadow.** `--shadow-card-lift` adds a deep drop with a faint orange glow. Hover states only.

If an element needs more separation than these three provide, the layout is too dense. Remove something.