The spacing ladder

EDS spacing is one ladder, and the rule for reading it is a single idea: the closer the relationship, the smaller the space. A page holds sections — 24. A container holds children — 16. A cluster holds siblings — 12. A selectable holds its own label — the inset. And the closest relationship in the whole system, a control and the bar it sits in — 8. Every step down the ladder, one step closer.

The taxonomy has five levels: page → container → cluster → selectable → seat. The page / container / selectable trichotomy is Eric Singhartinger's — a selectable is the atom, the thing you can press: a button, a chip, a tab. Cluster and seat are EDS's additions, between and below.

The second idea follows from the first: a control's height is never authored. It is the label's cap height plus an inset above and below, and the vertical padding is whatever makes that true. An agent with this skill produces a 36px-tall comfortable button without ever typing 36.