Photo by Balázs Kétyi on Unsplash

As a contractor, I frequently work with different companies and teams which included some good designers. However, regardless of where each design team might be in terms of skill level, as soon as you start handling multiple designs, organising all the elements between them starts to get tricky.

This is where most people start thinking about organising a design system to follow, a part of which is the colour pallet. This is used to help ensure visual and semantic consistency throughout the project and facilitate both design and development (thank goodness for variables).

Most of the times I’ve seen this style guide take a shape like the one on the side here.

This might seem like the logical way of organising your pallets, but, as I’m about to argue, it comes with its own set of problems.

Why is this a problem?

“But Goncalo, surely it’s alright to name a blue colour ‘Blue’? What else would I call it?”

That is a fair point, so let’s see where that leads by doing a hypothetical project, as a thought experiment.

We start doing exploratory designs and quickly create styles for the brand colours which happen to be blue and purple. We even label them as brand colours, so it doesn’t get messy down the line.

Now we can start working on the actual design. In the process, we end up adding a few more colours, for things like buttons, alerts, infoboxes, and all those fairly standard design elements.

So far so good, but let’s keep going. In the real world, a designer’s work is subjected to frequent changes. This uncertainty comes as part of the job, after all. So let’s say the brand team decide the blue needs to be lighter. This is a problem for us because a lighter blue might get confused with the information colour. We can change it to a ‘Success Green’, but then we need to change the button colour as well.

Before we know it, we ended up with our library very untidy, and with its colours mislabelled.

“Granted, but you could always just relabel the colours”

Sure, and it would be easy to do with a handful of them, but doing it with a library of dozens or even over 100 colours isn’t so easy. Besides, if handoff has already happened, which in the agile era is more likely than not, the developers will also need to go and change their code to match.

So this problem extends beyond design and is a hassle for our coding friends too.

How can we do it differently?

There are a few libraries I’ve found at the time of writing which did it differently, and they tend to be development frameworks, not design. Let’s have a look at a couple of examples: