NativeWaves • June 2024
Redesigning design tokens system for fast and consistent theming
Every broadcaster wanted NativeWaves EXP to feel like their product — with their own colors, typography, and visual identity. While we already had a design token system in place, it had grown overly complex and difficult to maintain. As a Focus Group Driver and UX Designer, I helped lead a redesign that simplified the system while making theming faster, clearer, and more scalable.
What Wasn’t Working
Over time, the token system had expanded to more than 200 tokens, many of which overlapped, were rarely used, or were tied too closely to specific components. This made customization slow, error-prone, and hard to reason about — both for designers and engineers. Instead of enabling flexibility, the system was becoming a blocker.
Figure 1 shows the old design tokens.
Objectives
The goal was to enable flexible customization of UI elements, like colors, typography, and border radius, so the app could easily match a customer’s branding. The aim wasn’t to allow every tiny detail to be customized, but to focus on the elements customers most often want to change and reflect their brand.
My Roles & Responsibilities
As Focus Group Lead, I took responsibility for guiding the whole process - from organizing and running workshops, to mentoring junior designer through the process, managing deadlines, and keeping design, engineering, and management aligned.
My role was both creative and managerial: defining which elements truly mattered for customization, prototyping them in Figma, and ensuring that decisions turned into clean, documented rules.
How We Approached the Problem
We started by reviewing real customer requests and identifying which UI elements were most frequently customized. Once identified, we grouped these elements logically and reduced them to a small set of semantic tokens.
For example, instead of assigning a primary color to dozens of elements individually, we introduced a single “highlight” token. Changing that one value instantly updated all related UI elements for a new customer brand.
Typography required a separate decision. Since many customers use different fonts for headings and body text, we created distinct tokens for each, allowing full control with minimal complexity.
Throughout the process, we made intentional trade-offs:
We chose semantic tokens over component-specific ones to keep the system flexible.
We avoided creating tokens for hover, focus, and pressed states unless they were truly reusable.
We documented every token centrally, including where and how it’s used, so the system stayed transparent and easy to evolve.
Figure 2 shows how we reduced the number of new tokens to just a few dozen tokens.
Typography required a separate decision. Since many customers use different fonts for headings and body text, we created distinct tokens for each, allowing full control with minimal complexity.
Throughout the process, we made intentional trade-offs:
- We chose semantic tokens over component-specific ones to keep the system flexible.
- We avoided creating tokens for hover, focus, and pressed states unless they were truly reusable.
- We documented every token centrally, including where and how it’s used, so the system stayed transparent and easy to evolve.
Figure 3 shows how changing the values of just three tokens results in a customized interface using the customer’s primary color.
Constraints & Trade-offs
During the redesign, we had to make several foundational decisions: whether to use semantic or component-specific tokens, how to handle interaction states like hover and pressed, and how to document the system, so it stayed easy to understand and maintain.
Through iterative prototyping and close collaboration engineering, we aligned on using semantic tokens as the foundation, as they offered greater flexibility and scalability across the product. We deliberately avoided creating separate tokens for hover, focus, and pressed states unless truly necessary, keeping the system lean and reducing complexity.
To ensure clarity and long-term usability, all tokens were documented in a shared, central space with clear naming, values, and references to where they’re used. This allowed the team to quickly understand the system and update it with confidence.
Figure 4 shows how colour and typography tokens can be adjusted to reflect a customer’s brand colours and font family.
Results & Impact
The redesigned token system became significantly leaner, easier to maintain, and faster to use. What previously took days of manual adjustment could now be done in a few hours by changing a handful of values. Branding became more consistent, collaboration between design and engineering improved, and customers received faster, more reliable theming that truly reflected their identity.
Figure 5 shows how border radius customization is applied, allowing us to shape components in line with the customer’s brand look and feel.
Lessons & Takeaways
This project taught me that less is more — a smaller, well-structured system is far more powerful than an exhaustive one, especially for us in NativeWaves. I also learned that leadership is a core part of design: guiding discussions, aligning teams, and maintaining momentum are just as important as the visual or technical output. With the right balance of structure and collaboration, even a complex system can become simple, scalable, and future-proof.
Read more about this work in my tech blog post
Blog post