Qualtrics Color Tokens
This project was completed during my time as a Software Engineer at Qualtrics, where I led the engineering implementation of a new color token system. Working closely with a UX designer, we created a shared foundation that aligned design and development around a single source of truth.
The challenge
Colors scattered across multiple codebases
The existing color system lacked consistency. Multiple teams maintained their own token libraries, alongside additional hardcoded values, leading to fragmentation and no single source of truth.
Disconnect between design and development
Color names differed across Figma and the codebase, which led to misunderstandings between designers and engineers.
Limited color scalability
There was no easy way to update the color of a specific UI element across multiple parts of the system or support dark mode.
The goal was to create a unified, central color token system as a single source of truth across the codebase and design, ensuring consistency and scalability across the product.
My role
Approach
The new color system was built around two types of tokens: base tokens and aliases.
1) Base tokens
Base tokens represent the raw color palette (e.g. blue-100 to blue-1000) and contain only color values.
2) Aliases
Aliases are semantic tokens (e.g. text-brand-default, border-danger-hover) that describe how a color is used throughout the interface. Each alias references a base token. These are the tokens developers should use throughout the codebase.
Advantages
Flexible color updates
This separation creates a layer of abstraction between the color palette and implementation. Instead of updating a color everywhere it's applied, we can simply change the base token assigned to an alias, automatically updating every element that uses that semantic role — for example, all button hover states. This makes color changes targeted, predictable, and much easier to maintain as the product grows.
Dark mode support
This same architecture also makes future dark mode support possible. In dark mode, base tokens automatically switch to their symmetrical counterparts — for example, blue-100 switches to blue-1000, and blue-200 switches to blue-900. This keeps the system consistent, simple, and well-organized.
The process
1) Defining the new token system
The UX team designed the new color token structure and mapped the existing color palette to the new base and semantic tokens.
2) Bringing the tokens into the codebase
My role was to translate that system into code by creating a centralized source of truth for color tokens. This replaced fragmented token libraries used across different teams with a unified implementation.
3) Updating the design system
Next, I updated the design system components to use the new semantic tokens, replacing legacy colors with the new architecture. Applying the tokens across real components helped uncover inconsistencies and edge cases that weren't apparent earlier. I worked closely with the UX team to refine the token definitions and validate the visual result before the new system was finalized.
4) Releasing and documenting the tokens
Finally, the updated tokens were released as part of the public design system package. A software engineer on my team documented the new color token architecture on the official company design system website, making it easy for anyone to understand and adopt.
Results
The project established a centralized color token system that serves as a single source of truth across design and development. By replacing fragmented color definitions with semantic tokens, the system became more consistent, scalable, and easier to maintain.
The new token system became part of the public Qualtrics Design System and is available for developers worldwide through the official npm package.
-
npm package: https://www.npmjs.com/package/@qualtrics/ui-react/
-
Official documentation: https://designsystem.qualtrics.com/design-tokens/color-tokens/
Takeaways
UX–engineering collaboration
One of the biggest lessons was the importance of close collaboration between UX and engineering. Regular feedback loops throughout the project helped ensure the final implementation remained consistent, practical, and aligned with the original design intent.
Designing for scalability
I gained practical experience designing and implementing a scalable color token architecture based on base and semantic tokens, and learned how this approach supports long-term maintainability.
Building for future theming
This project deepened my understanding of how a well-structured token system enables features like dark mode without increasing implementation complexity.