Larissa Rabello
Product Designer

Design Systems

Color Palette Optimization
Working on a Design System involves continuously listening and learning from the feedback of product designers, developers, stakeholders and end-users to evolve a library that meets the needs of our product portfolio. In light of this, we faced the following challenges:

“Picking colors for our visualization designs can be a puzzle. Sometimes, they just lack harmony, contrast, or fail to align with our product requirements.” - designer
Selecting colors from the wide range of Categorical colors - those designated for use in visualizations - can be tricky for designers, possibly leading to a less-than-optimal use of a palette tailored to meet product needs and standards.

And more...
“Status indicators are crucial for decision-making, whether in bad visibility conditions in a mine or dealing with screen glare. Difficulty in identifying a status could compromise the success of an entire operation.” - product manager

Recognizing the importance of colors for severity and status in anomaly detection and issue identification, we've received feedback regarding the need to adjust the contrast of the Semantic color palette. The concern is caused especially by the similarity between the oranges and reds.

Then, we identified the problem statements:

 Designers may find difficulties in picking the most appropriate colors for their use cases.

Users may potentially be led to errors with the existing colors.

So, how can we enhance contrast and reduce cognitive load in our design system through optimized use of colors?

With these challenges at hands, my initial step was conducting competitive benchmarking by researching other Design System solutions related to status, aiming to identify common patterns. Here's a summary of my findings:

Main semantic colors are typically assigned as follows: blue for informative, green for positive or regular, yellow or orange for warnings, and red for danger. Additionally, white or gray and purple may have specific meanings such as neutral or new status. Furthermore, these colors are often divided into lighter or darker tones to convey varying levels of importance.

For the categorical palette, I identified a standard set of colors as the common baseline, complemented by an extended palette tailored for highly specific use cases. This concept aligns closely with the Miller's Law, which addresses a memory limitation of 7 (+-2) items for an average person, as mentioned by Craig Barber in the Miller's Law in UX Designing for the Human Mind.

In summary,  providing a narrowed set of colors is a way to encourage designers to follow the recommended approach for visualizations, while a secondary extended palette might attend edge cases, since it could potentially increase cognitive load. So, after the research, my conclusion was:

We should consider incorporating yellow to enhance contrast and establish a more precise status system.

We need to reduce the number of visualization colors to alleviate the cognitive load for designers when selecting colors. This, in turn, will also improve the experience for the end-user.

It’s time to be creative!

The technique I used for creating the Semantic palette involves maintaining the same hue while exploring opposite levels of saturation and value. Yet, when creating a traffic light-like palette, some challenges can arise.

There are multiple tools available to help define colors. I used the Palettte to calculate saturation and value levels and later to define new hues. To ensure accessibility, I used a contrast checker and occasionally Adobe Color for inspiration and to calculate contrast ratios.

My first attempt at creating yellowish shades resulted in three colors with sufficient contrast to meet accessibility standards.

However, an important question emerged:
Is the third and darker color still yellow, or is it shifting towards a brownish tone?

Sometimes, it's necessary to step back from perfect calculations and techniques and take a more flexible approach to achieve our goals.

With this in mind, I tried different methods. I reintroduced orange from the original palette and used two hues, converging the central color to create a yellow-to-orange range. I iterated on these options several times, incorporating feedback from A/B tests shared with my peers. Eventually, I settled on a satisfactory solution.

Finally, I developed a green-yellow-red system that aligns with the palette and provides accessible use. The documentation included an illustrated guide to ensure these colors are used appropriately with others for effective contrast, especially in icons.

Now, let’s focus on the Categorical optimized palette.
For this update, my main concerns were maintaining contrast and minimizing color blindness issues. Another challenge was to avoid using colors from other sets, like the semantic palette, that can tend to be confused.

To update the palette, I studied the existing one to identify patterns and reusable structures. I reduced the number of colors and adjusted luminosity and saturation to find an ideal set. My first attempt resulted in three options.
After feedback from other designers and iterations, we chose proposal B, with the observations:

  • It’s a smaller set with a wider range of hues, ensuring good differentiation and adaptability.
  • I refined the initial hues and maintained the order to minimize challenges for colorblind users. You can find the colorblindness-proof tests in this tool.
  • Adjusting luminosity and saturation provided good differentiation for colors like yellow, red, and green compared to the more vivid semantic colors.

We updated our documentation to encourage designers to avoid extending the palette when possible. However, we also added an extended version for edge cases.

Want to see the final results in action?

Color  Palettes
A prototype demonstrating the practical application of the colors

What’s next?

While the NEXT Design System palette maintains its familiar approach with a few updates, I've started a new journey within another team that has its own design system, using NEXT's palette as a baseline. Here, we're embracing fresh perspectives, such as the color token approach, by establishing a unique base palette and incorporating it with meaning and usage guidelines.

Say hello!