F5.03.1Brand colordesign

Brand colour carries identity; functional colour carries state

Aliases: identity colour · functional colour · role split

What it is

A bank app puts its purple on the mark, on the navigation bar, and on the “transfer failed” banner. People cannot tell whether the purple means “this is us” or “something broke”. Brand colour is how the product is recognised; functional colour is how status is reported. They may share palette machinery. They may not share a role.

Why it happens

Identity depends on a small set of distinctive hues repeating across screens: that purple says you are not inside someone else’s shell. Status depends on a closed set whose members map to actions. Pulling the identity hue into a status slot makes one stimulus carry two codes — “this is me” and “here is what you should do”. Attention is finite, so the codes compete: once purple is environmental in the nav, a purple banner no longer jumps; once failure trains purple as an alarm, the top bar starts to feel like an alarm too.

Functional colour needs stable category boundaries; brand colour needs trademarkable uniqueness. The first hates drift, the second hates looking generic. Split the roles and the brand can change a seasonal skin without touching error red, and error red can change lightness for a dark theme without touching the mark.

Where it stops holding

  • Tiny products with a single chromatic colour will stack identity and the primary action on that hue. Separate “this is the brand” from “this is submit” with placement and shape rather than inventing a fourth purple.
  • White-label and multi-tenant shells may have no recognisable brand colour; functional colour still has to stand alone.
  • Splash and marketing pages are mostly identity and barely have status colour. That is not permission to run the workbench on brand colour alone.

Applying it

  • Make two lists: colours that sit on the mark, launch, and empty-state mascot; colours that sit on validation, badges, and system notices. If they intersect, change one side’s role — do not shave 10% off both.
  • Keep identity colour near navigation, sidebars and the product name; keep status in the functional slots.
  • When you ship a skin or a festival edition, move identity colour only; freeze the functional table.
  • How to check: grey the UI, then colour it in two passes. Brand colour only: “which product is this?”. Functional colour only: “is this success or failure?”. Both answers have to land before the roles are split.

Related

  • Same group: F5.03.2 Overlap between brand and semantic colour causes misreading · F5.03.3 Brand colour should not emphasise anything except the primary action
  • Nearby: F5.02 Semantic colour · F5.11 Scarcity of accent colour
  • Search terms: brand color · functional colour · identity colour

Cards in the same group

Quick Actions

Share

Share this page

ios_share

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