Expanding on color roles

You are here

In this article, we will cover the following:

6. Choose a shade for each part
7. Organize for documentation

These are lessons 6 and 7 of the thirteen it takes to build a design system. Lesson 1 was the first article, Introduction to design tokens. Lessons 2 to 5 were the second, Choosing the color roles. Lessons 8 to 13 come in later articles. The full list is below, each with an example.

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.

Two small filled elements come up all through this article. A badge is the small colored label that shows the status of something, such as Paid. A banner is the message strip that runs across a page or a card.

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.

Nine roles come from the eight families of article 2 because Default and Brand share the gray family. Shopify lists four more roles for special places in the screen, such as the top bar and form fields. They are not about meaning, so this article leaves them out.

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 across six parts. The strong green does two jobs, the icon and the fill of a badge.

Lesson 6 · Choose a shade for each part

1st - Making the family from the one green

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. A tool does it: Adobe Color's Shades rule or Adobe's Leonardo takes the one color you chose and returns the row. 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.

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.

An interactive drawing. A slider runs from small real estate to large. As it moves left, a wide pale green panel shrinks into a small dot and its green steps from shade 3 up to shade 12. A line under the slider names the current shade.

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.

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.

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
• Badge fill: 3 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 six parts of the "Saved" message and its badge measured against those targets.

Six rows, one per part of the "Saved" message and its badge: the background, the border, the icon, the words, the badge fill, 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. The Paid badge is drawn under the message, on the same page. Its fill is the strong green doing its second job, about 4.6 to 1 against the page, and its words are the fifth green, near-white 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.

One "Saved" message drawn with six markers, a to f: the pale green background, the slightly stronger green border, the strong green check icon, the dark green words, and, on an order line under the message, a Paid badge with marker e on its near-white words and marker f on its strong green fill. 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.

An interactive drawing. A color wheel on the left, and on the right a "Saved" message built from the chosen background, with a table of each part's contrast and the target it needs. The colors are worked out from the targets, not taken from Shopify.

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.

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 six decisions, which green goes on which part of the success message and its badge, 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.

A table with six rows, one per part of the "Saved" message and its badge, then a note and four more rows for the strong banner and the plain badge from the 5th step. 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.

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.