Building a Design System That Breathes with Headspace | Figma Blog

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.