One color is not enough: how a design system gets every shade a screen needs

Design system series, part 3. Two lessons on turning one chosen color into every shade a screen needs.

This is the third article in the design system series. The first two, Introduction to design tokens and Preparing design tokens for a design system, explain what a token is and how the colors were chosen.

Two lessons on turning one chosen color into every shade a screen needs.

You are here

In this article, we will cover the following:

Lesson 6: Choose a shade for each part

Lesson 7: Organize for documentation

Article 2 ended with Shopify’s nine color roles. Here they are again. Each role is named for what it tells the user, and each is known by its fill, the color Shopify puts on a small filled element. One purpose can hold several roles: success, caution, warning, and critical are four roles under the one purpose of action response.

The Color Roles

Caption: Nine swatches, 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 article 2 purpose it matches. The roles, fills, and meanings are from Shopify’s published token files and its archived color documentation.

Now that a color has been chosen for each role, we can branch each one out and build on it. To show how one role grows, this article draws its own “Saved” message from Shopify’s green family and gives it five greens, one for each part.

Lesson 6 · Choose shades for each part (of color role)

1st — Making the color role family

The color role this article will focus on is success. At this point there is one green for it, the fill chosen in article 2: green 12, #047B5D, the strong green on Shopify’s strong success badge and on the title bar of a success banner. One green is not enough to draw a message, so the first step is to make its family.

A family is the fill plus its lighter and darker versions. They are made by changing one thing only, how light the color is, in even steps from near white to near black, while the hue stays the same.

Shopify made sixteen for every color, and its documentation says the same shade number has the same lightness in every color. Here is its green row, with the fill marked.

Caption: Shopify’s sixteen greens in one row, numbered from 1, the lightest, to 16, the darkest. Shade 12, #047B5D, is outlined and labeled Success. Values from Shopify’s published token files.

2nd — Deciding colors based on the real estate

Choosing a green from the row for each part gets easier when you start with real estate: how much of the screen each part covers. A large area in a strong color takes over the screen and is hard to read on. A small area can be strong. So the background behind a success message is pale, and the icon, which is small, is strong.

Caption: A slider at its large end: a wide pale green panel, green 3. On the site, dragging the slider left shrinks it into a small dot and steps the green up to shade 12. The live version is at suzannesallaj.com/design-tokens-3.

The background of a success message covers the most screen of any part, so it takes one of the palest greens. Shopify chose green 3. Against the gray page it is almost the same lightness, so it reads as a light tint.

Caption: A large pale green panel labeled #CDFED4, beside its details: the success background, green 3 in Shopify’s green family, Shopify’s description of it, and its lightness against the page. Values from Shopify’s published token files.

3rd — Adding foreground colors

Once the background is chosen, the next colors are the foreground colors: the ones that sit on top of it, like the words and the icon. In this example, we add the color for the words. Every foreground color has to be checked against the background it sits on. The standard check is WCAG, the Web Content Accessibility Guidelines. Its contrast rules exist so that a screen stays readable for people with low vision, people who have trouble telling some colors apart, and people whose eyes have changed with age. They also help anyone reading a phone in bright sunlight.

The measure is the contrast ratio, which compares how light two colors are: two identical colors are 1 to 1, and black on white is 21 to 1, the most there can be. WCAG has three levels, A, AA, and AAA. Level A has no rule for contrast. AA is the level most products aim for: small text needs at least 4.5 to 1 against what it sits on, and large text, icons, and the edges of controls people need to find, such as a text field, need 3 to 1. A border that only decorates has no minimum. AAA is stricter: small text needs 7 to 1. WCAG calls the words text, and sorts them into small and large.

You do not have to work the ratio out yourself. Adobe’s free contrast checker does it for any two colors.

1. Foreground color: paste the color of the words, for example the dark green #014B40.
2. Background color: paste the color they sit on, for example the pale green #CDFED4.
3. Read the ratio at the top, then the row for small text. Under AA it says Pass or Fail. Pass on that row means at least 4.5 to 1.

Caption: A drawing of Adobe’s contrast checker with dark green #014B40 on pale green #CDFED4. The ratio reads 9.0 to 1, a preview shows the words Saved on the pale green, and every row in the table passes. The small text row is highlighted. Drawn for this lesson, not a screenshot of Adobe’s page.

For the “Saved” message, dark green on pale green comes to about 9 to 1, an easy pass. The strong green #047B5D on the same pale green is about 4.7 to 1. That passes AA for small text with little to spare and fails AAA.

4th — Expanding to borders, icons, and others

Now that the background and the words have been chosen, the rest of the parts are easier still, because every one of them can be measured against the background. Building a family around contrast ratios is standard practice in design systems. Here are the targets this article uses for each part, measured against what the part sits on. The 3 and the 4.5 are WCAG’s minimums. The 1 and the 1.1 are not rules from WCAG or Shopify; they keep the background and the border close to what they sit on.

• Background: 1 to 1
• Border: 1.1 to 1
• Icon: 3 to 1
• Words: 4.5 to 1
• Words on a strong badge: 4.5 to 1

