Part 2 : colour

Building a design system — where to start?

(Non Medium members can read this article for free here)

Colour, space and typography — these elements are the building blocks for a solid design system. They are distinctive visual elements to focus on when building a brand. Lets take a closer look at colour…

illustration by Ouch.pics

What we’ll be covering…

Part 1 — First things first
Part 2 — Colour
Part 3 — Size and spacing
Part 4 — Typography
Part 5 — Bonus elements

Colour

A fundamental building block in your design system is colour. Colour is everywhere and will persist in everything you’ll build. From outlines to backgrounds and components, these are made visible to the eye through the use of colour.

Things to consider…

Nathan Curtis has 16 Tips for Setting Up a System That Endures in reference to colour and goes into detail on each point. I’ve highlighted seven of them here worth noting.

1. Stabilise Brand Colours Quickly — Decide your essential brand colours early, because they spread widely, quickly.
2. Involve Brand (If You Alter a Brand Colour) — Brand colours are the brand team’s territory. So discuss adjustments with them and defer to their judgment as needed.
3. Drop the Neutral Neutrals — Provide a few light grays and a few dark grays to achieve useful contrast, but don’t get wishy washy wireframey. Consider avoiding medium grays in between.
4. Go “Digital Blue.” Everybody Else Does. — Links have always been blue, perhaps since the dawn of the first browser. When (not if ;) ) you go with your “Digital Blue,” choose an accessible one and make sure it doesn’t clash with the brand’s own blue, or red, orange, purple, or green.
5. Define How Theming Works — Identify how theming works, particularly via reference to specific UI element properties in play. Just as important, articulate which — if not most — elements are off limits.
6. Check Contrast Early & Ritually — Any system designer responsible for colour must be familiar with WCAG 2.0 rules…