Mineral UI is the open source design system that CA Technologies is building for use by all of our products. Color is a core building block of any design system, and it has proven to be one of the most challenging design problems we’ve tackled, due to the wide variety of requirements:

Mineral has accessibility features built in by default, so all of our color usage needs to meet WCAG 2.1 Level AA recommendations for contrast.

built in by default, so all of our color usage needs to meet WCAG 2.1 Level AA recommendations for contrast. Mineral is themed for consistent styling , and color ramps can be swapped out at any time. Ramp values, not individual colors, are applied to an interface element. For instance, the color blue-60 has to be the same perceived contrast as red-60 or teal-60.

, and color ramps can be swapped out at any time. Ramp values, not individual colors, are applied to an interface element. For instance, the color blue-60 has to be the same perceived contrast as red-60 or teal-60. Mineral will eventually support a dark mode , and we wanted the color ramps to be visually appealing in either a light mode or dark mode UI.

, and we wanted the color ramps to be visually appealing in either a light mode or dark mode UI. Color is used to describe status. Many of CA Technologies products are used to describe and/or report on the status of different things, such as destructive actions, story progression, router availability etc. Color is an important tool to provide at-a-glance meaning, so we maintain several UI component variants as foundational concepts in our system. These colored UI variants need to work harmoniously with all of our color themes.

While attempting to solve this problem for ourselves, we stumbled upon a methodology of creating a themable, flexible color palette.

The new color ramps described in this article are being implemented in mineral-ui.com. If you want to try them now, check out our design assets.

mineral-ui.com

Mineral UI is an open-source React based design system created to build appealing modern software experiences. It is the culmination of designers and developers working together to give teams the ability to ship high-quality products faster.

Scoping from Hindsight

Creating a color palette is one of the earliest things we thought about when creating the design system, since it’s so fundamental to design and development decisions. Similar to many of the things we’re learning, we see seemingly obvious issues in hindsight, and our desire to improve has pushed us to explore the fundamentals of others’ decisions before making our own.

Change management is hard, because color is so far-reaching. We’re finding that making seemingly innocuous changes to color is very disruptive to teams who have already started to build products based on Mineral, so this most recent color revision represents our goal to prevent breaking changes going forward.

From the Plasma Design System. Foundational elements, like color, are hard to change later

When scoping color for our revision, we determined our palette needed to contain the following attributes:

Theming : Themes provide a consistent look and feel across products, and eliminates guesswork.

: Themes provide a consistent look and feel across products, and eliminates guesswork. Thematic harmony : Each color theme should have the same value steps in tone.

: Each color theme should have the same value steps in tone. Distinct hue breakpoints : Many of our products are sold in modules or suites, so the colors need to be similar enough to feel like a family, yet distinct enough to indicate to a user that they are in a different module within the product family.

: Many of our products are sold in modules or suites, so the colors need to be similar enough to feel like a family, yet distinct enough to indicate to a user that they are in a different module within the product family. Scaleable and additive : Color palette should have a systematic pattern which can be added to as the needs of the design system grows.

: Color palette should have a systematic pattern which can be added to as the needs of the design system grows. No breaking changes: Going forward, we wanted our color system to work in any situation so there are no more disruptive changes to designs that currently use Mineral.

Going forward, we wanted our color system to work in any situation so there are no more disruptive changes to designs that currently use Mineral. Accessible: Our goal is to make sure everyone has a great experience when they use our products. Mineral supports Level AA color contrast. Visual presentation of text must have a 4.5:1 color contrast ratio in every UI component.

Research

We did a deep-dive analysis of other themed color palettes that use ramps, by investigating palettes from IBM Design, Material Design, and Open-Color. (Sidenote: If you’re interested in exploring other design systems, UXPin’s Adele is a great place to start.) The purpose of the research was not to copy and paste their ideas, but rather to “look under the hood” and understand the underlying decisions behind their color selections.

During the research, we focused on the following:

Hue : Does each color palette use a single hue value? Or do hue shifts occur across one ramp?

: Does each color palette use a single hue value? Or do hue shifts occur across one ramp? Pattern : Does value selection show a steady pattern? If there is a pattern, is there a consistent technique used across the other palettes?

: Does value selection show a steady pattern? If there is a pattern, is there a consistent technique used across the other palettes? Saturation and Brightness (lightness): How Saturation and Brightness work when each value increases or decreases across the ramps?

RGB, HSB, HSL, or HEX? Color modeling is a complex topic that deserves its own article. But briefly, here’s what matters: In these examples I’m working with HSB (Hue, Saturation, Brightness), because it is one of the more user-friendly color pickers — perfect for inspecting and tweaking colors. Yet, HSB (360×100×100= 3,600,000 colors) can only express about 21.5% of the RGB color space (256×256×256=16,777,216 colors). HSB is a good tool for exploring color, but to avoid rendering issues between different interpreters (browsers, design software, displays etc.) the final color definition is most accurately recorded as RGB or HEX values. Another important note: HSL and HSB are separate models, which have different principles, and should not be confused. These examples are in HSB.

I took example color ramps from each design system and mapped each swatch to a Saturation and Brightness grid. I also tracked hue shifts within a ramp.

IBM Design

IBM’s Color palette uses the full range of saturation and brightness, but it was challenging to identify uniform patterns among the different ramps. When looking at Green (see below), IBM broadly shifts the Hue value between 78 and 120, which can be difficult to consistently replicate and manage within other colors. IBM clearly values accessibility, because the contrast ratio is consistently designed to be 4.5:1 or higher when the value is 50 or higher.