Messenger · Meta

Messenger Design System

The brand-accurate libraries and token layer behind Messenger, powering theming, scale, and a faster way for the org to design.

5
Product libraries led
200+
Components shipped
84
Illustration templates
−75%
Support requests
Company
Meta
Product
Messenger Design System
Time
2019–2023
Role
Production Design Lead

Messenger Design System (MDS) is the foundation Messenger’s product teams design on. I led production for the system, owning the libraries, the tokenization that made theming possible, and the tooling and working model that let dozens of designers and engineers build on it. The work broadened my scope into management and drove alignment well beyond Messenger.

The challenge

Messenger is a mature, high-scale product with many surfaces and teams designing in parallel. The system had to stay brand-accurate and consistent across product areas while moving fast, and it had to treat the design org as its first user, not just ship components.

The team was small relative to the surface area it supported, so the real problem wasn’t drawing more components. It was building foundations and processes that let the whole org move without overwhelming the people maintaining the system.

Product surfaces
Messenger
Chats
Calls
Stories
Communities
Notes
Status
Wellbeing
Business

Rebuilding the foundation

I led the strategy and creation of five Messenger product libraries, brand-accurate, scalable foundations with components and an icon system, and stood up new product systems for Wellbeing and Business surfaces alongside a revised large-screen library.

Each was built to be accurate and effective on its own while sharing a common foundation, so teams across Messenger could design on consistent building blocks.

Five product libraries, one foundation
Messenger
Wellbeing
Business
Large-screen
Icons
Shared Foundation
ColorTypeSpacingGridIcons

Tokenizing for theming at scale

I drove the rollout of tokenization across Messenger, replacing hard-coded values with a semantic token layer that unlocked new theming, including one-click dark mode, while improving visual accuracy and team efficiency.

I was also a key driver of director-level alignment on tokenization across Meta’s design systems, helping multiple systems converge on a shared approach rather than each solving it alone.

Tokens
Color
Typography
AaSF Pro Text
Elevation
Spacing
Opacity
Radius

Library Swapping

I proposed and led “Library Swapping,” a tool that lets designers convert a mock between operating systems or design systems in a few clicks, cutting the time to produce platform variants and surfacing Android designs that had been underrepresented in the workflow.

It shipped as a stretch goal the team hadn’t originally committed to, and became a meaningful efficiency win for the broader design org.

A working model the team could run on

Components are only half of a system; the other half is how people use it. I revamped the working model and tooling, increasing team autonomy by 25% and cutting unnecessary support requests by 75%, so the team spent less time fielding one-off questions and more time on foundations.

To keep the feedback loop open, I co-led a Design System Ambassador program that built relationships across the org, gathered structured feedback, and turned library audits into two-way conversations.

Governance
GuidelinesClear principles
ReviewsQuality & consistency
SemverPredictable updates
ChangelogTransparent communication

Impact

5 libraries

Brand-accurate product systems built and launched across Messenger surfaces.

1-click

Dark mode and theming unlocked by driving tokenization across the app.

−75%

Unnecessary support requests cut by rebuilding the team’s working model.

+25%

More team autonomy from new tooling and a clearer contribution process.

200+

New components shipped, plus 84 UI illustration templates.

Org-wide

Drove director-level alignment on tokenization across Meta’s design systems.

□
Hero shot, Messenger libraries in context
Replace with Figma export

Reflection

A design system’s real users are the designers and engineers who build on it. The work I’m proudest of on Messenger isn’t a single library, it’s that the system got faster to use and easier to contribute to, because the foundations were tokenized to scale and the working model was built to share. Components ship; the leverage is in the process around them.

More Projects

▲
Reality Labs Design System
Meta · VR
◉
Instagram Messaging
Meta · Web · Mobile
→
Driver AppStore & PlayStore
Uber · Web · Mobile