How to make a good design system. Colors. Part 1
The design system allows you to quickly interact with components, easily make changes to all layouts, and in general instills in the designer the skill of organizing large amounts of information.
Often, the designer begins to make the design system carefully, giving it due attention. But as the screens get larger, it seems to me that it becomes morally more difficult to introduce new components and adjustments. But remember one thing – the more time you spend on a design system, the more time it will save in the future.
The basic rule of design systems: the fewer components, the better for you, the developer and the end user. This applies to the number of colors, fonts, icons, and so on. The design will look more consistent and unified.
Colors
Colors are not only there to show what your design looks like, but they also evoke the emotion of using a product or service, show the personalization of your brand, and literally “talk” to the user.
Define a color palette
Determining the color palette is a very important step in building a design system, but often this process is difficult. Mood, emotions, memorability – all these are colors.
The base color palette should contain the following shades: neutral (Neutral), main (Primary), accent (Secondary) and “feedback” (Feedback).
You don’t have to make 50 shades of each color. This will only give confusion, but no benefit. Instead, try to make around 6-12 and use the same color in the same place on all layouts.
For example, the default stroke of an input on the first screen is “Neutral / 300”. Then on the next screens it should be exactly the same.
Neutral mainly used in the default or disabled states of elements. Usually, these are shades of gray or blue.
Basic (Primary) used for interactive elements where maximum user focus is required. Mainly used for active state elements. You can have more than one base color, but it’s best to start with one.
Accent (Secondary) used to support the base color. Can be used for badges or labels.
Feedback colors are needed in order to visually inform the user about the results of his possible actions. An error or critical action (Error) is shown in red. For example, deleting a row of data from a table. Warning – orange. Success is green.
Decide on a color palette before you start making the next screens
A lot of designers find themselves in the awkward position of creating a UI without color styles. When there are more screens, a “pipette” situation will arise. You have to jump from one layout to another to get the same color.
To prevent this from happening, let’s imagine that you made the first screen that has a modal calendar window (I took it as an example because there is an extensive number of colors).
Then you start creating styles for each color in succession, keeping in mind the hierarchy mentioned above and applying them to the following layouts.
Naming: “Neutral / 300”.
With “Neutral” everything is clear, but who is this “300”? These figures are created solely for orientation and connection between the designer and
. Usually the names start with 100 and end with 900. The step depends on how many colors you have. 100 is the lightest shade of color. 900 is the darkest. In fonts, the situation is the same, only 100 is the thinnest weight, and 900 is the thickest.
Figma allows you to conveniently separate styles into folders using the slash “/”. Use this to create the correct hierarchy.
Contrast
When choosing a color palette, you should always keep in mind the accessibility for users of your interface. Not every user has good eyesight or a 4K monitor. A good UI should be good for everyone.
One of the main points in accessibility is contrast.
A good way to check how your text contrasts against a particular background is to compare using recommendations. Web Content Accessibility Guidelines (WCAG) 2.1.
In the Figma Community, you can find a large number of contrast analysis plugins. I prefer the plugin shown below.
How do I know which contrast is right for me?
It’s best when your contrast is up to par. AA for most elements in the UI.
Outcome
The choice of colors affects the perception of the product, its accessibility and memorability.
The main thing is to pay due attention to these things, because if this is not done, you will find yourself in trouble in the future, when the number of screens will be difficult to count.
***
