Preview image. Unlock full-res
Warm Modern Playfulness — like a friendly, brightly lit studio full of soft shapes and uplifting colors.
Headspace's design system radiates a calm, approachable, and playfully optimistic mood, achieved through a vibrant primary blue, a warm, soft neutral palette, and abundant negative space. Rounded forms and a clean sans-serif typeface contribute to a friendly and user-centric feel. The frequent use of accent colors, especially yellow and various purples, in illustrations and iconography creates visual interest and distinguishes different content areas.
Prioritize 'Sky Connect' (#0061ef) for all primary call-to-action buttons and active navigation states.
Apply 'Cloud Whisper' (#f9f4f2) for most large section backgrounds to maintain a soft, inviting atmosphere.
Use border-radius 24px for general buttons and 32px for prominent CTA buttons to reinforce the soft, friendly aesthetic.
Utilize 'Inkwell Gray' (#4b4c4d) as the primary text color for body copy and headings for optimal readability on light backgrounds.
Ensure headings and body text use the Headspace Apercu font with careful application of letter-spacing adjustments: -0.0300em, -0.0250em, -0.0100em at larger sizes.
Incorporate the subtle rgba(65, 61, 69, 0.2) 0px 2px 0px 0px shadow on buttons and cards to provide soft visual lift without heavy contrast.
Use 8px and 16px as primary elementGap values for consistent spacing between UI elements.
Avoid harsh, high-contrast shadows or sharp corners, as they contradict the brand's soft and approachable aesthetic.
Do not use highly saturated colors for large text blocks; reserve them for accents, illustrations, and interactive elements.
Refrain from using excessively small or tight letter-spacing for body text; the system clearly favors open and legible typography.
Do not introduce new typefaces; stick to Headspace Apercu and its defined weights.
Avoid full-bleed imagery without defined edges or masking; prefer contained, rounded elements or abstract backgrounds.
Do not use dark backgrounds for entire sections, except where explicitly indicated for specific brand moments (e.g., hero, unless data suggests otherwise).
Limit the use of 'True Black' (#000000) to critical input text or select emphasis, defaulting to 'Inkwell Gray' (#4b4c4d) for most text.
