How you get here
A badge is the cheapest way to put a fact on a row, and it looks deliberate. So every attribute that someone wants visible becomes a badge, and every badge wants its own colour so it can be told apart from the others.
The tipping point is unremarkable. Three badges is a row. Six is soup, and it happens one reasonable request at a time.
How to recognise it
- More than about three chips on one row or card.
- Two badges that mean different kinds of thing — a lifecycle state and a billing plan — rendered identically.
- The same hue used for two meanings anywhere in the product. Purple for "draft" in one place and "re-opened" in another is the documented example from our own ticket page.
- Every badge at the same saturation, so nothing is louder than anything else.
- Squinting turns the list into confetti rather than showing you where to look.
Why it fails
Colour is preattentive: the eye spends it before you read a word. That makes it powerful and strictly limited. The budget is roughly three semantic colours plus neutrals, each with exactly one meaning.
Six hues do not give six channels of information. They give zero, because the reader cannot hold the mapping, so they stop trying and read the text instead — at which point every badge is a slower version of a word.
There is a second failure underneath. Most of what becomes a badge is not a status at all. "Annual plan" and "EU region" are attributes. Rendering an attribute with the same visual weight as "needs a human" asserts they are the same kind of fact, and they are not.
The way out
- Decide what the row is for, and keep the one or two facts that change what someone does. The rest belong on the record.
- Neutral by default. Grey chips for everything informational. That alone fixes most of it.
- Spend colour on exceptions only, at most three meanings — amber for needs-a-human, rose for broken, emerald for a positive delta — and never let a hue carry two meanings.
- Encode roles with structure, not hue. Position, indentation and grouping show what things are; colour shows what needs attention.
- Back every colour with a word or an icon, so the row still reads in greyscale.
The test
Blur your eyes, or shrink the browser to 25%. A good list shows a few points of colour where attention is needed and grey everywhere else. Badge soup looks like a bag of sweets, and in that state the urgent row is genuinely no easier to find than the routine one — which is the whole cost.