Spacing

Spacing groups what belongs together and separates what doesn't. Every step is a multiple of 4px, which is also how most of coach-admin is already written: 81% of spacing values in the code sit on this scale.

Scale

0 · 0pxInside a control: icon to label, badge padding.
1 · 4px
2 · 8pxInside components: control padding, gaps between related items.
3 · 12px
4 · 16px
5 · 20pxBetween groups: form fields, cards in a grid, card padding.
6 · 24px
7 · 28px
8 · 32px
10 · 40pxBetween sections and page regions.
12 · 48px
14 · 56px
16 · 64px
20 · 80px
24 · 96px
0.5 · 2pxInside a control: icon to label, badge padding.
1.5 · 6pxInside components: control padding, gaps between related items.
2.5 · 10px

In Tailwind, use the step: p-4, gap-2, mt-6. In CSS, use --spacing(4). The step number times 4 is the size in pixels.

Choosing a step

Related things sit close. A label and its input, an icon and its text: steps 1 to 2.
Groups are separated by more than their contents. If fields inside a group are 4 apart, groups are 6 or 8 apart.
Use logical spacing. ps-4 and me-2 (start and end), not pl-4 and mr-2, so layouts mirror in RTL.

Density

coach-admin has dense screens (client lists, invoice tables) and calm ones (onboarding, a single workout).

Density	Where	Row padding	Gap between controls
Compact	Data tables, the exercise library	`py-2`	`gap-2`
Default	Forms, cards, most screens	`py-3`	`gap-3` or `gap-4`
Comfortable	Onboarding, empty states, marketing	`py-4` or more	`gap-6`

Don't mix densities inside one component.

Snapping off-scale values

The audit found values that sit between steps. During migration, snap them to the nearest step:

In code	Uses	Becomes
30px	135	8 (32px)
5px	128	1 (4px)
15px	92	4 (16px)
3px	50	0.5 (2px) or 1 (4px)
18px	48	4 (16px) or 5 (20px)
7px	39	1.5 (6px) or 2 (8px)
14px	136	3 (12px) or 4 (16px); see QUESTIONS Q4

Related: Layout, Spacing tokens.