space

Space is the cheapest material and the one generated interfaces waste most. Uneven spacing is the first thing an experienced eye sees and the last thing a model fixes.

The scale

Everything sits on a 4px grid. The useful stops:

2 · 4 · 6 · 8 · 10 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 64 · 96

Choose a value from this list, never in between. If 14px "looks right", the neighbouring elements are wrong; fix them and 12 or 16 will look right.

Related things sit closer than unrelated things. A label to its input: 6. Two inputs in a form: 16. Two sections of a form: 32. The ratio between levels is what makes structure visible without lines.

Density

Decide it per surface, not per component: