Júnior Morasco
Open to Opportunities
Index/ Work/ Kraft Heinz DXP · Design System
✦ Strategy · Design · Development · Composable DXP · 2022 · Ongoing

One system, 100+ brands,
zero rebuilds.

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.

(01) Client Kraft Heinz
via Apply
(02) Role Lead Product Designer
Design System Owner
(03) Scope Strategy · Design System · Tokens
Component Architecture
(04) Platform Composable DXP
Atomic Design · Headless
(05) Reach 100+ brands
120+ sites worldwide
2022 · Ongoing · Systems
Apply Kraft Heinz Design System Owner
Project Brief

One core. 100+ brands. Zero rebuilds.

Brands100+
Sites120+
TokensThemed
Years2022 · Ongoing
DXP · Tokens · Figma In Production
The Problem Context

100+ brands.
No shared foundation.

Audit · Strategy ·
Stakeholder alignment

Kraft Heinz owns over a hundred brands across many markets. Over time, sites, teams and workflows grew their own way. Different agencies, different systems and different approaches added up to fragmented experiences and duplicated work.

Launching anything new often meant solving the same problems all over again.

The opportunity was the opposite of that: one shared platform, one component library, one foundation, where experiences get assembled, not rebuilt.

A living system lets teams build memorable experiences faster, because the hard problems are already solved.

Fig 00 · Many brands, one shared foundation. 00 / —
The Strategy Foundations

From design decisions
to design tokens.

Strategy · Visual direction ·
System rules · Tokens

We started with strategy, not components. I led the work on shaping a system that could carry very different experiences while keeping a shared foundation underneath. With engineering partners, we turned design decisions into system rules.

Color, type, spacing, radius and motion became configurable properties, not one-off choices. Flexible, themeable, scalable by default.

The goal wasn't static components. It was a system that could evolve.

Fig 01 · Foundations + Library

Tokens, atoms,
components in a library.

The technical heart of the system. Design tokens at the bottom, typography and atomic primitives in the middle, molecules and components on top, packaged as one library that ships to design and engineering at once.

Fig 01 · The library. Tokens, atoms, molecules and components in one shared surface. 01 / 02

The Method · From tokens to experiences

Step 01 01
Foundations Tokens, icons, typography and core interaction patterns.
Step 02 02
Atoms + Molecules Buttons, inputs, chips, cards. The smallest reusable patterns.
Step 03 03
Components Composable organisms: navigation, hero bands, recipe cards, product stories.
Step 04 04
Templates Flexible page structures designed to support different business goals.
Step 05 05
Experiences Real products and experiences launched globally.

Fig 02 · Flexibility

Swap tokens.
Swap brand.

The same underlying system, themed per brand. Tokens carry the personality (color, type, motion, radius) so any product team can re-skin a surface in days, not quarters. The system can host anything we point it at.

Fig 02 · One system, many brand themes. Token swaps, not redesigns. 02 / 02

Theme Slots In Production · Cited

Why it works

A token is a contract, not a pixel. Teams ship against the contract, and the system enforces accessibility, consistency and brand fidelity on their behalf.

What it unlocks

If a brand can be reduced to tokens, the system can host it. New brand, new market, new product. Same foundation, configured.

The Delivery What we shipped

A platform, not
a component library.

DS Docs · Figma Library ·
Code Components · Playbook

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.

Fig 05 · From strategy to reusable components, end to end. 01 / 02
Fig 06 · The component library in Figma, as it ships to teams.02 / 02
Fig 07 · Design tokens rendered as properties in code, the single source of truth.02 / 02
The Handoff · Design Guide Fig 03

Documentation, built
for the village.

Docs · Guidelines ·
External partners

The system only works if everyone building on top of it speaks the same language. I also led the Digital Experience Platform Design Guide, the documentation layer that defines the foundations of all Kraft Heinz's brands new digital experience.

Written primarily for our agency partners, designers and art directors, but useful for anyone creating new experiences with the system. One source of truth: examples, component variations, asset and copy specifications, and a clear read on what the system can (and can't) do.

Fig 03 · The Design Guide. The start-here surface for agency partners. 03 / 03

What to Expect · Inside the guide

01 · Show 01
Examples Real components in action across brands, so partners see the system at work before they spec it.
02 · Flex 02
Component variations Every state, size and theme a component supports, with the rules for when to reach for which.
03 · Spec 03
Asset specifications Image ratios, formats, weights and export rules. The contract for anything pixel-shaped.
04 · Write 04
Copy specifications Length, tone and structure for headlines, body and CTAs across every component surface.
05 · Scope 05
Capabilities & limits What the system enables today and where the edges are. Honest guardrails over surprises later.
Who it's for

Agency partners, designers and art directors shipping new experiences. Anyone outside the core team who needs to build with the system, not against it.

Why it matters

A great system without a guide is tribal knowledge. The guide turns the platform into something dozens of teams can actually pick up and run with on day one.

Outcomes ✦ The Numbers

Leverage, compounded.

What the system unlocked for brands, for teams and for the business, once the foundation was in place.

100+ Brands supported

One shared foundation across a global ecosystem.

120+ Websites worldwide

Built on reusable patterns and components.

1st Composable DXP

A scalable framework for experiences at enterprise scale, first of its kind in the space.

° Future ready

Atomic, token-driven and built for long-term evolution.

The Team

It takes a village.

Gratitude to the cross-functional crew who built the foundation. Strategy, design, engineering and the client partners at Kraft Heinz who bet on composability.

Design Lead
Júnior Morasco DS + Component Architecture
Collaborators
Aaron Aylward Design Lead
Collaborators
Alex Soares Principal Design
Collaborators
Max Ramos Design
Collaborators
Isidora Amenabar Design
Client
Kraft Heinz Global Digital Experiences
Agency
Apply Strategy · Design · Development
Discipline
Design + Engineering Co-authored the token layer
Stack
Figma · Tokens Studio · React Headless CMS + CDP
Years
2022 · Ongoing Ongoing platform
← Previous
Prisma
UX Lab.
Facilitation · Workshop · 2019
Next →
Kraft Heinz Global
Brands.
120+ sites · worldwide · 2022 · Ongoing