In the Figmaster - Demo Lessons Figma file, open the Demo Lesson 1 - Neutral colors page.

Introduction

In this chapter, we'll create a neutral color palette for our system. Neutral color is mainly used in large parts of the text interface, and the background, borders, dividing lines, and other scenes are also very common. The neutral color definition needs to consider the difference between the dark background and light background while incorporating the WCAG 2.0 standard. The neutral color for our design system will be based on the transparency of the black color.r

Plugins used in this chapter

Contrast

Chroma Colors

Step 1. Creating test color samples

In this step, we'll create test samples to adjust and quickly set up our color palette.

1. Press R on your keyboard to select the Rectangle tool.
2. Click inside the Step 1 frame to create the rectangle.
3. Change the rectangle's fill color to #000000. Pro tip: You don't need to type '000000' in the hex input. Just type '0' and press Enter and it will automatically set all digits to 0.
4. Click on the rectangle, and while pressing ALT + SHIFT move, it 20 px to the right.
5. Press CTRL + D to duplicate it, so there are ten rectangles.
6. Select all rectangles.
7. Press CTRL + R to open Rename modal.
8. Rename to: Test sample / $N0 and press Enter. We'll have 10 rectangles named Test sample / 10 to Test sample / 100.

Step 2. Setting up the opacity

Let's set up the opacity for each color rectangle to create the neutral palette. In this step, you'll learn my way of doing this. The opacity values that I provide in this lesson will make the UI accessible, and we will confirm that in the next step. These are the opacity values I normally use. I've found them through experimentation and then tweaked them to be accessible. Don't worry, though. You will be able to set up your values in Step 5 if you need them.

1. Select Test sample / 10 and set its color to #FFFFFF. (Psst! Type in 'F' in the hex input and press Enter, remember?)
2. Add stroke color #d9d9d9 so you can see it. ('D9' + Enter in the hex input 💪)
3. Select the Test sample / 100 rectangle and set its opacity to 96% (Press 9 + 6 on your keyboard).
4. Select the Test sample / 90 rectangle and set its opacity to 74%.
5. Repeat the process for Test sample / 80 to Test sample / 20 following the rules:
6. 80 to 62%
7. 70 to 54%
8. 60 to 38%
9. 50 to 24%
10. 40 to 12%
11. 30 to 7% (press 0 + 7)
12. 20 to 4%

Step 3. Applying the color samples.

Let's apply our test color samples to see how they'll look in the components we'll create in the next module. In the Color test playground, I've prepared some sample components and typography elements. Let's apply our colors to these elements to see how they will look when used.

1. Select 'Heading 1', 'Heading 2', and 'Input Label' text elements. Pro tip: click on elements while holding CTRL + SHIFT to keep all items selected.
2. Press I to open the color picker tool.
3. Pick the color from Test sample / 100 by clicking on the rectangle.
4. Select 'Paragraph 1' and 'Paragraph 2' and apply color from Test sample / 90 as you did in the previous steps.
5. Repeat the process for the remaining elements like this:
6. Test sample / 100 to ‘Option 2 hover’, ‘Option 2 pressed’, Option 2 selected’ texts.
7. Test sample / 90 to ‘Option 1, 3 and 4’ texts, ‘Option 2 default’ text, and Tooltip Arrow and Tooltip Content Background. Pro tip: hold CTRL and drag-select text elements with your mouse.
8. Test sample / 80 to ‘Input Caption’ text
9. Test sample / 70 to ’Input Placeholder’ text
10. Test sample / 60 to ‘Option 5 disabled’ all texts
11. Test sample / 50 to Dropdown Menu dividers and Input Field stroke
12. Test sample / 40 to ‘Option 2 selected’ item background fill
13. Test sample / 30 to ‘Option 2 pressed’ item background fill
14. Test sample / 20 to ‘Option 2 hover’ item background fill
15. Notice: Test sample / 10 is already applied to Input field, Dropdown Menu Backgrounds, and Tooltip text

Step 4. Testing the contrast

You're doing great! OK, now that we have all colors applied, we need to test if they are accessible.