The Undo button is not one of the five greens. It is white with dark gray words, and it is checked the same way. The background and the border are both under 3 to 1 on purpose. WCAG’s 3 to 1 applies to parts a person needs in order to see or use something. Here the icon and the words carry the message, so the background and the border only add a tint and an edge.

These targets are not tied to green. If every color’s shades are built so that shade 12 of red is as light as shade 12 of green, the same shade numbers give about the same contrast in every color, so once the targets work for green, they work for red and blue too. Here are the five parts of the “Saved” message measured against those targets.

Caption: Five rows, one per part of the “Saved” message: the background, the border, the icon, the words, and the words on the badge. Each row shows the part, what it is measured against, and a bar for its contrast. The two orange lines are WCAG’s minimums, 3 to 1 for icons and 4.5 to 1 for words. Colors from Shopify’s token files; the ratios were worked out for this article.

The result is a success message that says “Saved”, built from Shopify’s success greens with one green for each part. The Paid badge is drawn inside the message only to show the fifth green: near-white words on the strong green fill, about 5.2 to 1. The Undo button is white because, in Shopify’s banners, the action button is always a white button, whatever the banner’s color. Shopify’s own success banner inside a card is simpler than this drawing: it has no border, and its icon is green 14, the same as its words.

Caption: One “Saved” message drawn with five markers, a to e: the pale green background, the slightly stronger green border, the strong green check icon, the dark green words, and the near-white word Paid on a strong green badge. The Undo button is white. A key under it shows each green as a swatch. Drawn for this article with colors from Shopify’s green family.

The same targets work for any background color. Try one below.

Caption: A color wheel set to #CDFED4, and the “Saved” message the page built from it, with a table of each part’s contrast and the target it needs. On the site you can choose any background and watch the parts rebuild. The live version is at suzannesallaj.com/design-tokens-3.

5th — Optional: Adding more ways to display a color role

One way to show success is often not enough. A message that announces a finished order needs to be seen; a label that says an order is paid only needs to be read. The same greens can do both jobs at two levels of strength, a loud one and a quiet one. Shopify’s success role is an example of how far this can go: it has two banners and two badges.

The two banners differ by where they sit. A banner on the page itself gets a strong green title bar with near-white words, green 12 and green 1, and a white body under it. A banner inside a card turns pale green all over, with a dark green icon and dark green words, green 3 and green 14. The loud one marks something new on the page. The quiet one sits inside content the reader is already looking at.

The two badges differ by how much they should stand out. The strong badge is filled with green 12 and has near-white words, green 1. The plain badge is filled with light green 4 and has dark green words, green 14, a fill Shopify describes as having “a secondary level of prominence”. In the drawing, Paid gets the strong badge and Fulfilled gets the plain one. Each marker gives the number of the green used there, from 1, the lightest, to 16, the darkest.

If you add a second way, choose its greens the same way as the first: by real estate, then by contrast against what each part sits on.

Caption: A drawn page in three labeled parts. On the page: a banner with a green title bar (12), near-white words (1), and a white body with a white button. Inside a card: a pale green banner (3) with a dark green icon and words (14). Badges: Paid, filled green (12) with near-white words (1), and Fulfilled, light green (4) with dark green words (14). Drawn with Shopify’s published values.

Lesson 7 · Organize for documentation

Lesson 7 writes the choices down. Lesson 6 made five decisions, which green goes on which part of the success message, and they exist nowhere yet except on your screen. Put them in one table, so the next article has something to document.

Each row carries the purpose, the part, and the green. The purpose comes first, because it is what holds the five greens together, and it is what will tell them apart from the rows for warning and critical when those roles are chosen the same way. The last column records what the green was checked against. If the background ever changes, it says which rows have to be checked again.

Caption: A table with five rows, one per part of the “Saved” message. Each row gives the purpose, success, then the part, its green with a swatch, its shade number and color code, and what it was checked against. Shade numbers and codes from Shopify’s published token files; the border and icon are this article’s choices.

If you added a second way to show success, such as the strong banner and the plain badge, add a row for each of those greens too, in the same four columns.

For a designer, the simplest place is a page in the design file, next to the screens, with this table on it. If your team chose somewhere else in lesson 2, such as a spreadsheet or a plain text file, write it there instead. What matters is that there is one copy and everyone edits the same one. The next article turns each row into a name, and a tool turns the names into files.

What you can do now

Make a family from the role’s fill with a tool, then choose a shade for each part: a pale one behind, a slightly stronger one around it, a strong one for the icon, a dark one for the words, and a near-white one for words on a strong badge, each checked for contrast against what it sits on. Write the five choices down in one table: the purpose, the part, the green, and what it was checked against. And answer the question that starts article 4: once the choices are recorded, how do they become names, and how do the names get into the files that screens are built from?

Next · Stage 4 · Write it down: a name for each color and each place it is used, a tool that turns the names into files, and the rules written where people and tools can read them.

One color is not enough: how a design system gets every shade a screen needs was originally published in Bootcamp on Medium, where people are continuing the conversation by highlighting and responding to this story.