NativeWaves EXP framework integrates into the customer’s existing application and enhances it with advanced features such as live stats, player data, replays & highlights, various camera angles and much more. To keep this experience consistent and easy to manage, we have built a whole design system for it. 

However, each customer wants our UI and functionality to match the look and feel of their brand – colors, font family, border radius, and all. Without a smart system that supports such changes, it would be hours, or even days, of trying to tweak styles across the entire interface, trying to match the customers' brand. This was the reason we decided to build our tokens system. 

Design tokens are reusable variables that store design values such as colors, typography (text styles), border radius (how rounded corners are), spacing, and other styling values. Our design token system enables us to customize the UI quickly and efficiently across different platforms and for all customers. Think of tokens like ingredients in a recipe: change the spice once, and the flavor of every dish using that spice is updated instantly. In the same way, changing one token updates the entire interface consistently. This gives us the flexibility to adapt nearly every component element, ensuring both speed and consistency in our workflow.  

While working with the system, we realized there was room for improvement. To tackle this, we carried out an in-depth analysis of past customer requests, focusing on which UI components were most often adapted and what additional elements could enhance a customer’s brand identity. These findings encouraged us to rethink our approach and simplify the token system, making it more intuitive, focused, and easier to maintain. 

Building on these insights, we refined the system into a smaller set of well-structured and consistently maintained tokens, each tied to a specific UI element that is most likely to be customized. Concentrating on these high-impact tokens allows us to make targeted adjustments quickly and with precision, streamlining the entire customization process. Today, working with tokens has become straightforward: we simply choose the component to update, find the relevant tokens, and adjust their values to achieve the desired outcome. 

Figure 1 shows how changing the values of just three tokens results in a customized interface using the customer’s primary color.

The updated token system includes clear guidelines for handling new customer requests. When a customer asks for a customization that doesn’t match our existing tokens, our team checks whether this adjustment could be useful to other customers in the future. If yes, we integrate a new token into our system. Otherwise, we address it through custom coding on a case-by-case basis.

Figure 2 shows how colour and typography tokens can be adjusted to reflect a customer’s brand colours and font family.

To maintain efficiency and consistency, we are having regular checkpoints and encourage ongoing communication between design and engineering. By documenting decisions and setting clear guidelines, we keep everyone informed, aligned, and productive. 

The results have been transformative. Our streamlined approach lets us deliver professional, customized interfaces faster than ever, while improving responsiveness to customer requests and overall team efficiency. 

Figure 3 shows how border radius customization is applied, allowing us to shape components in line with the customer’s brand look and feel.

Carefully structured design tokens are extremely valuable. They help our team work smarter, customize more quickly, and create outstanding experiences that match our customers’ brands perfectly. For some companies, having more tokens makes their work easier and faster. But for us, having fewer tokens has provided greater clarity, quicker customization, and happier customers.