In a design system's spacing scale, why do the steps usually widen as values grow instead of rising in equal increments?

## Perception is relative How different two spaces look depends on their **ratio**, not their absolute difference. This is a general property of perception, often summarised as Weber's law: the smallest difference people notice grows with the size of the thing being compared. | Pair | Absolute difference | Relative change | Noticeable? | |---|---|---|---| | 8 and 12 | 4 | 50 percent | clearly | | 16 and 20 | 4 | 25 percent | yes | | 32 and 36 | 4 | about 12 percent | barely | | 60 and 64 | 4 | under 7 percent | no | A scale that adds the same amount at every step spends most of its steps on large values nobody can tell apart. ## Three ways to build the progression 1. **Linear**: 8, 16, 24, 32, 40, 48, 56, 64. Easy to remember, but the large end is crowded with near-duplicates, and there is no step below 8. 2. **Geometric (pure doubling)**: 4, 8, 16, 32, 64. Every step is clearly different, but the jump from 16 to 32 falls exactly where most card, list and section spacing is decided. 3. **Hybrid**: 4, 8, 12, 16, 24, 32, 48, 64, 96. Linear in fine 4-unit steps at the bottom, then widening. This is the most common shape because it is fine where components need precision and coarse where layouts need contrast. The hybrid is essentially doubling with midpoints inserted where designers keep asking for them. ## Why distinct steps matter: spacing encodes grouping Spacing is not only decoration. By the **proximity** principle, elements placed closer together are perceived as belonging together. In a **food-delivery app's** menu: - a dish's name, description and price sit 4 to 8 units apart, reading as one item; - separate dishes sit 16 apart, reading as siblings in a list; - menu sections, such as starters and mains, sit 32 to 48 apart, reading as separate groups. Each level of grouping must be **visibly** larger than the one inside it. If the scale's neighbouring steps are too similar, the hierarchy collapses: dishes blur into sections and the menu becomes one undifferentiated column. ## How many steps There is no standard number; many systems settle somewhere around eight to twelve. The forces are: - **Too few steps** force compromises: a designer who needs something between 16 and 32 invents 22 on the spot. - **Too many steps** bring back the original problem: 18, 20 and 22 are all available, nobody can tell them apart, and choices become arbitrary again. - **Usage data** settles it: steps nobody uses can go; the same off-scale value requested by several teams suggests a missing step. ## Relationship to the base unit The progression is built from the base unit, so every step is still a multiple of 4 or 8. The base unit decides the **granularity**; the progression decides **where the granularity is spent**. A system can keep the same base unit and still change its progression, for example by adding 40 for a product with many large panels, without breaking alignment. ## A worked example On a restaurant page, the scale's steps map onto levels of grouping from the inside out: | Level | Relationship | Typical step | |---|---|---| | Icon beside its label | parts of one element | 4 | | Dish name, description, price | parts of one item | 8 | | One dish to the next | siblings in a list | 16 | | Menu header to first dish | a section and its content | 24 | | Starters to mains | separate sections | 48 | Each level is at least half again as large as the one inside it, so the eye reads the structure without borders or dividers. If the scale offered only 16, 20 and 24 for the middle levels, the difference between siblings and sections would be too slight to see. ## Checking a proposed scale - Lay out every step as bars side by side and ask whether each neighbouring pair is clearly different. - Build one real screen, such as a restaurant page, using only the scale, and see whether any grouping level is missing. - Look for steps that exist only because one screen once needed them.