Seamless theming with a tokenized design system

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 applied directly from a static palette, leading to inconsistencies and making it difficult to scale the system effectively and efficiently.

The need for a more structured design system became critical when a significant business opportunity emerged: launching a white-label product. Adapting the UI quickly and consistently for different brands was essential, but the existing system lacked lacked the flexibility to do so. It became clear that we needed a tokenized 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 building the token framework from scratch, collaborating with engineers to integrate it into the codebase, and empowering designers to adopt the system confidently.

Building the Tokenized Framework

One of the biggest challenges was rethinking how colors and styles were applied across the 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 manage brand-specific themes effortlessly while ensuring consistency across all components.

Collaborating with Engineers

Collaboration with engineers was critical to the project’s success. While I focused on creating tokens, I worked closely with the development team to integrate them into the codebase and theme components effectively.

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 and 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 refine the system, ensuring it was intuitive and practical for everyday use. For instance, feedback from early sessions led to improved naming conventions, which made the tokens more intuitive for daily use. This iterative approach ensured the system was both practical and scalable.

Outcome

By introducing a tokenized design system, we transformed how ToolTime’s design and development teams worked together. The new system enabled dynamic theming, allowing us to quickly and consistently launch white-label products 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 workflows and boosted confidence in delivering high-quality results.

The white-label product became a significant contributor to ToolTime’s revenue, highlighting the business value of a robust design system. It not only improved operational efficiency but also paved the way for future white-label opportunities.

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.