The number of accent points on one screen needs a budget
Aliases: accent budget · one point per screen · chromatic budget
What it is
Home shows an orange primary, an orange unread dot, an orange promo strip and an orange “new” badge. In each mock, that thing is “the focus of this screen”. Users walk in with one glance, and colour only has a few slots. Accent points on a screen need a budget — decide how many places you can spend, then let tasks compete, rather than letting every module speak for itself.
Scarcity explains why accent works; flood explains how it dies. The budget is how many places are still allowed to live on this screen, now.
Why it happens
One fixation can privilege very few chromatic outliers; designing for one or two is the stable case. The budget is a hard spatial constraint: every accent in the same viewport is bidding for those one or two priority processes. Module reviews never see the sum — four modules with one each become four. So the budget has to be counted at viewport level, not declared at component level as “this is emphasis”.
There is no magic number. One is safest; two must split roles (one action, one status); three start to cancel. Once the budget is spent, a new accent can only replace, not stack.
Where it stops holding
- Long pages count per screen, not per page. The screen below the fold may have its own budget, but while both are visible during a scroll they can still be seen together.
- Multi-column desktops stitch several viewports; add up what is visible at once.
- A system notice entering from the edge temporarily occupies a slot; in-app budgets should leave room for that.
Applying it
- Cap key templates — for example, workbench main viewport ≤ 2 accent points — and define a point (one contiguous accent patch, not a pixel).
- In review, print or grey the page and paint only accent colour, then count. If over, product chooses what to delete; design does not “harmonise it a bit”.
- Badges, unread dots, primaries and promo strips share one budget table. No private exceptions.
- How to check: screenshot one screen, circle every non-neutral colour patch, count. Over-budget shots do not pass unless one patch is explicitly a replacement, not an addition.