Stage 2 · Lesson 2 of 7
A spacing system and white space
A is a small, fixed set of distances you use everywhere. It is often based on 4 or 8 pixels: 4, 8, 12, 16, 24, 32, 48, 64. Picking from a set, instead of eyeballing every gap, keeps screens consistent and speeds up decisions.
It also maps neatly to tokens in code later. Use space to show which things belong together. Items in a group sit closer to each other than to items outside it.
This is the . Generous around a group makes it easier to scan, not emptier.
Common trapequal spacing everywhere, which removes grouping, or starting tight and cramming more in; start with more space than feels natural and take some away.
A question to check yourself, an AI practice session and 2 cheat sheet entries come with the full roadmap. Unlock
Resources for this stage
Start with· follow one of these
- GuideFreeMaterial Design 3
Google
Free, detailed foundations on layout, colour roles and type scales from a system used by millions of apps
- BookPaidRefactoring UI
Adam Wathan and Steve Schoger · About $99
Paid, practical visual design tactics explained for people without a design background
Practise
Keep handy
Also worth your time
How size, colour, contrast and spacing create reading order, with examples