Creating a scalable & adaptable color system for 120+ product teams @ Zebra Technologies

🧢 Role: Design Systems Designer
🧠 Demonstrated Skills: Design Systems, Color Theory, Analysis
⏳ Duration: 1 month
Diagram displaying cross section of business/custom needs with visual/functional needs

The Problem.

With rising regulations around accessibility requirements in software offerings around the world, Zebra’s Design System needed to offer a solution that was still flexible enough for customer white-labeling while remaining compliant. 

Being a global company, our products exist in several parts of the world. The European Accessibility Act (EAA) requires software, including mobile applications, to comply with at least the AA level of accessibility standards, ensuring that they are accessible to people with disabilities by incorporating design principles that facilitate usability and inclusivity.

We need this yesterday

While we could have done an audit of all of our existing components to define what was and wasn’t compliant, the fastest thing we could do for yesterday’s deliverable was to reevaluate our color system to ensure adequate color contrast that would directly influence all components.

Gray gray gray gray gray gray. No the other gray.

Our original color system consisted of 20+ grays which made it confusing for teams to understand how to use them. Our component library was still being built which left a lot of room for interpretation across the board.

Diagram displaying cross section of business/custom needs with visual/functional needs

Consolidating the grays

By understanding the various use-cases for grey, we were able to reduce our swatches from 20 to 10 and identified default and subtle swatches that would be used for text, icons, and borders while maintaining AA compliance.

Diagram displaying cross section of business/custom needs with visual/functional needs

Now the rest.

As for our colors, the first exercise I conducted was just capturing the contrast ratio performance of our palette. It was all over the place.

Diagram displaying cross section of business/custom needs with visual/functional needs

Using a contrast-ratio model

By mapping our primary colors in this manner, it was clear that we needed to realign our color swatches not only with each other to create a balanced palette, but also to target contrast ratios.

Diagram displaying cross section of business/custom needs with visual/functional needs
Diagram displaying cross section of business/custom needs with visual/functional needs
Diagram displaying cross section of business/custom needs with visual/functional needs

Following a detailed color analysis, I started iterating on proposals for our color system.

Diagram displaying cross section of business/custom needs with visual/functional needs

Upon further refinement, I proposed our new color system:

Diagram displaying cross section of business/custom needs with visual/functional needs

These new foundations served as a great out-of-the-box solution, but what about our white-label offerings?

For example, if CVS purchases our solution and requests that the solution be recolored to their brand’s red, we run into issues as their brand color is not AA-compliant.

By basing our color system off of target contrast ratios, we are now able to accommodate customization requests from customers through a systematic approach. By using a generator, we create a series that passes through the brand's token to create a color-series that can be applied to our components.

I parntered with our development teams to create a self-service tool for implementation teams to plug in their desired color and preview the adaptation in our tool.

Diagram displaying cross section of business/custom needs with visual/functional needs

Additionally and finally, our design system now has a well-documented color system that has increased awareness of accessibility standards across teams.

Diagram displaying cross section of business/custom needs with visual/functional needs
Diagram displaying cross section of business/custom needs with visual/functional needs