A composable Digital Experience Platform built for Kraft Heinz. A shared design system and engineering foundation that lets teams launch new experiences through themes, tokens and reusable building blocks instead of redesigning from scratch.
Kraft Heinz owns more than a hundred brands across multiple markets. Over time, websites, teams and workflows evolved independently. Different agencies, different systems and different approaches created fragmented experiences and duplicated work.
Launching something new often meant solving the same problems repeatedly.
The opportunity was to build the opposite of that: one shared platform, one component library and one scalable foundation where experiences could be assembled rather than rebuilt.
A living system lets teams create memorable experiences faster because the hardest problems are already solved.
We started with strategy, not components. I led the work around defining a scalable system capable of supporting very different experiences while keeping a shared foundation underneath. Together with engineering partners, we translated design decisions into reusable system rules.
Color, typography, spacing, radius and motion became configurable properties instead of one-off decisions. Everything was designed to be flexible, themeable and scalable.
The goal was not to create static components. It was to create a system capable of evolving.
Fig 01 · Token Layer
Every visual decision lives as a token. Swap a token, re-theme a brand. Below, a small slice of the surface: color, type, spacing, radius and motion.
Fig 02 · The Method
The system followed atomic principles and scaled from foundations into complete experiences. Rather than creating isolated pages, we built a system designed to grow.
Fig 03 · Reusable Components
A sample of the shared component surface. Each one ships with variants, states, accessibility contracts, and theme-aware defaults.
Fig 04 · Theme Slots
Five theme slots, same underlying system. Each one a few token values away from the last.
We delivered a living design system including shared Figma libraries, reusable components, tokens in code and documented component contracts.
The work also established stronger collaboration between design and engineering teams while creating a scalable foundation that internal teams and external partners could build upon.
Instead of redesigning every experience, teams could configure and scale.
Outcomes ✦ The Numbers
What the system unlocked for brands, for teams and for the business, once the foundation was in place.
One shared foundation across a global ecosystem.
Built on reusable patterns and components.
A scalable framework for experiences at enterprise scale, first of its kind in the space.
Atomic, token-driven and built for long-term evolution.
The Team
Gratitude to the cross-functional crew who built the foundation. Strategy, design, engineering and the client partners at Kraft Heinz who bet on composability.