Our brand (and design system)'s primary colour is green: how should we indicate success?

Question

Our brand's primary colour is green, and so we've been using it for a while as the primary colour for our design system (clickable buttons, elements, etc. as shown here):

Now I've just realised that we've also been using it to indicate liveliness/success - e.g., showing that something is turned on, etc.

I feel like this is a different semantic usage. Should I try and find a new colour for this new usage, or could I use the same colour in both places whilst using context to indicate the different meaning?

An example of the alternative usage for "on" or "success" is a badge indicating that something is currently enabled, like so, where we're showing which of 4 outputs are on in a compact form. These are not interactive. (They are smaller than they appear here, not sure how to shrink an image in Stack Exchange).

Answer 1

DO NOT RELY ON COLOUR ALONE.

Status indicators should never rely on colour alone.

If you have any colourblind users (approximately 4.2% of people are colourblind) this will make statuses difficult to read.

Always accompany your status indicators with a meaningful/helpful symbol so that your users know exactly what the status means - Does it mean that a process has completed? Does it mean that an answer is valid? does it mean that a value is rising? etc. Help your users with that little extra layer of information

If you're using meaningful symbols then you can go back to using your brand green for success indicators because you're not just relying on the colour anymore ... and who doesn't want their brand associated with success, right?

EDIT for additional help:

Test your UI in greyscale - if it doesn't work then you need to rethink the way your using colour.

EDIT 2 for more accessibility:

Using icons with statuses also helps users with cognitive and situational needs by making the information quicker and easier to understand.

EDIT 3 For better math:

The total colourblind population is around 4.2% - Thanks Azor Ahai -him

Answer 2

When it comes to coloring things like on/off indicators, selection indicators, links, error messages—interface "signals"—use colors people expect to see for those things. Here's where standards help streamline cognition.

Brands on the other hand ought to be unique, distinctive. So using a brand color, teal, as in this case, strays from colors people are used to seeing when it comes to supporting a change in state of something, or the importance of a message.

Two distinct things here: brand, and interface signals. Using elements of the brand design to style signals weakens both.

Our brand's primary colour is green...

...we've also been using it to indicate liveliness/success...

I feel like this is a different semantic usage.

...Emphasis on different.

The purpose of branding is recall, association, recognition, and emotional response. — An example of recall and association is when I say "potatoes", you say... ?? When I say "secret recipe" you say... What comes to mind? If products or services come to mind it's because their branding recall and association strategy was successful. Even more can be explored regarding logo/trademark/phrases recognition and emotional response.

The purpose of coloring interface signals is to support cognitive interpretation, learning, and recall of changing information, or prioritize, or categorize information.

Surely they need to harmonize, but being too similar blurs the lines of distinction, and therefore weakens the support for either particular purpose.

The brand is the hero, all else must support and harmonize, but it stands out. Your site information signals and supporting color strategy is the sidekick...doing the heavy lifting.

Brands, by nature, are unconventional—unique, unexpected. Interface signals and cues ought to follow convention—common, expected. Your brand palette is limited. Conforming your signal/cue color strategy to your brand colors reduces brand impact and interface clarity.

Answer 3

In the example of the first image you show not only the main color but also a dependency relationship between shades of the same color: the light color as the axis and the dark color as the object:

You can define a second dependency relationship similar to the previous one with a third hue bringing the lightest color to a maximum saturation:

---

Result:

This way you can clearly show the differences in status while maintaining the same color gamut:

If you keep the three colors, each one in its representation "layer", you perceptually achieve optimal coherence.

Answer 4

Not a big fan of color only indication. Even if you use different shade of green, if someone has trouble seeing colors properly, they might not be able to tell them apart. Why not just use a checkmark and a cross, that's pretty ubiquitous.

The grey squares should probably be better adjisted for contrast. Maybe make them a little darker or make the cross black (but that would look bad)

Oh and there is no harm in making the squares as large as a capital letter would be.

Answer 5

Use a different green for statuses. Many color palettes accommodate both warm and cool shades of colors; in your case, you could use your cool "brand" green for components, and a warm green exclusively for status indicators.

Answer 6

This won't necessarily apply to all controls and statuses but I noticed a nice little feature on Wix today. They use a symbol to indicate status as well as slightly fading the control. If you're only trying to show the status on the "Enabled" option in the question then this should work for you.