Overview

LeafyGreen is MongoDB's design system supporting 80+ designers and hundreds of engineers. I led the work for this initiative which included research, implementation, and setting up processes for design and engineering to work with our tokens.

The opportunity

Design tokens had been deprioritized on our roadmap for a while. I found the right window when two things aligned: Figma shipped native variables support at Config 2023, and MongoDB was finally rolling out dark mode—the #1 user-requested feature. I pitched design tokens to leadership as a way to accelerate the dark mode initiative while solving our long-standing consistency issues, and got the greenlight.

Tradeoffs

We had two options: break everything at once, or gradually migrate. We chose gradual migration.

With 80+ designers and hundreds of engineers actively shipping, breaking changes would have stalled product work across the org. Instead, I retrofitted tokens into existing components so consumers got the benefits without needing to update anything on their end.

Impact

Improved design & engineering handoff

Design tokens became the single source of truth for component styling, eliminating mismatches between Figma and code that had been generating backlog tickets for months.

Faster dark mode workflows

Previously, designers had to manually toggle every component between light and dark variants. Screens that took 5+ minutes to duplicate in dark mode could now be done in seconds.

Reduction in Figma variants

Using our new tokens and Figma variables, we were able to cut the number of component variants in our Figma library by 50%.

Our design tokens in Figma.