The one accent colour rule, and why it makes buttons get clicked
When the accent colour is everywhere, the main button gets lost. The rule of one accent per screen, how to apply it, and what does the other jobs instead.
Accent colours stop working in the same way every time: the designer likes the colour, so it goes on the button, then the links, then the icons, the badges, the headings and the chart. By the end, the button that mattered is one of twenty things in that colour and the eye has no reason to land on it.
The rule
One accent, on the call to action, and nowhere else on that screen.
It is strict on purpose. A rule with exceptions gets exceptions added until it stops being a rule. This site follows it: amber goes on the button that buys or starts something, and nothing else on the page is filled amber.
What does the other jobs
| Job | Use this, not the accent |
|---|---|
| Links in text | Underline, in the text colour or a muted blue |
| Section headings | Weight and size |
| Secondary actions | An outline or text button |
| Status and tags | Soft pastel tints, each with one meaning |
| Selected state | A raised surface or a border |
Why it works
Attention follows difference. When one element is the only saturated, warm or bright thing on a screen, it is seen first without the user deciding to look. That is also why the accent should be the colour that contrasts most with your ground: amber on blue and paper, lime on violet and black.
The failure mode: accent drift
It rarely breaks all at once. A badge gets the accent because it looked nice, then a chart line. Write the rule down where whoever builds the next screen will read it, whether that is a person or Claude, and check new screens against it. We wrote about keeping these rules in the build in give Claude Code your design system.
Warm Storefront UI is this site's design as a skill, and the one-amber-action rule is in it, along with the amber button's same-hue edge and 1px press, and five pastels that each carry one meaning so nothing else needs the accent.
Questions
What is an accent colour in UI?
The one colour reserved for the thing you most want the user to notice or press. It works by contrast with everything else, so it only works if it is rare.
Can a page have two primary buttons?
It can, but the user then has to choose which one the page means, and usually picks neither. One primary action per screen, with everything else as secondary or text buttons, is clearer.
What do I use instead of the accent for highlights?
Weight, size, position and neutral surfaces. A bold heading, a raised card or a tint of the background can mark importance without competing with the action.