Color is a hierarchy tool, not decoration: the 80/15/5 budget
A home screen felt flat, so the instinct was to add more color. The fix was the opposite: spend color like a budget, almost all of it on the one thing the user should do next.
A customer app’s home screen looked, accurately, boring. Flat, grey, nowhere for the eye to land. So my first move was the obvious one: add color. I added more, and it got worse. The screen wasn’t under-decorated, it was un-prioritized, and pouring color on it evenly just gave me a brighter version of the same confusion.
That’s the trap. When a screen feels dead, “add color” sounds like the cure, and it leads you straight to a rainbow where every element is shouting and none of them win. The flatness was never a shortage of color. It was the absence of a single place the eye is told to go first.
Color is a budget, not a paint bucket
The version that finally worked spent color the way you’d spend money you don’t have much of. A fixed allocation, roughly:
- About 80 percent neutral surfaces. White, off-white, soft grey. The page is mostly quiet on purpose. Neutrals aren’t empty, they’re the silence that lets one note be heard.
- About 15 percent on a single confident focal block. One brand-colored card, owning the one action you actually want the user to take next. It’s big, it’s saturated, and it is the only thing on the screen allowed to be loud.
- About 5 percent on status accents. Small badges, dots, and chips that carry state. Confined to tiny shapes, never spread across a surface, never competing with the focal block for the eye.
The numbers aren’t sacred. The discipline is. The moment status colors creep out of their 5 percent and start tinting whole cards, or a second block decides it also deserves to be brand-colored, the budget is blown and you’re back to the rainbow. One focal point per screen is the rule the percentages exist to protect.
When a screen feels flat, the problem is almost never too little color. It’s that you spread what you had evenly instead of spending it all on one thing.
”Add color” and “add hierarchy” are the same instruction
Here’s the reframe that fixed how I think about this. Every time someone (often me) says a screen needs more color, what they’re actually feeling is the lack of a focal point. Color is just the most direct tool for building one. So those two instructions, “add color” and “add hierarchy,” are not two jobs. They’re the same job, and the only thing that separates a screen that works from a screen that doesn’t is whether you applied the color as a hierarchy or as a coat of paint.
Once I saw that, the design got easier, not harder. The hard part of a busy screen was never picking a palette. It was deciding what the single most important action was, and then having the nerve to let everything else recede. The brand color went on that one action. Status got its little chips. Everything else stayed neutral and let the focal block do its job. The screen that had felt flat suddenly read in under a second, and I hadn’t added more color. I’d added less, but aimed it.
How I check it now
The test is a glance. I look at a finished screen for one second, close my eyes, and ask what I remember. If the answer is one block and the action it carries, the budget held. If the answer is “lots of color” or “I’m not sure,” I’ve spread it evenly again and I go reclaim the 80 percent. Sometimes the literal fix is to take color away from three things so one thing can keep it.
It feels backwards the first few times. You’re staring at a dull screen and your hand reaches for more color, and the correct move is to commit nearly all of it to a single block and starve everything else. But that’s the whole point. A flat screen isn’t asking you to decorate it. It’s asking you to decide what matters, and then spend your color saying so.