Refactoring UI

Visual design is not talent. It is a small set of systems decisions made once, plus a handful of techniques for creating hierarchy. This skill is those systems and those techniques.

The single biggest cause of amateur-looking UI is picking values ad hoc — 17px here, #3B82F6 there, lighten(5%) for a hover state. Design from a scale, always.

The systems — use these, do not re-derive them

Pick from these lists. Never invent a value that isn't on one.

Spacing and sizing

Base 16px, built from factors and multiples of it: