You are here
In this article, we will cover the following:
- Decide where the colors are kept
- List the purposes
- Ask the three questions and count
- Choose one color for each family
These are lessons 2 to 5 of the thirteen it takes to build a design system. Lesson 1 was the first article in this series, Introduction to design tokens. Lessons 6 to 13 come in later articles. The full list is below, each with an example.
Learn what a design token is and the words used for its parts, so the rest of the steps make sense.
One place where people edit the colors, one file that is the true copy, and copies made from it for every place that needs them.
Write down what your screens need to tell users. Each line is one purpose.
For each purpose: how many versions, is it shown with color, does it have a set of equals. Add up the color families.
Pick the one color that stands for each family. This is the only step you do by eye.
Lessons 6 to 13Coming in later articlesChoose a shade for each part · Organize for documentation · Name where each color is used · Let a tool write the files · Write the rules down · Build a checker · Change the existing screens over · Look at every screen
Make the fill's family, its lighter and darker versions, then choose one for the background, the border, the icon, the words, the fill of a badge, and the words on it, and check each one for contrast.
Write the six choices down in one place: the purpose, the part, the green, and what it was checked against.
Give a name to each place a color goes, once for light screens and once for dark screens.
A program turns the names into the files the website uses. Nobody types them by hand.
Describe each name and when to use it, so that people and tools can look it up.
A tool that stops anyone from typing a color by hand when a name exists for it.
Go through the screens that already exist and replace every hand-typed color with its name.
Open each screen, in light and in dark, and check with your own eyes that it looks right.
Lesson 2 · Decide where the colors are kept
Before a single token is written, decide three things: who edits the tokens, where the one true copy is kept, and which places need a copy of them.
for output
Three decisions in order. One place where people edit, one place where the true copy is kept, and as many generated copies as there are places that need them.
Author. Choose one place where tokens get edited. It can be a design tool, a code editor, or a token platform. Every other tool may read. Only this one writes.
Store. Choose one place that holds the true copy. It is the place you would fix a mistake first. Everything after it is a copy.
Consume. Choose as many as you need: the design file, the documentation, the website's code, a phone app.
Lesson 3 · List the purposes
Colors on a screen are not decoration. Each color is there to tell the user something. Try starting by making a list with what your screens need to tell users. Each line on that list is one purpose: one job that color has to do on the screen.
Most screens have the same four purposes. The fifth is anything only your product needs.
- 1What is background. The page, the boxes, the lines, the writing. This is called the ground. It is usually a gray or an off-white, and everything else sits on it.
- 2What to press. One button on the screen is the main one. It gets its own color so your eye finds it. This is the main action.
- 3Action Response. After you do something, the screen tells you: success, warning, or critical. That is usually green, orange, and red.
- 4Something to know. A message that is not good news or bad news. It's just a plain note.
- 5Other considerations. A chart with six kinds of data needs six colors, one each. A calendar shared by four people might need one color per person. A map of train lines needs one color per line. These are things only your product has.
One ordinary screen with five numbered markers. A line joins each number in the list above to the same number on the screen. Marker 5 is on a bar chart with three colors for three kinds of spending. Marker 4 is on the blue message. Marker 3 is on the green, orange, and red messages. Marker 2 is on the filled button. Marker 1 is on the page behind the card.
Case Study: Shopify
Shopify is a company that makes software for running an online store. It publishes its design system, which is called Polaris, so anyone can read how its colors were decided. Shopify does not name its colors "green" or "red". It names them by what they tell the user, and it calls each one a color role. Its documentation says that every use of color is tied to a specific meaning, and that color is not used as decoration.
Here is Shopify's list next to the five purposes from this lesson. The numbers are the same ones as in the list and on the screen above.
| From this lesson | Shopify's name | What Shopify uses it for | Color |
|---|---|---|---|
| 1What is background | Default | The whole screen: page, cards, text | Grey and white |
| 2What to press | Brand | The main button | The darkest gray |
| 3Action Response | Success | The action worked | Green |
| 3Action Response | Warning | Something needs the user's attention | Yellow and orange |
| 3Action Response | Critical | An error, or something is blocked | Red |
| 4Something to know | Info | Tips and offers | Light blue |
| 5Other considerations | Magic | Features that use artificial intelligence | Purple |
| 5Other considerations | Emphasis | What is selected in an editor | Blue |
A table with eight rows. Each row has a numbered purpose from this lesson, the name Shopify gives it, what Shopify uses it for, and a swatch of the color. The names and color values come from Shopify's public Polaris documentation and token files at github.com/Shopify/polaris. Polaris also names a few roles for special places, such as form fields and the menu, which are left out here. Shopify uses orange when something needs attention and a lighter yellow when it is not urgent yet, and it gives the yellow its own name, Caution. The count in the next lesson keeps them apart, because they are two families.
The next four examples are Shopify's own pictures. They come from its color documentation and show real parts of the screen a store owner uses. The numbers are added here and match the list in this lesson.
1233
Example 1. A Shopify order screen with markers 1, 2, and 3. Two white cards on a gray page, a dark gray button, a yellow label, and a green label. Image © Shopify, from github.com/Shopify/polaris.
Example 2. Three Shopify messages, one per row, each with marker 3 and its meaning written beside it. The first has a green icon, the second an orange icon, and the third a red icon. Images © Shopify, from github.com/Shopify/polaris.
4
Example 3. A light blue Shopify message with marker 4, and four swatches of blue under it. Image © Shopify, from github.com/Shopify/polaris.
5
5
Example 4. Two Shopify pictures, each with marker 5. The first is a text editor with one purple button in a gray toolbar. The second is a row of three products with a blue outline and a blue tab. Images © Shopify, from github.com/Shopify/polaris.
Lesson 4 · Ask the following three questions and count
Your list of purposes says what the screens need to tell users. It does not say how many colors that takes. These three questions turn the list into a number of colors. Each question stops one common mistake.
You take the list one line at a time and ask the question about that line. A version is one separate message that the user has to tell apart from the others. Most lines on the list have only one version. The background has one. The main button has one. Take "action response". A user presses Save on a payment form. The screen can answer in three ways. Success: "Saved." Warning: "The card expires next month." Critical: "The bank declined this card." Those are three versions. The user has to tell them apart at a glance, so each one needs its own color. Shopify has the same three.
Both are red. The user cannot tell which one is only a warning.
Two versions, two colors. Warning is orange. Critical is red.
Question 1, general example. Two small screens with the same two messages. In the first, both messages are red. In the second, one is orange and one is red.
Answer: three. Action Response has three versions, so it needs three colors.
Question 1, Shopify example. Three parts of Shopify screens, one per row, each with its meaning written beside it. The first is a message with a green bar. The second is a form with a pale orange notice under a phone number field. The third is a list of three products where one has a pale red label. Images © Shopify, from github.com/Shopify/polaris.
Some things are shown another way. A heading is more important than the text under it, and that is shown by making the heading bigger and bolder. A button that cannot be pressed yet is shown fainter. Neither one needs a new color. Shopify's main button is a third example. It is the darkest gray, taken from the same gray as the background, so "what to press" did not need a new color there.
The heading is purple and the button that cannot be pressed is teal. Three colors, and the main button no longer stands out.
The heading is bigger and bolder. The button that cannot be pressed is fainter. One color, and no new ones.
Question 2, general example. Two small screens with a heading and two buttons. In the first, the heading is purple, one button is blue, and one is teal. In the second, the heading is large and dark, one button is blue, and the other is the same blue but fainter.
AB
Why this way? Shopify's documentation says its screens are black and white on purpose, so that anything in color stands out. Color is kept for meaning: green for success, orange for warning, red for critical. A blue or green main button would sit on every screen and compete with those. A dark gray button still stands out against a white card, and it leaves the colors free for the messages that need them. So "what to press" adds zero new colors.
Question 2, Shopify example. A Shopify picture with marker A on a dark gray button and marker B on a light gray button in the same row. Image © Shopify, from github.com/Shopify/polaris.
A set of equals is two or more versions of the same kind that are equally important. Two teams on a scoreboard. Four people on a shared calendar. Six kinds of data on a chart. Each one needs its own color, and no color may look stronger than the others, so you choose the colors together. Most products have no set of equals. Shopify has none, so both examples here are general ones.
The score is even, but Team A looks like it is winning.
Two colors chosen together, equally strong. Neither team looks ahead.
Question 3, first general example. Two scoreboards with an even score. In the first, one team is strong red and the other is pale. In the second, the two teams are blue and orange of equal strength.
Ana's events are strong blue and Ben's are pale. Ben's events look cancelled or less important.
Two colors chosen together, equally strong. You can tell whose event it is, and neither person's events look less important.
Question 3, second general example. Two shared calendars with four events, two for each person. In the first, one person's events are strong blue and the other's are pale. In the second, the two people have blue and orange of equal strength.
Then count
The answers to the three questions are the result. A color family is one color in all its shades, from light to dark. Green is one family. Red is another. Go down your list. If a purpose is shown with color, write down how many versions it has. If it is shown another way, write zero. Then add the numbers.
| What the screens need to tell users | Shopify |
|---|---|
| What is background | 1 |
| What to press | 0, it uses the gray |
| Action Response | 4 |
| Something to know | 1 |
| Other considerations: features that use artificial intelligence | 1 |
| Other considerations: what is selected in an editor | 1 |
| Color families needed | 8 |
A table that adds up Shopify's color families, with a swatch of each color beside its number. Shopify's list comes to eight: gray, green, yellow, orange, red, light blue, purple, and blue.
Lesson 5 · Choose one color for each family
Next is choosing a color for each family. These are the only colors in the whole system that anyone picks by looking. Shopify calls each chosen color a color role and names it for what it tells the user. The color shown for each role is its fill, the color Shopify puts on a small filled element such as a button or a badge. Here are its nine. Two of them, Default and Brand, come from the one gray family: the page is its lightest shade and the main button is its darkest.
gray 1 · #FFFFFFThe baseline for the whole admin, the screens store owners use to run their shop: pages, cards, text, and ordinary buttons.What is backgroundgray 15 · #303030Pulls focus to the main action when there are many choices.What to pressazure 9 · #91D0FFInformation worth noticing, like tips, promotions, or offers.Something to knowgreen 12 · #047B5DAn action finished, or a status that is good and needs nothing.Action Responseyellow 6 · #FFE600Not urgent yet: incomplete or not-started statuses.Action Responseorange 9 · #FFB800Needs attention. The strongest color that does not block.Action Responsered 12 · #C70A24The highest importance: impossible, blocked, or an error.Action Responsepurple 12 · #8051FFArtificial intelligence or automation doing work for you.Other considerationsblue 13 · #005BD3What is selected or in focus in an editor.Other considerationsNine cards, one per color role, each showing the role's fill. Under each: the role's name, the color and shade it comes from, its color code, what Shopify uses the role for, and the purpose from lesson 3 it belongs to. The roles, fills, and meanings are from Shopify's published token files and its archived color documentation.
How to choose
Some of the colors are already decided for you. Green for success, orange for warning, and red for critical are what people expect, so you are not inventing them. You are picking which green, which orange, and which red. The choosing is in the shade. Curious about how they are already decided for you? Read Jakob's Law on Laws of UX for more information. It is the one about familiarity: people expect a new product to work the way the products they already use do.
A color wheel helps with the rest. Adobe Color is free and runs in the browser. This is how to use it for this step:
- Start with the color for "what to press". Every other color is chosen against it. Put it in the middle slot of the wheel. If you do not have one yet, start with any color you like and adjust.
- Pick a rule on the wheel. Triad gives three colors spaced evenly apart. Split complementary gives one main color and two that sit across from it. The wheel fills the other slots for you. Treat those as starting points for the families that have no fixed meaning: something to know, and your other considerations.
- Drag a slot onto the green, orange, and red you expect. Then nudge them until they sit well next to the others. A slightly warmer or cooler green changes how the whole set feels.
- Check contrast. Adobe's separate contrast checker tells you whether text in a color can be read on white and on your background gray. Text needs a ratio of at least 4.5 to 1. The color you chose will often fail as text. That is normal. A darker shade of it will pass, and choosing those shades is lesson 6.
- Check for color blindness. The color blind safe check shows whether two colors are still told apart by people who do not see red and green the way most people do. Check orange against red, and check any set of equals.
- Look at them together on gray, not one at a time on white. Colors change next to each other. Save the set as a theme so you can come back to it.
Your product may already have a brand color. If so, it goes in the middle slot, and the question is only which green, orange, and red sit well beside it.
Judge your colors against what they are for. Do the colors for Action Response read in order from good to bad without a label? If some purposes are a set of equals, do they look like equals, or does one look more important? Is the background warm or cool on purpose, or does it just look like a dirty white? Is the main button color one you would be happy to see on every button for two years?
What you can do now
Decide where your colors are kept: one place to edit, one true copy, and a copy for every place that needs one. List the purposes your screens have. Ask the three questions of each purpose and count how many color families that makes. Choose one color for each family. And answer the question that starts stage 3: how does one green become all the shades a screen needs?
Next · Stage 3 · Expanding on color roles: making a family of shades from each role's color, choosing one for each part of the screen, then organizing the choices for documentation.