— — —
01 The Challenge
We had a lot of colors. A lot. The goal here was to consolidate all of the color tokens that had been added over the years and simplify things into a language that designers and developers could understand.
I was working with an existing enterprise system so I wanted to keep in mind that dramatic changes could cause disruption to the apps.
— — —
02 The Process
Like so many things, it started with an audit. I looked at all the tokens and different states of all components, then grouped those into similar categories, noting areas where changes would need to be made.
— — —
03 The Results
Big companies have big needs. For the color tokens, a system of five categories was developed to allow for the flexibility and scalability of a big design system.
Primitive and Abstract tokens form the structure that allow the design system to be white-labeled, meaning other companies can plug in their brand colors and fit right in.
Designers struggled to know what colors to use for backgrounds, borders, and text. A simple category of "System" tokens was made.
Sometimes a system needs to support customization, new components or patterns. The "Common" category was made so teams can visually match existing design system elements.
Finally, designers and developers need to be able to add new tokens for certain scenarios and keep things clean and understandable. This naming system was developed so teams know exactly what to name their new tokens.
Designers and developers are busy enough. To finish out the project and documentation, I added examples of how to use the new tokens takes the guess work out of something new. These show the tokens in Figma, but they line up with those made in code as well.
