1.3 Primary color

In the Figmaster - Lessons Figma file, open the 1.3 Primary color page.

Introduction

In this chapter, we will create the primary color palette for our design system. We will use the primary color for primary actions, links, and active states. You will also learn an easy way how to create a consistent color palette from one color.

Primary brand colors

Primary brand colors are arguably the most important. They are typically the core colors that make up your brand. For example, Netflix's primary color is red. Primary brand colors tend to be used for prominent elements like calls to action and backgrounds. They may be used for large headers but are less likely to be used for a copy (if only for their accessibility). For example, the yellow in McDonald's brand used for links in copy text wouldn't be legible on a white background. Instead, they use blue for their links. See the example here.

Plugins used in this chapter

Tints and Shades

Contrast

Chroma Colors

Step 1. Choosing the primary color

For the Figmaster Design System, I chose purple as our primary color. It meets the accessibility standards with the Contrast Ratio of 7.26:1 when on white background. In my opinion, it's also a modern and nice-looking color.

When working on your own design system or a project for your client, you will probably choose a different color. Don't worry. The stuff you will learn in this chapter will work for any color. For the purpose of learning, let's stick with purple. You will be able to change the primary color palette in the 4th Module, where we will cover customizing the system.

Part 1. Base color

  1. Press R on your keyboard, and click somewhere at the top left corner in the Step 1, 2 & 3 frame to create a rectangle.
  2. Rename (CTRL + R) the rectangle to Primary.
  3. In the Fill panel on the right, set the hex value of the rectangle to 4F31E4.

Part 2. Color samples

  1. Click on the rectangle, and while pressing ALT + SHIFT, move it 20 px to the right.
  2. Press CTRL + D to duplicate it, so there are six rectangles.
  3. Rename the first rectangle on the left to Primary / Main.
  4. Rename the second rectangle to Primary / Surface.
  5. Rename the third rectangle to Primary / Border.
  6. Rename the fourth rectangle to Primary / Hover.
  7. Rename the fifth rectangle to Primary / Pressed.
  8. Rename the last rectangle to Primary / Focus.

Step 2. Creating the color palette

In this step, we'll use the plugin to generate a consistent color palette based on our color. Then, we'll manually adjust the colors for our needs. Let's go!

Part 1. Plugin

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

  1. Having the first rectangle on the left selected, open the Tints and Shades plugin (CTRL + / to open the search box > type in Tints and Shades and press Enter).
  2. Click on Generate Colors button in the plugin UI. 11 new rectangles will appear.
  3. Select the Primary / Surface rectangle.
  4. Press I to open the color picker tool.
  5. Grab the color from the first rectangle from the top that appeared after running the plugin.
  6. Repeat the process for the following three rectangles in such order:
  7. Primary / Border - pick the color from the second rectangle from the top.
  8. Primary / Hover - pick the color from the seventh rectangle from the top.
  9. Primary / Pressed - pick the color from the ninth rectangle from the top.
  10. For the last rectangle, Primary / Focus set its color fill to 20%.

To confirm that you did it correctly, see the figure below:

OK. We have an initial palette set up. It's time to check how colors will look in real scenarios and components. I've prepared a simple preview frame for that. Let's add our colors to it.

  1. Select the Preview Colors frame.
  2. In the panel on the right, under Selection colors, click on the color sample marked 111111 to open the color panel.
  3. Press I to open the color picker tool.
  4. Grab the color from the rectangle Primary / Main that we did previously.
  5. Repeat the process as follows:
  6. E0E0E0 to Primary / Surface.
  7. 333333 to Primary / Border.
  8. 222222 to Primary / Hover.
  9. 444444 to Primary / Pressed.
  10. 000000 20% to 4F31E4 20%.

Part 3. Manual adjustments

Now, we can see how colors look in context. You can check whether they meet the accessibility standards with the Contrast plugin. Just like we did in the previous chapter with Neutral colors.

It's time to make some manual adjustments so they will look even better. I will show you my way of doing this. You will learn how to adjust colors and keep them consistent with the Primary / Main color. OK! Let's polish them a bit.

  1. Select the Preview Colors frame.
  2. Under Selection colors, in the panel on the right, click on the color sample marked DCD6FA to open the color panel.
  3. In the color panel, set the color system from RGB (or other) to HSB. That way, we'll adjust the color on the same hue range to make it consistent with the main color. You can learn more about the HSB color system on the resources page of this Module.
  4. Let's make this color lighter, so it has more contrast to the text, icon, and borders inside the message component:
  5. Set the Hue value from 250 to 252.
  6. Set the Saturation value from 14 to 4.
  7. Set the Brightness value from 98 to 100.
  8. Close the color menu.
  9. As you can see in the Preview Colors frame, it looks better already! Let's take care of the rest of the colors. Select the C4BAF6 color in the Selection colors to open the color panel.
  10. Set its Saturation value from 24 to 28.
  11. Repeat the process as follows:
  12. 4229BE to 250 (H), 87 (S), 82 (B).
  13. 271872 to 250 (H), 87 (S), 50 (B).

Step 3. Creating color styles

Looks perfect! Now, let's apply the colors from the Preview Colors frame to our color rectangles and create the styles.

Part 1. Reapplying colors

  1. Select the Primary / Surface rectangle
  2. Open the color picker tool (I).
  3. Grab the color from the Notification component's background in the Preview Colors frame.
  4. Repeat the process as follows:
  5. Primary / Border - Message component's stroke.
  6. Primary / Hover - Button 2's background.
  7. Primary / Pressed - Button 4's background.

Part 2. Creating the styles

  1. Select all Primary / ... rectangles in Step 1, 2 & 3 frame.
  2. Launch Chroma Colors plugin. Remember that you need to reopen the Figmaster plugin because it will close when you'll run the Chroma Plugins. Also, remember that the Chroma Colors plugin does not have a UI. It will run in the background and create the color styles.
  3. In the styles panel, new Color Styles appeared under Primary. Rearrange the styles in such order: Main, Surface, Border, Hover, Pressed, Focus.

Summary

Great job! Our primary color palette is ready to use! We don't need to describe the styles since our color names suggest the usage of each style.

PreviousNext