Important! Since Figma allows for only one plugin to be open at a time, the Figmaster plugin will close when you open the Contrast plugin. Don't worry, though. You will find the instructions for this step in Figma too.

1. Open the Contrast plugin. (Remember: You can open plugins with Figma's search feature. Press CTRL + / to open the search menu, type 'Contrast', and press Enter. It's faster than looking for the plugin from the right-click menu.)
2. Select 'Heading 1' and take a look at the Contrast plugin UI. Check if the AA label in Normal text is green. If it's green, it means that it passed the WC3 standard.
3. Having the Contrast plugin open, repeat the action for the rest of the text elements on the playground frame. Pro tip: Did you know that you can select the text elements that are nested inside components without clicking multiple times? Hold CTRL and click on the text element to select it with one click.

Please keep in mind that disabled components are unavailable for interaction, so they don't receive hover or focus and are not subject to WC3 contrast compliance standards. In other words, the text 'Option 5 disabled' does NOT need to pass the Contrast test.

Step 5. Your adjustments (optional step)

Great! We've tested our colors in the UI and checked if they pass the contrast tests. Now you can adjust them for your needs if you want. If you are happy with the result, you can move on to the next step. If not, here's how you can customize the colors for your needs:

1. Select the color rectangle on Step 1 frame.
2. Change its opacity to match your needs.
3. Reapply this color for the items (just like you did in Step 3).
4. Open the Contrast plugin.
5. Check if the new color passes the contrast test.
6. Repeat the action for other colors.

Step 6. Creating color styles.

At this point, we have ten neutral colors. It's time to create color styles so we can use them in the whole project afterward.

Part 1. Creating colors

1. Select Neutral / 100 rectangle in Step 5 frame.
2. Open the color picker tool (I)
3. Pick the color from Test sample / 100 in Step 1 frame.
4. Repeat the process for the rest of the colors.

Part 2. Creating styles

Important! Since Figma allows for only one plugin to be open at a time, the Figmaster plugin will close when you open the Chroma Colors plugin. Don't worry, though. You will find the instructions for this step in Figma too.

1. Select all rectangles in Step 5 frame. Pro tip: You can select the Step 5 frame and press Enter to select all elements inside.
2. Launch Chroma Colors plugin. It will automatically create the color styles.
3. In the Styles panel on the right (under Text Styles), new Color Styles appeared under Neutral.
4. Unfold the Neutral styles list and move color style 100 to the bottom of the list, so you'll have them listed from 10 to 100.

Great work! Our color styles are almost ready to use!

Step 7. Color styles description

In this step, we'll add descriptions to the color styles. Descriptions display when hovering over the style in the style picker. We'll use a description to communicate how color styles should be used in your designs. Because each color plays its role in the system, it will be great to have it described so you or your teammates don't have to check the documentation each time you want to use the color. It will also make your designs consistent and easier to implement for the developers.

When you select all elements inside the Color test playground frame, you will see ten selection colors appear in the right properties panel. Then, hover over the color and press the 'target' icon to select all elements that use this color. That way, you can determine what colors we use and where.

OK, it's time to describe the styles!

1. In the styles panel, right-click on the Neutral / 10 style and select Edit style.
2. In the description field, you will see 'FFFFFF'. Delete this text.
3. Then type in 'Neutral background, White text' and close this Edit style panel.
4. Then edit the next style Neutral / 20.
5. In the description field, type 'Item Background Hover, Secondary Background'. Close this panel.
6. Repeat the action for the rest of the styles with the following data:
7. Neutral / 30 -> 'Item Background Pressed'.
8. Neutral / 40 -> 'Item Background Selected'.
9. Neutral / 50 -> 'Borders, Dividers'.
10. Neutral / 60 -> 'Disabled Text'.
11. Neutral / 70 -> 'Placeholder Text'.
12. Neutral / 80 -> 'Caption Text, Secondary Text'.
13. Neutral / 90 -> 'Body Text, Inactive Text'.
14. Neutral / 100 -> 'Headings, Active Text'.

Summary

Awesome work! We've just created a functional and accessible neutral color palette for our design system!