Design Systems : Colors Showcase
How to present colors visually, how to present how to use them in the code and how to pair them for accessibility. Let’s take a look at a few Design Systems that do it well !
Giving full-page examples for Axa
Colors aren’t all about their specific RGB values or their contrast, they’re used for tiny elements and big ones, atoms and full pages. Axa’s DS colors guidelines aren’t perfect, starting by some very specific details about a rework they’ve done before giving the more broad and general information but this last section giving examples of good use in full-page examples is something I’ve rarely seen and that would make a lot of sense if you have a lot of landing pages and fixed content pages in which you want to get creative with everything, colors included !
Decathlon’s Vitamin : accessibility tests built in
I’ve talked about it before but despite being a work in progress Vitamin is already filled with great ideas and good implementations !
I really like how you can easily tell wether a given text color is going to be accessible for body copy and titles. It’s a simple idea but it really ensures everyone who learns about the colors will also be presented with the information right away. Definitely a must do, which is fairly easy to do for Decathlon’s brand, not so much for other companies that may have more colorful styles, but something to really look into in my opinion !
Relais & Chateaux
This french classy B&B company is just so stylish when it comes to displaying colors…
It’s nothing fancy but the rounding on the side just gives a very original and classy appearance to the page !
Of course all designers will notice that one brown one that’s a bit too wide but let’s put that aside and appreciate the attention to details !
Welcome to the jungle : naming for communication
One things that’s very difficult to get right is naming things… You start with “blue” because it’s blue, but then one shade is lighter, so you name it “light blue” and when soon you end up with “slightly lighter blue” and “darkish grey-green”…
It doesn’t look like much but the combination of a name and a number works very well. I particularly like the “Nudes” hue. Giving real-word names to colors like that really helps when discussing them and makes communication a breeeze between all parties involved: the designer knows what a Nudes 200 is and the developer most likely has a variable name that matches. Because after all a DS is first and foremost a communication tool, to help everyone collaborate and this is a very nice example !
Flexport’s Lattitude
This is a very nice mix between Material’s style of gradient color scheme and the common approach to give a few names colors and their variants by Lattitude :
Orange 30 or Warning are the same thing but depending on how you use it and when you need it, you can refer to both and get your point accross. Additionnaly you also get to know for each color if you need to pair it with white or black text so you don’t have to guess.
Skyline, Beneviti’s DS
Can you make things sexier than this ? Probably, but at least it’s functionnal and clear !
Each color has a name, the code to use it, the visual and wether or not it can be used on common background colors… If you’re limited by your tooling when creating your DS, this is something that can be done fairly easily, without missing any information, and it can be extended for all needs, like multiple languages for example.
New South Wales DS
When all else fail, use a table
Being an image it isn’t dynamic, but if you need one bulletproof way to give information about the accessibility of all color combinations, this is a very good way to do it !
Conclusion
There are many things to think about when displaying colors : they’re the heart of most websites and application’s branding and so much are so important ! I hope this overview of some good ways to inform about images gave you some ideas about how to best display them in your current and upcoming work ! Please share good examples you know in the comments too.
