A spacing scale that breathes
Every step gets its own clamp over the same range, so the scale grows as a whole and the relationships between steps hold.
A spacing scale that breathes
Every step gets its own clamp, so the whole scale grows with the viewport at once and the relationships between steps hold.
Why the growth factor is not 1
Every step is clamped between its own minimum and that minimum multiplied by the growth factor. Growth of 1.35 means the largest viewport gets 35% more space than the smallest.
Applying the same factor to every step keeps their ratios constant, which is what makes the scale still look like a scale at both ends. Growing the large steps faster than the small ones — which looks reasonable — pulls the rhythm apart at one end or the other.
Small steps barely need to grow at all: 4px to 5px is invisible. Some systems freeze the bottom two steps and only make the larger ones fluid, which is a legitimate simplification.
One scale, used everywhere
The value of a spacing scale is not the numbers, it is that there are only eight of them. Every gap, padding and margin picks one, and a layout built that way has a rhythm that arbitrary values never produce.
The moment somebody types margin: 13px, the scale has stopped doing its job.
Fluid spacing and fluid type together
If the type scales and the spacing does not, the relationship between them changes across the viewport — text grows into its own margins. Making both fluid over the same viewport range keeps the proportions steady.