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 articlesMake the shades · Name each color by its purpose · 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
Each chosen color gets a row of shades from light to dark, in even steps. A tool can do this.
Give the color a name that says what it is for, so nobody has to remember which green.
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 grey 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: it worked, be careful, or it failed. That is usually green, amber, 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, amber, 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 grey |
| 3Action Response | Success | The action worked | Green |
| 3Action Response | Caution | Be careful. 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 yellow when it is not urgent yet and orange when it needs attention, and it gives the orange its own name, Warning. This lesson counts the two as one.
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 grey page, a dark grey 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 grey 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 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. It worked: "Saved." Be careful: "The card expires next month." It failed: "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. Be careful is amber. Failed 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 amber 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 grey, taken from the same grey 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 grey 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 grey button and marker B on a light grey 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 grey |
| Action Response | 3 |
| Something to know | 1 |
| Other considerations: features that use artificial intelligence | 1 |
| Other considerations: what is selected in an editor | 1 |
| Color families needed | 7 |
A table that adds up Shopify's color families, with a swatch of each color beside its number. Shopify's list comes to seven: grey, green, orange, red, light blue, purple, and blue.
Lesson 5 · Choose one color for each family
Choose one anchor per family
Next is choosing a color for each family. These are the only colors in the whole system that anyone picks by looking.
From the project: its seven anchors, one color per family, each with what it is for.
Judge your anchors 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 ground warm or cool on purpose, or does it just look like a dirty white? Is the main action color one you would be happy to see on every button for two years?
Each anchor becomes a ramp
Take an anchor. Make lighter versions by raising the lightness in even amounts. Make darker versions by lowering it. Keep the hue the same. Then check that every text color can be read on every background it will sit on, in light mode and in dark mode.
Each family as a ramp. The outlined cell in each row is the anchor. The other cells are worked out from it.
Why a ramp has the steps it has
Not because five is a nice number. Every step exists because something on a screen needs it. Take one away and something stops working. Add one and nothing uses it.
Neutral gets twelve steps instead of five because it does more jobs: two page grounds, two card surfaces, borders, three levels of text, in two modes.
The five steps of a family, and the job each one does.
The neutral family gets twelve steps instead of five, because it does more jobs: two page backgrounds, two card backgrounds, borders, and three levels of text, each in two modes.
Who decides what
The designer decides the anchors. That is the taste. The ramps are arithmetic: even steps, the same hue, every pair checked for readability. A tool does that work, and it should be done again from scratch whenever an anchor changes. If a color looks wrong, change the anchor, not one step of the ramp.
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 · Build the three tiers: making the shades for each color, then naming each color by its purpose, then naming where each color is used. Coming soon.
The design system series
- 1Introduction to design tokens13 min
- 2Preparing the tokens You are here18 min
- 3Build the three tiersComing soon
- 4Write it downComing soon
- 5Make it holdComing soon
- 6Take it into FigmaComing soon