Building a design system that breathes with Headspace

Headspace, the provider of the world's most comprehensive digital mental health platform, operates in a millennia-old industry that has seen explosive growth. From 2012 to 2017, the number of people who meditate in the U.S. has tripled, with the industry’s valuation expected to grow six-fold in the coming decade.

Put simply, long gone are the days in which meditation was accessible only to the “Eat, Pray, Love” enthusiast who quits technology and pursues a five-year sabbatical to practice meditation in a remote corner of the world. With Headspace, meditation and mental health support have become accessible to everyone, and just as the market shows no signs of slowing, neither does Headspace. Figma enables Headspace to keep up with this growth with a design system optimized for scale.

Future-proofing their design system

Through robust partnerships with brands like Starbucks, Netflix, Nike and Star Wars, and product offerings spanning their app, wearables, and recently VR, Headspace has built best-in-class meditation tools to serve 100+ million members globally. And with so many touchpoints, the Headspace design system is critical to establishing and maintaining their signature brand, both on and off the screen. This rapid growth, however, highlighted inefficiencies in their existing design system, which had been manual, heavily reliant on plugins, and not optimized for scale—ultimately preventing design and engineering teams from having a source of truth they could depend on.

Although built in Figma, the previous Headspace system didn’t leverage the advanced design system features that could streamline the team’s workflows. For example, colors were previously hard-coded values, resulting in multiple hex code variations and an inconsistent user experience. Even minor changes to the color palette were time-consuming—a one-person design system team could spend hours or even days on these simple tasks.

While plugins operated as a quick fix unlocking more use cases for Headspace, they weren’t as seamless or intuitive as a native solution. Certain plugins required a higher learning curve for designers who weren’t using them daily, or required resetting every time they tweaked the color styles in Figma.

In 2021, news of an upcoming merger with the virtual mental healthcare company, Ginger, which has since been rebranded to Headspace Care, meant two things for Steven Sczepanik, Headspace’s senior product designer on design systems: he needed to not only address the existing inefficiencies, but also ensure the system was ready for the upcoming merger and any other partnerships down the road. Steven recalls, “On my very first day with the company, we received news of our merger with Ginger. This prompted a shift from a single-brand design system to one that could accommodate multiple brands.”

After auditing the existing system, Steven rebuilt components and patterns so that they were fully accounted for and easier to reference for both designers and engineers, creating Headspace’s first token system.

Supercharging their design system with variables

Before adopting variables, Steven had leveraged a variety of plugins to streamline his workflows. Despite having spent two years building out his current system, it only took a day for Steven to implement variables. He recounts Config 2023 where variables was launched: “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. In less than a month, these changes were successfully rolled out to our designers and engineers. That showcases how intuitive and efficient variables are to use.”

Getting a better night’s sleep is one of the main reasons people turn to Headspace, underscoring the need for a highly functional dark mode. Variables has changed how Headspace can implement and maintain color values for light and dark mode, vastly streamlining an hour-long process into one minute—making Headspace accessible to night owls and early birds alike.

For Steven, the time-savings are a game-changer: “I cannot emphasize enough how powerful the use of variables has been for our teams. Separating these tokens into different modes is effortless, and it works almost instantly. It has resulted in significant time savings for our team.”

At Headspace, on average 85% of a single design file is made up of tokens and components sourced from their design system. This high utilization of tokens and variables has resulted in time savings of 20%–30% for more straightforward tasks and time savings of up to 50% for projects that are more complex.

Boosted productivity enables the design team to innovate on the projects with the biggest impact to members—some projects include pairing members with custom-tailored content and scaling community discussions within the app.

As Headspace supports a global audience, their app is currently accessible in five languages: English, French, German, Spanish, and Portuguese. Using variables, Headspace can swiftly build marketing and app screen designs, making it easier to reach a broader audience within minutes.

Breathing easy with Figma

Prior to variables in Figma, the Headspace design system was not only incredibly manual to create, but also prone to misinterpretation, unintentional editing, and time-consuming fixes. Steven recalls building the first iteration of the token system: “I used to create an extensive sheet for both light mode and dark mode, typing out every detail into a single file. This method had been a necessity to get the foundations set up, but it was prone to errors with engineers mixing up the tokens in various ways. Transitioning into the integrated variables world has simplified everything into a convenient one-stop shop.”

Following the merger with Ginger, Headspace’s members can now access mindfulness tools, coaching, and therapy in a single platform and get connected to the most personalized mental health care. Figma enables Headspace to seamlessly introduce the additional health services within their existing app, through the coming “Care” tab, with little disruption to their members. To seamlessly integrate both brands and establish a unified UX, this project required cataloging all Ginger legacy screens, layouts, and component variables, and partnering with the brand team to align existing graphics to the Headspace brand. Throughout, Steven utilized Figma’s multi-library feature and variables to quickly develop a local design system for the coming tab, ultimately meeting the code completion deadline two months ahead of schedule.

At the end of the day, the Headspace design system serves as a single source of truth. Since implementing variables and other new Figma features like Dev Mode, the design system is more approachable to engineers, as evidenced by increased engagement. Anyone can jump into a Figma file and get started: “Whether it’s using primitives for colors, spacing, sizing tokens or even border radius, variables has proven immensely valuable in our component creation process. They ensure precise referencing of specific tokens and facilitate easy access for engineers within Dev Mode.” Nick Hayward, Headspace's senior iOS engineer estimates that the new design system has accelerated the product release cycle by 30%.

With Figma’s advanced features, Headspace can breathe easy knowing their design system is optimized to streamline workflows, achieve a higher degree of engineering accuracy, and bring meditation to their members in the most delightful and unexpected ways.

Thank you to Steven Sczepanik for all your efforts helping bring this story to life!