Choosing the right color palette for any designer is the number one step in making their art great. Same concept applies to when creating design systems. In this article we will teach you how to choose the right shade and contrast of colors, how to structure them properly according to their uses. In addition, we will talk about how colors should be properly applied to Light and Dark modes, followed by some tips and tricks, and finally, teach you a quick and easy way to switch from Light to Dark mode with just a few buttons.
For the purpose of this article, we will reference our own latest design system project — Figma Design System and talk about why we chose the colors that we chose.
Constant Styles
It is important to notice that when choosing colors for Light and Dark modes, colors differ slightly from one another. However, there are certain colors and neutral styles that are constant and will never change in either modes. In Figma Design System we have chosen the colors White and Black as the constant colors, this color will remain the same no matter in which mode you are working on. In addition, Image Placeholders’ colors are also constant and will never change.
For example, in the picture above, we showed how the button will look in light and dark themes. The icons, text and counter have constant colors. The background of the button has changed, but the content in it has not changed.
Changeable Styles
Changeable color styles apply for both Light and Dark modes respectively, and they both can be further broken down into two main categories — Color Styles and Effect Styles. For the purpose of this article, we will talk mainly about Light mode and slightly touch upon applying these steps into Dark mode also.
1.1 Color Styles — Grayscale
Grayscale colors are considered to be changeable styles because when applying the same exact color hex in dark mode, you will not get the same effect as you did in Light mode. This is simply because in Dark mode the background color is already set to black (almost, just a tiny lighter) and using grayscale 100 on a black background will make your color almost invisible.
When switching your grayscale colors from Light to Dark mode, we recommend you to use White (#FFFFFF) and apply the 90, 70, 40 and 10 percent transparency effect on your grayscale, this will give a nice smooth transition when applied to your Dark mode.
In the Light version of our Figma Design System, we have specifically chosen these set of grayscale colors:
- 100 (#1C1C1C) — used mainly for titles and bold text.
- 200 (#585757) — used primarily for body text.
- 300 (#969696) — widely used for small text and to fill icons.
- 400 (#E8E8E8) — used for small details such as borders, dividers and line colors.
Just a heads up, we have named all four of our grayscale colors 100, 200, 300 and 400 simply for our own taste, they do not correlate with any set of rules, you can name your grayscale colors anything you want.
1.2 System Colors
System colors, also known as your base primary colors — are the main colors that will set the whole theme for your project. We recommend you choose colors which are warm and welcoming, but in some cases when choosing your color palette, you might need to consider your brands colors, this will be part of your Design System.
As an example, Figma Design Systems’ primary colors are blue, green, orange and red which are applied to both modes. Each primary color consists of two different color contrasts, first one consists of a lighter version of the primary color and the second category consists of a darker version of the primary color.
To create a lighter and darker version of the primary system colors, you will need to add 20, 40 and 60 percent hints of white and black on top of your primary colors.
For example, in the picture above, we showed button states where used lighter and darker versions of blue.
1.3 Background
In the main background section, there are two primary colors: Primary and Secondary. They change color depending on the light or dark version. In the dark version these are shades of black and in the light shades of white.
For example, in the picture above, we showed how we used Primary and Secondary background colors.
In addition to these colors, we have added colored versions of the backgrounds. They derive from system colors (blue, green, orange and red).
To create shades of these colors, we applied the transparency of the base color to the background. For example, for the light version, we applied 10% blue transparency to the white color, and to the dark version we applied 25% blue transparency to the black color.
Important note: You can use System Colors as your background, but the color of your content should be used from the Constant Styles palette (White or Black). For example buttons, badges and the counters.
2. Effect Styles
Effect styles are small changes and effects that are applied to certain components in the design system. They outline certain important tabs, buttons, or blocks of information and are used to make the user focus on certain elements on the page.
Drop Shadow effect can be easily seen on Light mode and it gives a 3D-look on your elements making your buttons float on your screen. You can use the same effect on Dark mode, however since the shadow color is already dark, users might have a hard time seeing the effect unless you change the background color.
Inner Shadow effect is very similar to the Drop Shadow effect, however this time the shadow effect is given inside of the element. This again gives a thicker look on your block elements. Please note, in the Dark mode this effect might not be clearly seen since the shadow color is dark.
Lastly, Figma has a very useful and powerful feature called Auto Layout. In order for this feature to work, the Active and Inactive status bars on the Tab bars should be modified slightly.
You will need to use the “Inner Shadow” effect for the Auto Layout feature to work on your Active/Inactive Tab bars.
Summary
In summary, the overall structure of your styling system should look similar to the picture above.
Now, you don’t need to redraw the dark version separately. If you did everything right, then to create a dark version of your interface all you will need is a simple plugin and a few clicks of a button.
How to quickly switch from Light to Dark mode
Once we have set up our design system, it is time to easily switch our components and blocks to Dark mode. For this, you will need a plugin called Appearance which can be found in the Figma Community section.
Once installed, you will not need to change each block cards and their components one-by-one again. Once this plugin feature is applied you will be able to apply Dark mode with just a quick shortcut.
The image below shows how to install and use the Appearance plugin in your design system.
We hope with this information you will have a better understanding of choosing the right colors and their semantics for your future design systems. We have tried our best to share the knowledge of colors and their importance with you, and most importantly we hope you will learn how to switch quickly and easily between Light and Dark modes in your future projects. For more references and examples, you can check out our latest Figma Design System, we have used examples from this design system in this article, see for yourself.
