A Guide to Colors in Design Systems

If you are a designer, you already know the importance of a structured color design system. But knowing how to construct one might sound overwhelming and complicated.

In this article, we’ll cover everything you need to know about selecting colors in design systems, so buckle up and keep reading!

The right start to creating a color system is to distinguish base colors. Base colors are usually branding colors and colors that rule your UI design. You should always connect your accent colors (more about them later in this article) with primary colors and never use colors you didn’t represent in the color palette of your UI design.

To exemplify, Supercharge Design uses the following colors:

Proper naming is the first essential step in including colors in design systems. Selecting the correct color naming convention is something designers should do before choosing the colors and their tones. The names of the colors in your design system must showcase their purpose.

As you might’ve noticed in the previous paragraph, we suggest naming the colors in design systems Primary, Secondary, and Tertiary instead of the usual name, such as green, blue, or red. Such a naming convention will ensure higher flexibility and consistency of the UI, even if the complete design goes through a rebranding sometimes later. 

Let’s explain this further.

Primary colors in design systems are a brand’s main colors and determine the overall look and feel of a brand or a digital product. As a designer, you’ll use these colors in a lot of areas of the interface. Designers usually use primary colors across the UI design to showcase the brand’s identity and amplify brand awareness.

Designers use secondary colors in design systems to accentuate and complement the primary colors. The main secondary color is often referred to as the accent color. The best practice with secondary colors is to use them sparsely, only to highlight specific UI elements, such as promoted buttons. Moreover, you should always include your secondary colors in your brand guidelines.

Sometimes a brand can have two secondary colors, and sometimes six of them, so make sure to include them all. Secondary colors also help keyboard users or inform users of active sections they encounter. In smaller or more minimalistic projects the primary color is also the accent color.

Other than primary and secondary, we also have semantic and neutral colors in design systems. Semantic colors serve to communicate a particular purpose. Designers use semantic colors to announce specific messaging, such as warnings or other alerts. Some of the best examples of semantic colors are green, which has a positive connotation, so designers use it to communicate success. They also most often use red for warnings or yellow for general alerts.

Neutral colors in design systems can include white, black, or different shades of grey. Designers use neutral colors for backgrounds or written text. Neutral colors aren’t necessarily primary colors, but you’ll always use them as a designer. One of the designer’s tips on how to design for accessibility is to use neutral colors to reduce harsh contrasts and help users with eye strain.

Once you have your base colors in design systems, you’ll need to create various tints and shades to achieve flexibility. It would be best if you also named these tints and shades accordingly.

For example, we suggest calling the default color Primary 500 (for its shade). For its lighter tones, you’ll accordingly use Primary 400, Primary 300, etc.; for the darker, bolder tones, you’ll use Primary 600, Primary 700, and so on, depending on the quantity of the shades.

Once you figure out primary, secondary, and semantic colors in design systems, you must validate them by ensuring they fit all your design’s UI elements. To validate your colors, you’ll need to select key UI elements, such as background, text, and buttons, and start using your preselected colors to see will they fit, achieve a distinctive look, and, most importantly, serve their purpose.

For example, you’ll need to validate if your preselected secondary colors grab the most of your users’ attention. You’ll also need to check if your semantic colors, such as your warning and success colors, convey their meanings loud and clear for all your users.

In previous paragraphs, we briefly touched upon contrasts and accessibility, so let’s dive a bit deeper into how colors in design systems can either help or disrupt your design. When you want to design with accessibility in mind, creating the proper color contrast will be your most crucial step. When creating your color palette, you’ll have to make sure all the colors and their shades fall into the WCAG – Web Content Accessibility Guidelines.

Knowing more about colors in design systems is crucial for creating a good contrast. Color contrast highly affects the level of readability of the content of the digital product you’re designing. It is essential for users with different types of eye strains or who are colorblind.

A good color contrast means all your users can see the content, disregarding the device they might use or the lighting of their surroundings. You can check the contrast levels with multiple tools online, such as WebAIM’s Color Contrast Checker.

If you want to become a professional product designer, then you must remember that testing is everything. You might find your design and the colors in design systems you defined excellent and fitting the accessibility norms, but as we always say, you are not your user. 

Therefore, you need to verify your design decisions and test the use of the colors. The best practice is to test your choice of colors with the rest of your design team and among the stakeholder as early in the design process as possible. Feedback and input can make your life much easier, as you’ll hear different perspectives and become aware of something you didn’t consider before.

So, present your defined color palettes to your team members and other stakeholders as soon as you create them. To furtherly validate your decisions, let the stakeholder see the essential UI elements or screens with their proposed colors. That way, they’ll get a good look into how the colors in design systems fit and if they truly serve their purpose. Gather the feedback and, if necessary, iterate your design and your color palette.

Design tokens are an abstract design language that allows designers and developers to work more efficiently and consistently. Designers use these pre-defined variables, such as colors in design systems, typography, spacing, and other visual elements, to define the design system across all digital channels.

Color design tokens help to streamline the design process by providing a centralized source of truth for all design-related assets. They can be used across multiple platforms and applications, ensuring a consistent look and feel and making it easier to make changes and updates to the colors in the design system.

Using color design tokens also helps to promote collaboration between designers and developers. Designers can create a set of color design tokens and then share them with developers, who can use them to create consistently and cohesively colored user interfaces across all digital channels.

Overall, color design tokens are an essential tool for creating efficient and consistent design systems and can help to streamline the design process and improve collaboration between designers and developers when it comes to colors used in a product.

Congratulations, you now know how to select, name, and validate colors in design systems! We hope this article alleviated some doubts or challenges you might have initially. Still, in case you need more substantial guidance into color and its proper use in the world of product design, we highly suggest checking out our Ultimate UI Colors Masterclass!

This masterclass contains invaluable practical video lessons, checklists, and engaging exercises that will help you raise your level of knowledge about colors in UI and help you advance your career. This course will cover everything: from color basics to creating the proper color schemes, tints, and shades for immaculate user interfaces. 

Enroll now, or if you have additional inquiries about this extensive masterclass, feel free to reach out!

For heaps of practical tips and entertaining topics related to the world of product design, join our wholesome and ever-growing community and follow us on Instagram.

Happy designing! 🤗