How many stops a scale has trades fine control against upkeep
Aliases: stop count · 13-stop scale · palette resolution
What it is
A blue in 13 stops lets hover, pressed, disabled and wash land exactly. Three months later every hue must be kept at 13 values in light, dark and high contrast, each with a legal foreground, and nobody can move the table. Stop count is resolution: denser stops control local states better and make the whole table more expensive. Pick it from the number of states you will actually name, not from how many the generator emits.
Why it happens
Upkeep grows with hues × themes × stops × paired foregrounds — not merely linearly with stop count. Extra stops with no matching state become designer toys: the same hover is 400 in one component and 450 in another, and the set forks. Too few stops crush several states onto one colour, so pressed and disabled cannot split. The right resolution is “each state that must be named gets its own stop, plus very few empties for later”, not “a professional-looking dozen”.
Generation is cheap; maintenance is not. An algorithm emits 21 stops in a second; review and regression cannot follow, and the extras age in the product: nobody dares delete them, nobody remembers why they exist.
Where it stops holding
- Tiny products with one or two hues pay almost nothing for density; they can run denser.
- Continuous scales for data visualisation are a different ruler; do not compare their stop counts with UI state scales.
- High-contrast themes often cannot use that many mid stops. The same product can be dense in light and sparse in high contrast, but it must admit two resolutions rather than pretend it is still 13.
Applying it
- List states first: default fill, hover, pressed, disabled, wash, dark type. Count classes, then grow stops from there, not from a 50–950 template.
- A new stop needs a use. Stops without a use stay off the table.
- Each quarter, count which stops are actually referenced; merge long-term zeros.
- How to check: open the scale, hide the numbers, ask of each swatch “what does this do in the product?”. Unanswered swatches are surplus resolution.
Related
- Same group: F5.13.2 Name stops with index numbers, not semantic words, so meaning does not drift across versions · F5.13.3 Algorithmic ramps still need hand correction where a stop jumps · F5.13.4 Once a scale is shipped, changing how many stops it has ripples through every referencing component
- Nearby: F5.09 Perceptual requirements of palettes · F5.08 Hierarchy in dark mode
- Search terms:
color scale resolution·palette stops·design token count