Project
As part of a broader design system evolution, I led the overhaul of our color and token structure, which had grown unmanageable and inconsistent over time. The system had non-semantic names, duplicated tokens, and hardcoded values scattered throughout the interface, making it difficult to scale or support theming—especially for accessibility and dark mode.
Goals
Normalize and consolidate the color and token system
Ensure accessibility compliance (contrast ratios, legibility)
Improve scalability and maintainability for theming (light, dark, custom themes)
Current state
The current Color/Token List
The project began with an audit of the existing color token set. The list revealed significant issues: duplicate values under different names, vague or non-semantic labels, and many hardcoded hex values throughout the interface.
<$themes>
<default theme>
themeDarkColor=#1a143a,
themeDarkModalShadow=#1a143a,
themeWindowTabsBack=#1a143a,
themeDarkColorOneHalf=#1a143a,
themeBaseColor=#1e13a6,
themeBaseColorDarkVersion=#06508a,
themeBaseColorLightVersion=#bedaf0,
themeSubMenuBackground=#13007d,
...Rebuilding Prototypes
Since no usable design files existed, the main parts of the UI were recreated in Figma. These reconstructions allowed for prototyping, comparison across themes, and clearer testing of color applications.
Mapping Tokens in Screenshots
To understand real usage, tokens were mapped over annotated screenshots of the product. This helped identify inconsistencies across screens and themes, and offered a clearer view of how tokens were applied in practice.
Tailwind Color Mapping
Tailwind-compatible alternatives were defined for legacy tokens to align with the development workflow. These new values were applied to the old token structure, bridging the gap between existing code and a more maintainable system.
first iteration
Creating a New Theme with New Colors
A new theme was created by assigning the updated color values to the existing tokens. This transitional step ensured visual improvements could start being implemented without waiting for the full token overhaul.
Drag to view all
Modernizing the Interface
While applying updated colors, small adjustments were made to modernize the interface—enhancing elevation, improving text clarity, and refining overall color balance.
Review
Replacing Hardcoded Colors
Hardcoded color values were identified and replaced with corresponding tokens. This reduced visual inconsistencies and allowed themes to be applied systematically across the interface.
Quality Assurance
Twelve existing themes were evaluated, but only three initially passed basic WCAG contrast tests. Adjustments were made to each to ensure accessibility while maintaining brand integrity.
TOKENS
Working with tokens
Defining Semantic Naming
A completely new set of tokens was introduced, based on semantic naming principles. These were grouped into two main categories: Theme colors and Common colors, allowing better scalability and logic.
Reducing the Token List
Through consolidation and removal of redundancies, the token list was significantly reduced. The system became easier to understand, maintain, and extend.
Expanding to All Themes
With the new structure in place, color values for all twelve themes were defined.
This process became more efficient thanks to the token grouping, enabling fast creation of consistent themes.
Reworking Dark Mode
Dark mode was previously poorly configured, with mismatched or missing token values. The new grouping structure—separating Theme and Common colors—made defining and applying dark mode more intuitive and reliable.
Final Review
A complete QA pass was conducted to validate the themes, check contrast, and ensure there were no remaining hardcoded or legacy tokens in use.
Results
Significant Reductions
Token count reduced from 80 ro 33 tokens through consolidation and semantic naming
Better processes
Token structure aligned with Tailwind, improving handoff and development speed
Easier adjustments
Theming now takes minutes instead of days
Accessibility prioritized
All 12 themes rebuilt aligned to accessibility standards