F5.03.3Call to actiondesignresearch

Brand colour should not emphasise anything except the primary action

Aliases: brand-colour overuse · primary button · chromatic highlight

What it is

On a subscribe page the primary button is brand blue, secondary links are brand blue, the selected plan is outlined in brand blue, and the badge is brand blue too. After a full scan, nobody knows what to press. Brand colour as emphasis should be spent on the current task’s main action. Paint every “also fairly important” thing with it, and emphasis turns from an action cue into livery.

Why it happens

Chromatic pop-out depends on uniqueness: when only one patch in view carries high chroma of that hue, it is found first. Brand colour is usually the most chromatic stroke in the product, so it is a natural handle for the primary action. Each extra instance of the same hue cuts uniqueness — saturation has not changed, the number of competitors in the set has. Once links, selected states, badges and progress dots all wear the primary, the submit control is no longer an outlier, and the glance oscillates among candidates.

This is not the same failure as “everything is emphasised, so hierarchy collapses”. What collapses here is the action pointing of that one brand hue. Weight, size and position may still hold a hierarchy; people can feel that the page has ranks, yet cannot tell from colour which control to press now.

Studying it

Use visual search: find “Next” or “Pay” on a screen, record time to first hit and wrong clicks. Independent variable: how often and where brand colour appears (primary button only / button plus links / plus selected stroke and badge). Dependent variables: search time, rate of clicking a secondary link, the spoken answer to “which is the main action?”.

Eye tracking should show gaze bouncing among brand-coloured candidates as their count rises, rather than landing once on the primary button.

Where it stops holding

  • Marking the current IA node in the nav with brand colour is not the same contest as the main action — unless that action sits next to the nav, in which case they still compete.
  • Marketing landing pages can carry more brand colour because they often have one action. The constraint tightens inside a multi-action workbench.
  • A destructive primary should not wear brand colour. That is a separate decision; “brand colour only once” is not a licence to paint a dangerous button.

Applying it

  • Let only one control on a screen fill with brand colour, usually the primary button. Links take weight or underline; selection takes a neutral stroke or wash; badges take functional colour.
  • Secondary buttons become outlined or neutrally filled even when they “matter a lot”.
  • In review, count brand-coloured patches; if more than one is an action, cut back to the primary.
  • How to check: shrink the page to a phone screenshot and squint. If the first thing that jumps is not the thing the user should do, strip the other brand colour and squint again.

Related

  • Same group: F5.03.1 Brand colour carries identity; functional colour carries state · F5.03.2 Overlap between brand and semantic colour causes misreading
  • Nearby: F5.11 Scarcity of accent colour · F3.08 Hierarchy collapse
  • Search terms: call to action · chromatic highlight · brand color

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/F5.03.3