In 2020, I took over Tigerhall’s product design from an external agency, transitioning the work in-house. Initially, the product consisted of simple page designs without a formal design system. Over time, alongside other designers, we developed a comprehensive design system that included typography, color styles, and a library of commonly used components, which significantly improved efficiency.

By early 2024, as the company grew with more designers joining and the product pivoted to serve as a white-labeled solution for client organizations, we identified the need to enhance the design system to support a more scalable approach aligned with our evolving business goals.

The platform needed to be able to change logo and buttons to suit a brands identity. We also find colours used in the design system lacking a dedicated assigning of it’s usage.

The product team conducted discussions to identify key issues and areas for improvement, utilizing a FigJam board and a Confluence page to help with collaboration.

The discussions covered:

• Understanding goals and needs of the team
• Identifying pain points and limitations of the current design system
• Assessing the potential impact of proposed improvements

We identified the key problems to address:

• Colors lacked assigned roles, leading to inconsistent usage.
• There was no efficient way to white-label the product for client organizations.
• The design system needed to support both light and dark modes.
• Components required updates to incorporate the new color tokens.

Through our research on design systems, we discovered that using variable tokens, a clear taxonomy, and layered collections provides an effective way to organize diverse needs. We determined that tokens should strike a balance between generic and specific as being too specific limits scalability.

We defined the specific tasks to focus on and maintained a central document in Confluence to record decisions as they arose during ongoing discussions.

To ensure the design system aligned with the engineering team’s language, we held collaborative discussions on token taxonomy and the structure of colour tokens.

We established a solid starting structure that keeps the taxonomy purposeful for its intended use while ensuring it remains scalable for component implementation.

We began creating collection layers in Figma using variables. By leveraging the links between each layer, we set up tokens to interact with one another and clearly define their usage at each level.

At this collection layer, we created all the basic color styles. These tokens don’t directly serve design purposes yet but ensure consistent color values throughout.

The role tokens layer assigns purpose and usage to the tokens defined in the primitive layer. This ranges from generic values, such as the primary background color, to specific ones like the text color for link buttons. In this layer, we also created different ‘modes’ to define an organization’s colors for interactive token values.

Finally, in the theme tokens layer, we map the tokens from the role tokens layer to both light and dark modes. This is the only layer from which components will source their values.

With the tokens in place, we can easily scale designs, enabling quick switching of an organization’s branding or toggling between light and dark themes all within Figma’s ‘Appearance’ panel. Additionally, future updates can be efficiently implemented by exporting a JSON file that developers can use directly in development.

Example of tokens applied across different organizations and light/dark modes on the platform’s homepage:

Since implementing the new token system, we have been able to quickly onboard multiple clients seeking to brand Tigerhall as their internal solution. This capability was a key factor in Disney choosing Tigerhall as their branded internal tool, “Careers@Disney.”

Some key takeaways:

• Involve engineers early: Engaging engineers from the start helps minimise rework and ensures technical considerations are addressed before development begins.

• Plan for future additions: Designing the token system with scalability in mind allowed us to continuously improve it and accelerate turnaround times.