Building a Design System That Breathes with Headspace | Figma Blog (opens in new tab)
Headspace rebuilt its design system to support rapid growth, multiple brands, and products spanning apps, wearables, and VR. Its previous system relied on hard-coded colors, manual processes, and plugins, making updates slow and creating inconsistencies. By adopting design tokens and Figma variables, Headspace created a scalable source of truth for designers and engineers that could evolve with the business. ## Challenges of the Previous System - Headspace served more than 100 million members across numerous products and partnerships. - The existing design system was manual and heavily dependent on plugins. - Hard-coded color values produced multiple hex-code variations and inconsistent experiences. - Even small palette changes could take the design systems team hours or days. - Plugins often required specialized knowledge, frequent resets, and workflows that were not intuitive for occasional users. - The system was designed for a single brand, creating problems when Headspace merged with Ginger, later rebranded as Headspace Care. ## Preparing for Multiple Brands and Future Growth - Senior product designer Steven Sczepanik audited the existing system after the merger announcement. - He rebuilt components and patterns so they were easier for designers and engineers to find and use. - The redesign established Headspace’s first formal token system. - Tokens created a shared language for foundational properties such as colors and typography. - The system was designed to support Headspace Care and future partnerships without requiring separate, disconnected systems. ## Replacing Plugins with Figma Variables - Headspace converted its color tokens and typography into Figma variables. - Variables replaced many plugin-based workflows with a native Figma solution. - Steven implemented the initial color and typography variables in about a day, compared with two years spent developing the broader previous system. - The new approach made theme changes and system-wide updates faster and more reliable. - Designers and engineers gained a more dependable source of truth for shared design decisions. ## A Design System That Can Evolve - Headspace’s design system now supports a growing ecosystem of brands, platforms, and experiences. - Centralized tokens reduce duplication and improve consistency across products. - Native variables make the system easier to maintain as the visual identity changes. - The work demonstrates that scalable design systems must accommodate organizational change, not just reuse components. Headspace’s experience suggests that teams preparing for growth should replace hard-coded values and fragile plugin workflows with structured tokens and native variables. This creates a more flexible foundation for consistent design across brands, products, and future expansion.