Defining colors in your design system
By: Anvay Choudhary
Tags: Design Systems, User Experience, Design Process, Colors, Product Design

I believe that your team has already or will soon realize the need to create a robust design system. And why not? Design systems bring in consistency, scalability, and efficiency.

No two different color shades for error states,

No longer starting from scratch every time, and

No more hanging around to decide on the corner radius of the buttons.

Instead of focusing on these trivial decisions, designers and developers may now focus on usability and creating delightful experiences. You get the idea. Right?

Well now that your team has decided to invest in creating a design system, the first leg of it must be to lay the foundations. Foundations are the core elements like Colors, Typography, Layout, Icons, etc. Once you get the foundations sorted you may move on to defining components, patterns, and templates.

In this article, I would be sharing the process that we followed to establish our color system.

How do we create a color system?

Following is the outline of the process. We will get into the details later.

This article from UXPin helped us in outlining our process.

Organize all of your colors — identify all of your colors and structure them in logical groups.

— identify all of your colors and structure them in logical groups. Define system to create extended palettes —system to create variations of the base color

—system to create variations of the base color Establish naming conventions — to ensure all stakeholders communicate in a coherent language and not hardcoded hex codes

— to ensure all stakeholders communicate in a coherent language and not hardcoded hex codes Validate new color palettes — to make certain that the new colors meet all of your color requirements and meet accessibility standards.

— to make certain that the new colors meet all of your color requirements and meet accessibility standards. Define usage guidelines — assign colors to global UI elements such as background, text, container.

— assign colors to global UI elements such as background, text, container. Release for testing — push the new color palettes & usage guidelines to stakeholders in your team

— push the new color palettes & usage guidelines to stakeholders in your team Iterate —Incorporate feedback from the team and make changes if required

—Incorporate feedback from the team and make changes if required Release to developers — Developers could then use the color system for their component library

Organize all of your colors

For most of us, all colors could be structured in 4 groups —

Primary colors | Secondary colors | Neutrals | Semantic colors

1. Primary colors

These are the colors that are most frequently used across your UI and imparts a distinct identity to the product. These are usually the colors that a brand sets as their identity. Using brand colors as primary colors strengthens brand awareness.

Primary colors of some renowned brands

2. Secondary colors

These colors highlight or complement the primary color. These are to be used sparingly to make the UI elements stand out. These colors are also usually defined in the brand guidelines.

Usually, a brand may have 1–6 secondary colors. Though, limiting it to three colors would bring in more recognisability and consistency.

If your organization has multiple products in its portfolio, each of the sub-brand (or product) may have its own set of primary and secondary colors

3. Neutrals

These include shades of grey, all the way from White to Black. These are used for backgrounds, text colors, etc, and form the majority of your UI.

I prefer a slight hint of blue to bring more liveliness to these colors.

Neutrals Color Palette

4. Semantic Colors

These are the colors that communicate purpose. They help users convey messages. For example, Green has a positive connotation. We use Green to convey success, confirmation messages, etc.

Create extended palettes

All the designers would agree that the base color is just not enough. We need additional shades of the base color to cater to varied use cases. Once the primary, secondary and semantic colors are identified, the next step is to define a system that will allow you to generate additional shades from them.

Color shades generated from different base colors

Extended palette generator

Our friends at Lyft have open-sourced the algorithm that they used to create their color system — Colorbox. It makes creating color systems very convenient while allowing us to tweak the parameters to suit our own needs.

Snapshot from Colorbox

Colors can be represented in three dimensions -

Hue

Saturation

Brightness

To create a consistent harmonious color system, color palettes must be created using a defined algorithm that takes into account all dimensions -Hue, Saturation, Brightness.

Let us see how Colorbox does that

No. of steps: This defines the number of swatches in the palette. 10-11 steps is a good number to start with. Lock base color: Input the base color, variations of which you wish to create (this could be primary, secondary, or semantic colors) Define hue variation: This dictates how the hue will vary across the swatches in the palette. You may stick with the hue value of the base color throughout all the swatches or add a slight variation.

a) Firstly, define the hue values for swatches at the extreme ends

b) Next, select the curve (Linear / Cubic / Sine…). The curve dictates how hue values would vary between the extreme swatches. Play around and then select. Define saturation variation: The same process for hue goes for saturation and brightness as well

a) Firstly, define the saturation values for swatches at the extreme ends

(I prefer 5–100, as it provides light shades to be used for backgrounds.

b) Next, select the curve (Linear / Cubic / Sine…) that will dictate the saturation values for swatches in between the extremes. Define brightness variation: As we move down the palette the brightness shall decrease.

a) A range of 100 to 35 would cater to most of the colors, though you may want to tweak the end value for some.

b) I recommend using the linear curve if you want a consistent jump in brightness moving from one swatch to the next.

That’s it. You have your color palette ready.

It’s good practice to use the same settings of saturation & brightness for all of your base colors. These would lead to a harmonious color system.

Trim down on color shades

By the end of the previous exercise, you will end up with loads of color shades. Each color palette will have around 10–11 swatches. Though, you won’t require all of those. I suggest to analyze the use cases for colors and trim down on the number. It would do two wonders. Firstly, it will reduce the cognitive load for the designer and enhance decision making speed. Secondly, it would be far easier to maintain the color system.

More options- More cognitive load- More maintenance

Here’s what works for us. We have trimmed down our palette to 5 shades. The first two are mostly for backgrounds. While shades besides the base color are for Hover states, Selected states, etc.

Establish naming conventions

Communicating with stakeholders in logical, understandable names like ‘primary color’ is much easier than communicating in hardcoded values (#1F6AE3). Agree?

What’s even better is that these names may double as Design tokens. Design tokens are named entities that store visual design attributes (spacing, color, typography, etc). These are used in place of hardcoded values to build and maintain a scalable, consistent design system.

Primary colors for Sub-brand X and Sub-brand Y