Seamless theming with a tokenized design system
2023 – 2024 · Design system strategy and front-end development
Background
At ToolTime, we already had a design system in place, including a Figma library with most components. However, there was a disconnect between design and development workflows. Colors were named differently or applied directly from a static palette, which led to inconsistencies and made it difficult to scale the system effectively and efficiently.
The need for a more structured color and design system became critical when a significant business opportunity emerged for ToolTime: launching a white-label product. Adapting the UI quickly and consistently for different brands was essential, but the existing system lacked the flexibility to do so. It became clear that we needed a better way to handle colors and extend our design system to address these challenges.
Process
I took the lead in creating a tokenized design system that enabled dynamic theming and improved alignment between design and development. My role focused on systemizing our color usage, building the token framework from scratch, collaborating with engineers to integrate it into the codebase, and enabling designers to adopt the system with confidence .
Building the Tokenized Framework
One of the biggest challenges was rethinking how colors were applied across our design system. I transitioned from static palette references to a tokenized color system, mapping raw colors to semantic tokens such as text colors, border radii, and shadows. This abstraction allowed us to define and easily manage brand-specific themes, ensuring consistency across all components.
Tokens were managed directly inside Figma with Tokens Studio and integrated into an automated workflow. Changes made in Figma were synced with GitHub, generating an updated npm package for engineers. This made the workflow between design and development seamless, ensuring both teams worked from a shared source of truth.
Collaborating with Engineers
While I focused on creating tokens, I worked closely with the development team to integrate them into the codebase and assisted in directly theming components.
Empowering Designers
To help designers transition to the new system, I created detailed documentation and conducted training sessions. Recognizing the repetitive nature of updating existing screens, I developed a custom Figma plugin that automated tasks such as updating border radii or replacing icons. This not only saved time but also boosted designers’ confidence in using the new system.
Iterating Through Feedback
Throughout the project, I actively sought feedback from both designers and engineers. This collaborative approach helped me refine the system, ensuring it was practical to use for everyone. For example, feedback from early sessions led to improved naming conventions, making the tokens more intuitive to use.
Outcome
By introducing a tokenized design system, I helped transform how ToolTime’s design and development teams collaborate. The new system enabled dynamic theming, allowing us to quickly and consistently launch a new white-label product while reducing inconsistencies across the UI.
The design team now has the tools to adapt UI elements efficiently, and engineers can rely on a single source of truth for implementing designs. Feedback from the team highlighted how the system simplified working on the front end and boosted confidence in delivering high-quality results.
In addition to the operational improvements, my work on the design system – and in turn the white-label product played a key role in driving revenue for ToolTime.
Reflection
Personally, this project reinforced the importance of collaboration and iteration. Working closely with engineers and designers taught me the value of building systems that solve immediate challenges while supporting scalability and future growth. It was also a rewarding experience to think strategically about design at a broader, system-wide level.