Value Clustering

Value clustering is the visual system's tendency to group elements of similar brightness together while separating them from elements with different brightness. It makes value contrast more powerful than hue contrast for establishing hierarchy. The eye processes lightness first. Hue comes later. This is why a page can use five hues and still feel organized if the values are clustered correctly. It is a core part of the perception layer that actually ships.

It is not the same as visual hierarchy done through size or position. Those are useful but secondary. Value clustering explains why low contrast designs feel muddy even when colors are technically different. It is not WCAG contrast ratios either. You can pass the numbers and still fail the clustering test if similar values sit in competing roles.

Look at how Linear built their interface. Their sidebar uses dark values clustered together while content lives in a brighter cluster. The separation feels instant even before you read the labels. When they shifted to new accents in 2022 they kept value clusters locked first. The hues could change. The lightness steps could not. The result feels calm at a glance. Figma's own UI does the opposite in bad ways. Similar value grays compete for attention and create noise until you learn the icons.

Notion's database properties use value clustering aggressively. High priority reds sit in a dark cluster. Neutral tags sit light. The eye sorts them before the brain reads the words. This is why their product scales to power users without feeling chaotic. The article calls out value clustering as the foundation of real hierarchy. Hue gets the glory. Value does the work.

Use value clustering when you design complex products with many surface levels, states, and data densities. It earns its keep in design systems, admin tools, and anything users stare at for hours. Do not use it as an excuse to make everything gray. That creates boredom and accessibility issues. The tradeoff is that strong value clusters limit your hue range. You cannot go wild with saturation if the values must stay tightly grouped. Teams that accept this constraint ship cleaner products.

Build the neutral scale first with clear clusters. Then place accents and semantics into the right lightness bands. Test with the squint test. If the hierarchy holds when color disappears you have done it right. Most new designers start with pretty hues and try to fix hierarchy later. It never works.

Perception is the first filter. Value clustering is the first rule inside perception. Get the lightness relationships correct and the rest of the stack becomes easier. Ignore it and no amount of harmony or tokens will save the interface.

Radix Colors organizes their 12 step scales around this idea. Each step has a job because each step has a distinct value. Material 3 does the same with tonal palettes. Both prove that value clustering turns theory into systems that survive at scale.

The eye groups what is similar in brightness and separates what is different. Design with that fact or fight it every time you open a review.