Scaling a meditation brand across platforms
Headspace has brought meditation and mental health tools to more than 100 million members globally. But the company's reach extends far beyond its core app. Partnerships with brands like Starbucks, Netflix, Nike, and Star Wars, plus offerings on wearables and in VR, mean the design team must maintain a consistent, recognizable brand across an increasing number of touchpoints. That growth put pressure on a design system that was originally built for a simpler era.
The old system, though housed in Figma, was largely manual and leaned heavily on plugins. Colors existed as hard-coded hex values, leading to drift and inconsistency. A single tweak to the palette meant hours of tedious work, and a system run by just one designer was becoming a bottleneck as the product surface area expanded. Plugins provided workarounds but added friction, especially for designers who didn't use them daily or had to reset them after every style update.
The catalyst for change came on senior product designer Steven Sczepanik's first day. The company announced a merger with Ginger, the virtual mental healthcare provider, which would eventually become Headspace Care. Sczepanik suddenly faced a dual challenge: fix the known inefficiencies and make the system flexible enough to support multiple brands. The solution was to rebuild components and patterns from scratch and establish Headspace's first token system.
From manual tokens to Figma variables
Even after the token system was in place, the workflow remained cumbersome. Sczepanik spent two years building the current system but was still creating massive reference sheets for light and dark mode, spelling out every value by hand. It was effective but error-prone, with engineers mixing up tokens across modes.
Figma's introduction of variables at Config 2023 changed the calculus. Sczepanik rebuilt the system in a day, plugging all color tokens and typography into variables. Within a month, the changes were live for designers and engineers across the company. The ability to separate tokens into distinct modes—light and dark—collapsed what was once an hour-long color-swapping process into about a minute. That speed matters for Headspace, where dark mode is a core feature for users winding down before sleep.
“The introduction of variables was music to my ears. The day after Config, I opened up my laptop, plugged in all of my color system tokens and typography as variables, and was able to implement everything within a day.”
The adoption of variables also cleaned up the design files. Roughly 85% of a single design file is now made up of tokens and components drawn from the design system. Sczepanik reports time savings of 20-30% on straightforward tasks and up to 50% on complex projects. That reclaimed time lets designers focus on higher-impact work, like pairing members with personalized content or scaling in-app community features. And because Headspace serves a global audience in five languages—English, French, German, Spanish, and Portuguese—variables make it easier to spin up localized marketing and app screen designs in minutes.
A single source of truth for engineers
The new system replaced manual token sheets with a centralized approach, reducing misinterpretation and accidental edits. Variables also made the design files more approachable for engineers. Features like Dev Mode give developers direct access to tokens for colors, spacing, sizing, and border radius without digging through documentation. Increased engagement from the engineering side is evidence the system is working.
The Ginger merger tested the design system's new flexibility for a unified experience. Bringing coaching and therapy tools into Headspace meant cataloging all legacy Ginger screens, layouts, and component variables, while partnering with the brand team to align visuals with Headspace's identity. Sczepanik used multi-library support and variables to spin up a local design system for the new “Care” tab. The result: code completion finished two months ahead of schedule. Nick Hayward, senior iOS engineer at Headspace, estimates the new system has accelerated the overall release cycle by 30%.
The move to variables and a token-first structure has turned Headspace's design system into a dependable foundation—one that keeps pace with a growing product line and a widening audience, without compromising the brand's visual identity or the team's ability to ship.
