Work out ui spacing scale instantly with clear inputs, formula shown and shareable results.
Each token multiplies the previous by the growth ratio starting from the base unit, producing a geometric spacing scale. A geometric scale keeps the perceived jump between spacing tokens consistent, which is why a 4, 6, 9, 13 scale reads better than 4, 8, 12, 16 at large sizes.
Spacing scale
token k = base unit x ratio ^ k
token k = base unit x ratio ^ k. Each token multiplies the previous by the growth ratio starting from the base unit, producing a geometric spacing scale.
A geometric scale keeps the perceived jump between spacing tokens consistent, which is why a 4, 6, 9, 13 scale reads better than 4, 8, 12, 16 at large sizes.
Enter base spacing unit, steps in the scale, growth ratio. The defaults shown are a realistic worked example — swap in your own figures to get a result you can use.