# Spacing and shape

An eight-step spacing scale and three corner radii.

| Token | Size | Typical use |
|---|---|---|
| `--at-space-1` | 2px | Tag padding |
| `--at-space-2` | 4px | Gap inside a field |
| `--at-space-3` | 8px | Inline gaps, input padding |
| `--at-space-4` | 12px | Table cell padding |
| `--at-space-5` | 16px | Stack gaps, card and page padding |
| `--at-space-6` | 24px | Dialog padding |
| `--at-space-7` | 32px | Empty state padding |
| `--at-space-8` | 48px | Large separations |

Radius: `--at-radius-0` (0), `--at-radius-1` (6px: inputs, buttons, tags), `--at-radius-2` (10px: cards, dialogs, empty states). Corners are softened slightly so screens feel friendly without looking like a toy. Shadows belong to [elevation](../elevation/). Prefer the [stack and inline](../../components/layout/) helpers to spacing things by hand.