Brand Color in Interfaces

Common conflicts, and how to resolve them

• The brand colour fails contrast as a button fill with white text. Resolve by building a ramp and using a darker step for interactive surfaces, keeping the original for large brand moments.
• The brand colour is red or green, colliding with error or success. Resolve by shifting the semantic hues slightly and always pairing them with icons.
• The brand colour is unusable in dark mode. Resolve by defining a separate dark-mode step, usually lighter and less saturated.
• The brand colour is used everywhere and stops signalling interactivity. Resolve by restricting it to interactive elements and brand moments only.

Making a brand colour work in an interface

1. 1

   Check it as an action colour first

   Filled button, white or dark label, measured. Many brand colours fail this and need a darker interface variant.

2. 2

   Decide whether it is also the focus colour

   It usually should be, which means it needs to clear 3:1 against every surface it can appear on.

3. 3

   Keep it away from semantic roles

   A green brand needs a different green for success, or neither reads as meaning anything.

4. 4

   Derive a ramp, not a swatch

   Hover, pressed, disabled, soft background, border. One value cannot serve six states.

5. 5

   Write down where it is not used

   Large surfaces, body text, and anything that must not read as interactive.