Kraft Heinz manages 107 brands across dozens of agencies worldwide, creating significant challenges in maintaining a consistent look and feel across all brands. Historically, the design system was development-led, with patterns added directly to a code repository. An internal design team collaborated with developers to create Figma-based components, which were then used in a flex template. This template was exported as a disconnected .fig file and shared with partner agencies.
‍
Agency designers were expected to use this white-labeled flex template, skin it for specific brands, and build layouts accordingly.

However, this process was fraught with issues:
• Agency partners often skinned brands incorrectly.
• Incorrect components were used in layouts (e.g., mobile buttons in desktop designs).
• Designers detached components to make alterations or created entirely new components.
‍
These practices significantly increased development time and led to numerous forks in the code repository, making it nearly impossible to maintain and extremely costly for Kraft Heinz.

The Challenge
I was brought in as a design system expert on a freelance contract to tackle this challenge. Treating it as an end-to-end project, I began with a six-week discovery phase.

During this time, I:
• Interviewed internal designers who created the flex template.
• Consulted developers managing the component repository.
• Spoke with project managers to understand timelines and whether upcoming projects could wait for an updated system.
• Engaged partner agencies to identify their pain points and how they currently used the system.
‍
Based on these insights, I devised an action plan to overhaul the design system.

The Solution: A Token-Based Design System
The core solution was to move to a token-based design system, which drastically reduced the number of components.

For example, the flex template included 87 button variants. Multiplied across 107 brands, this meant a minimum of 9,300 button variations! With design tokens, this was reduced to a single component, dynamically styled with tokens based on brand, responsive layout, and state.
‍
We partnered with Token Studio to implement this solution.

The system was built on three layers:
1. Core Tokens: Contained all baseline information about each component.
2. Semantic Tokens: Stored information at the white-label level, including all button variants, responsive sizes, hover states, and other attributes.
3. Mapped Tokens: Applied brand-specific attributes such as colours, fonts, border radii, and drop shadows, to name a few.
‍
Workflow Improvements
Agency partners could now work from a live Figma file instead of a disconnected .fig file. They could create layouts and select the brand they were designing for directly in Token Studio.

The system handled the rest:
• Layouts automatically updated based on responsive sizes.
• Themes dynamically adjusted for each brand.
• Light and dark modes could be applied effortlessly.
‍
Governance and Maintenance
Governance of the new system required a shift in responsibilities. The internal design team transitioned from firefighting to a proactive role focused on:
• Conceptual ideation for new component requests from partner agencies.
• Designing and testing new components.
• Addressing bugs and continuously improving the system.
• Building new design tokens when needed.

A ZeroHeight page was established to announce new releases, showcase new components, and provide skinned examples and best practices. Partner agencies could also use this platform to request new components. Each update was treated like a product enhancement, with detailed documentation, do’s and don’ts, and examples for optimal usage.
‍
Development Enhancements
Developers benefitted significantly from the new system. By connecting Token Studio to GitHub, tokens were fed into Tailwind, enabling the same streamlined skinning process and component reduction on the development side. This made development faster, more accurate, and less reliant on custom work.
‍
Outcomes
This project went beyond a design exercise—it was a self-led digital transformation. The new token-based design system not only improved design consistency and efficiency but also revolutionized the workflow for both designers and developers. It was an immense undertaking, but the results were transformative and something I’m extremely proud of.