The first stage in creating a design system is building a solid foundation. This includes the core elements of a design system, such as colors, typography, layout, icons, and the like. Once the foundation is sorted, the next step is to define the components, patterns, and templates.
Colors form one of the key components of creating a Design System, other than typography. A graphical user interface may not necessarily contain icons, panels, or pictures, but it always contains text and color. This is why, picking out the correct set of tones, variations, and shades can be very important.
The process of generating a design system's color component is depicted below.
Naming nomenclature
Choosing the correct naming convention is the first step to building the color component. It should be done before defining the colors and numbers of tones. The names chosen for colors in the design system should be reflective of the purpose they will help solve. This is why they are given the names Primary, Secondary, and Tertiary instead of the usual red, green, blue, and yellow. This provides greater flexibility and ensures that even if a project goes through a phase of rebranding, the names of the colors stay consistent, in the UI library.
Primary colors
Primary colors are the core colors of a brand and they define the overall look and feel of a brand and product. They are the main brand colors and are used everywhere, including neutrals.
Primary colors are also the most frequently used ones across the UI to give a distinct identity to a brand. These colors are set by the brand to set apart its identity. Opting for brand colors as primary colors also helps strengthen a brand’s overall awareness.
Secondary colors
Secondary colors are used to complement and highlight the primary colors. They are mostly used sparingly to help specific UI elements stand out and are defined in brand guidelines. A brand often has around one to six secondary colors.
Secondary colors aid in section navigation for keyboard users. They also highlight titles or headings. Secondary colors also inform users about the active sections that are currently being viewed.
Neutral colors
Neutral colors include various shades of grey, right from white to black. They are mostly used for backgrounds, and text colors and aid in forming a majority of the UI.
Though neutral colors may not seem as vital as primary colors, they are used practically everywhere. Neutral colors serve as supporting colors by reducing eye strain.
Semantic colors
Semantic colors by definition are those colors that are used to communicate a specific purpose. They aid users to convey certain messages. For example, the colors used for the warning are generally red, for an alert is generally yellow, for success is generally green, etc.
Color palette
A color palette consists of a set of colors that are to be used in a design. It mostly consists of a group of colors that work well and gives a sense of uniformity in its use in design, creating a sense of consistency regarding how it is leveraged in certain products.
A color palette ties everything together and gives visual harmony to the colors being used to define a brand or product. Designers opt for color palettes to give a unified look and feel to a product while defining emotions and providing visual hierarchy. While a color palette usually consists of three to five colors, it might have more as well, depending on the requirements.
Once a color palette has been defined, it is equally important to test its accessibility and ensure that it matches the colors of the existing user interface.
Create swatches for colors (tint stack)
The best tint stacks envision more than a color combined with HEX codes, code variables as well as other indicators, like prohibited overlaid type. Create as many lighter and darker tints of the primary, secondary and semantic colors, as possible. This can be done with a quick scan. Stack colors are available in each hue, treating the stack as a visualization to be able to include necessary details concisely. To get light tones on Figma, choose the color and boost the brightness.
You can experiment with HSV and make a brand-new palette. (HSV-Hue, saturation, and brightness value).
Truncate the swatches
Users can choose colors more quickly with fewer alternatives.
As a responsible designer, selecting the tones and blending them to offer well-balanced color selections. Truncating the swatches aid in removing colors and shades that are quite close to each other.
Color theming
Color themes are conceptualized with the idea of being harmonious while being accessible and having distinguishable UI elements from each other. Theme colors are often applied to predictable accents throughout the UI, such as in the form of a button background color or as an active tab background color. However, theme colors should be designed to ensure that they do not alter the other bits and pieces, such as long-form type or a link color, making it go invisible.
Contrast and color accessibility
Focusing on the accessibility of color contrast needs to be a core practice when looking to set up the color component in a design system. It is necessary to utilise accessibility practices into a workflow to kindle and spread the values of accessibility across enterprises. It is imperative to ensure that all colors and their varied shades adhere to the WCAG (Web Content Accessibility Guidelines). It is crucial to keep in mind that color is critical to a design system, similar to how accessible color contrast is crucial to color.
How to change color accessibility?
A major drawback of WCAG guidelines is its obvious threshold: a color pair that might pass or fail. This often makes a designer crave more, leaving stakeholders bewildered over how badly a color pair is failing or how much is needed for it to change. Adjusting the hue, saturation, and value of colors to develop the right tone is the ideal solution.
A spectrum of choices along with a line indicating pass and fail should be fairly evident. This helps in transforming the whole process from trial and error to the organized tuning of a dial. A rational discussion focussed on balancing the visual tone, brand identity, and accessibility sensitivities ensure the result is perfect.
The final goal is to provide the optimum user experience by using soft color contrasts that are both pleasing to the eye and also create a positive outlook. It is of prime importance to adhere to the fact that anyone with a visual impairment can read the result just as easily.
Calling colors
The naming standard requires selecting a name that quickly associates itself with a specific category of colors. For instance, instead of naming the primary brand color red, call it a primary color instead. This is done to enable the making of quick adjustments for future changes.
With regard to the enlarged palette, pick a number and multiply it by 10s, 100s, or 1000s instead of labeling the colors ‘Primary light, Primary lighter, Primary lightest, Primary dark, Primary darker.’ This way of naming makes the various color variants in the palette simpler to understand and remember.
In conclusion
When looking to create a UI library for your Design System, it is important to set proper colors that are consistent and help in establishing a foundation of different shared styles. While the primary colors, make up the brand's core colors, secondary colors, go well with the primary colors and are used to highlight sections. Similarly, neutral colors, need to add depth and help to reduce strain, and semantic colors, serve a more general purpose because they are commonly accepted as the color of function.
When it comes to naming conventions, consider the purpose of the specific color and then plan adequately for all the additional tones. Make a tint stack after adjusting the HSV values. Limit options to develop a palette. Keep them in check. Name them now according to their purpose and tone number. Mention the hex value of the tint too. In this manner, it will be simple to access the color again.