vocab.design

color · tokens

Brand color

also called brand palette (community), corporate colors, signature color (community)

The colour an organisation owns in a customer's memory, carried into a product as the seed for its palette rather than used directly on every surface.

A brand colour is a recognition asset first and a design token second. It is chosen so that a logo, a shopfront, a delivery van and an app icon all read as the same company before anyone reads a word, which means the requirements on it are memorability and distinctiveness inside a category, not contrast ratios or elevation. That is why brand colours are usually specified in an ink standard as well as in hex: the number that matters to a print run is not the one a stylesheet needs.

Carrying it into an interface is a separate job, and the mistake is treating the brand value as a paint bucket. A single hex value cannot serve as a button fill, a link colour, a focus ring, a hover state and a tinted background at once, because those uses have different contrast obligations against different surfaces. What the product actually needs is a ramp derived from the brand hue, a foreground on colour paired with each step, and a set of tokens naming the jobs rather than the hue. Material’s dynamic colour is the industrial version of this idea, generating a whole tonal scheme from one seed, and Material You goes further by letting the wallpaper supply the seed instead of the brand.

The discipline is restraint about area. A ratio like sixty thirty ten is the usual guard: neutrals carry most of the surface, a secondary tone supports, and the brand hue appears on the few elements that should be unmistakable, typically the mark and the primary action. Spend it everywhere and it stops signalling anything, and it starts colliding with meanings the interface has already assigned. A brand red next to status colours is the classic collision, since the interface now uses the same hue for “us” and for “this went wrong”. Where the brand hue is genuinely the interface’s accent colour, say so once in the token layer and let every component read the token.

Ownership is looser than the word suggests. Colour trademarks exist and a handful are famous, but they are narrow, category bound and hard to win, so almost every product’s claim on a colour rests on consistency rather than on law. What makes a colour feel owned is that it turns up in the same places, at the same value, for years, which is an argument for pinning the exact value in a shared source and against redecorating each time the marketing site is redesigned.

Which word?

If you wantsay
the colour the company owns, before it becomes UI tokensbrand color
one colour in, a whole palette outseed color
a colour that must not flip with the themestatic color
the one colour reserved for the primary actionaccent color
colours that report an outcome rather than a brandstatus color

Implementations

Specimens illustrate the concept; for production use, start here.

fluentBrand colors

Sources