Defining colors in your design system
Complete guide to build scalable, harmonious color system
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.
- Define system to create extended palettes —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
- Validate new color palettes — 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.
- Release for testing — push the new color palettes & usage guidelines to stakeholders in your team
- Iterate—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
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 -
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
Design token allows attributes (background color) to inherit different values
Alright, so how do we name colors?
Our color palettes are comprised of a base color and extended palette. The extended palette includes the additional shades generated from the base color.
Colors are named as ‘Color label-XX’ (for ex. primary-100)
The color label represents the base color, while the ‘XX’ number represents different shades. It is highly recommended to name colors based on their functions and not the hue. Ex: Primary, Success, Error instead of Sea green, Green, Red.
Here’s how the value of XX is determined —
Base color: 100
Shades darker than base color: >100
Shades lighter than base color: <100
Naming for Primary color palette
Naming convention applied on other palettes
Validate new color palettes
By now you should have palettes for primary colors, secondary colors, neutrals, and semantic colors. Ideally, these palettes should cater to each and every UI element in your design.
To validate colors, identify few key UI journeys of your product. Next, start replacing the colors in your design with newly created colors. Ensure that you don’t miss out on anything — background, text, etc. Check if the colors are serving the purpose they are intended to. For example, a secondary color must stand out to grab user attention.
Another important consideration is that of accessibility. Check if there is sufficient contrast between the background and text elements. You should strive to comply with WCAG Color Contrast guidelines.
Here’s the snapshot of the guidelines.
WCAG Color Contrast Guidelines
UI elements with the sole purpose of decoration and disabled elements need not follow this guideline.
Stark is a handy plugin that will allow you to effortlessly check if the colors meet accessibility standards.
Define usage guidelines
Believe me, just restricting designers to select from a predefined set of colors would not bring consistency. We need to take a step ahead by defining the usage guidelines for these colors.
Which shade should I use for secondary text?
What should be the background color of CTAs?
What colors are to be used on disabled elements?
Our job should be to ensure that all designers or developers have the same answer to each of these questions. IBM does a great job in defining color usage guidelines in their Carbon Design System.
Release for testing
Design systems may wither if not accepted or implemented in their true essence in an organization. The sooner you onboard stakeholders to the design system, the better it is. Everyone’s support and inputs would make this a system that keeps evolving into a better one.
Push the defined color palettes along with usage guidelines to the stakeholders. Stakeholders may test the same in few of the UI journeys and validate the color system. Incorporate their feedback and make iterations to the color system if required.
Release to developers
What now? You have already built your color system and have also validated it. The next step is to push this color system to the developers. Developers will incorporate the design tokens for colors into their library. These will allow them to assign colors to UI elements using design tokens (variables) instead of hardcoded values.
Now, if you are to change your primary color from sea green to sky blue, just a change in a single line of code will implement the new primary color in all the UI elements.
I hope this article would help you in defining colors in your design system. Let me know in the comments if you wish to learn more on defining Typography and Layouts in the design system. Cheers.
If you are just starting on Design System,
Nathan Curtis has lots of learnings to share with you. Here are the links to his article on Colors and Design tokens that you may find insightful-