# Headspace: brand book and build spec

A white page, flat sunshine-yellow and blue bands, ink-colored bold type in a custom Aperçu, and an orange dot that becomes a smiling character. Pills for every action; feelings first, clinical care second.

From unfairly.ai/brand-guidelines/headspace, checked 2026-10-29. Unofficial study; not affiliated with Headspace.

Every value is labelled with where it came from: **published** (the brand says it), **observed** (measured or seen on its live site, with the date), **our reading** (inferred from the evidence) or **our recipe** (how we apply the system). Files beside this one: tokens.css, tokens.json (DTCG 2025.10), kit.json.

**Thesis (our reading):** Headspace makes mental health feel approachable: the orange smile and a cast of emotional faces carry the feelings, while plain bold type, pills and a white page keep the clinical offers clear. Based on: From the published logo files and illustration kit, the 2024 coverage (emotions beyond the smile, a typeface to flex from playful to clinical, bright color against a grey category) and the homepage, which pairs a feeling-first hero with app and therapy cards.

## Purpose

Mission: Headspace's mission is to provide every person access to lifelong mental health support. (published; https://www.headspace.com/about-us)

Story: Founded in 2010 (Andy Puddicombe, a former Buddhist monk, is a co-founder), Headspace merged with Ginger in 2021. On October 31, 2023 it unified everything under the Headspace brand (Ginger became Headspace Care) and refreshed its identity in-house with Italic Studio, a custom Aperçu from Colophon Foundry and a wider emotional palette and cast of faces (coverage April 2024). Ebb, its AI companion, followed in October 2024. On September 16, 2026 Sword announced it would acquire Headspace. (published)

| Value | What it means in the work | Source |
|---|---|---|
| Make the Mission Matter | Named on the about page; meaning not published | published: https://www.headspace.com/about-us |
| Iterate to Great | Named on the about page; meaning not published | published: https://www.headspace.com/about-us |
| Own the Outcome | Named on the about page; meaning not published | published: https://www.headspace.com/about-us |
| Connect with Courage | Named on the about page; meaning not published | published: https://www.headspace.com/about-us |

## Fixed and flexible

Never changes:
- The orange dot logo and lowercase wordmark
- Headspace Apercu, bold sentence-case headings
- Pill-shaped actions
- Flat, round, face-led illustration from the kit

The one thing that varies: The supporting emotion colors and the character's mood change with the topic: yellow and orange for everyday, purple for sleep, blue for business and stress.

## Positioning

- **Statement**: The leading everyday mental health companion, helping people care for their minds anytime, anywhere (about-page boilerplate, abridged). (published)
- **Category**: Mental health: a meditation and sleep app plus Ebb (AI companion), coaching, online therapy that accepts insurance, and EAP, psychiatry and work-life services for employers and health plans. (observed)
- **Audience**: Individuals (app subscribers, therapy patients, families, students) and organizations (employers, small businesses, health plans, consultants): the nav splits For You, For Business and For Providers. (observed)
- **Promise**: Mental health support that feels approachable, from a two-minute meditation to insured therapy, all in one place. (our reading)
- **Differentiators**: Bright, emotional color in a category Headspace calls a "dreary sea of blues and greys"; One app from self-guided content to clinical care (coaching, therapy, psychiatry); Insurance-accepted online therapy and HSA/FSA eligibility on the homepage

## Messaging

Boilerplate (published): Headspace is the leading everyday mental health companion. Its all-in-one app delivers personalized support, from AI-powered guidance to meditation, coaching and therapy, and it partners with employers and health plans (paraphrase of the about-page boilerplate).

Taglines:
- Get your headspace (72px blue pill CTA closing the homepage, 2026-10-29)
- find some headspace (looping ticker strip on yellow, 2026-10-29)
- your mind matters (last line of the about-page boilerplate)
- all with Headspace (second line of the rotating hero H1 (e.g. "Feel less anxious / all with Headspace"), 2026-10-29)

| Pillar | Claim | Proof | Label |
|---|---|---|---|
| Meditation and mindfulness | Mental health app with expert-led meditations and tools (hero card). | 1,000+ expert-led exercises in a subscription | observed |
| Therapy | Online therapy that accepts insurance (hero card). | Online therapy that accepts insurance; HSA/FSA eligible | observed |
| Ebb, the AI companion | An empathetic AI companion for in-the-moment support and personal recommendations. | Ebb is clinically tested for safety and connects members to crisis support when needed | published |
| Sleep | Wind-downs, soundscapes and sleepcasts (Bedtime essentials slide). | 1,000+ expert-led exercises in a subscription | observed |
| For business | Mindfulness, coaching, EAP, therapy and psychiatry for teams. | Used in 200 countries and regions; 73% of enterprise clients cite the brand as a key driver of employee adoption (Oct 31, 2023) | observed |

They never claim:
- Never present Ebb as a substitute for human care or a therapist: Headspace states it is not
- Never say Headspace (the app) provides clinical services; therapy and psychiatry are separate care services

Real lines, as they wrote them:
| Line | Channel | Source |
|---|---|---|
| "Feel less anxious all with Headspace" | homepage | https://www.headspace.com/ |
| "Mental health app with expert-led meditations and tools" | homepage | https://www.headspace.com/ |
| "Online therapy that accepts insurance" | homepage | https://www.headspace.com/ |
| "What kind of headspace are you looking for?" | homepage | https://www.headspace.com/ |
| "The mental health app for every moment" | homepage | https://www.headspace.com/ |
| "Always-there support" | homepage | https://www.headspace.com/ |
| "Feel-good library" | homepage | https://www.headspace.com/ |
| "Bedtime essentials" | homepage | https://www.headspace.com/ |
| "Members are enjoying happier and healthier lives" | homepage | https://www.headspace.com/ |
| "Trusted by thousands of employers, health plans, and partners globally" | homepage | https://www.headspace.com/ |
| "Explore our library" | homepage | https://www.headspace.com/ |
| "Join the millions who use Headspace every day" | homepage | https://www.headspace.com/ |
| "Get your headspace" | homepage | https://www.headspace.com/ |

## Voice

Tone words: Warm, Approachable, Plain.

Traits:
- Approachable, but not Clinical (published)
- Playful, but not Childish (published)
- Emotionally honest, but not Relentlessly happy (published)
- Expert-backed, but not Preachy (observed)

- The homepage speaks to "you" in short, kind, everyday phrases (Stress less, Sleep soundly, Manage anxiety) and keeps clinical words for the care offers.
- An illustrator on the brand team describes the brand as "a big warm hug", fun and witty but considerate on heavy topics (Blush interview).
- A landing page follows the homepage: a short feeling-first headline, a plain one-line offer, one pill CTA.

Rules a copy check enforces:
- Sentence case headlines
- Write as "we", to "you"
- American spelling
- Lead with the feeling or outcome the reader wants (Feel less anxious, Sleep soundly), not the feature
- Make talking about mental health feel approachable and normal, never alarming
- When Ebb is mentioned, say it is an AI companion that does not replace human care
- CTAs are two to four words: Try for free, Try for $0, Check your coverage, Request a demo

Their words: your mind, mental health, headspace, Try for free, Check your coverage, everyday, members.
Never: Ebb replaces your therapist, Ebb is a therapist.

Tone by reader state, 0 (no personality) to 5 (full) (our recipe): Homepage and app content 4, Business and care offers 2, Ebb safety and crisis copy 1. Our reading: consumer pages are warm and light; care, Ebb safety and business copy turn plainer.

## Color

| Name | Hex | Role | Use |
|---|---|---|---|
| Headspace orange | #FF7300 | signature | Published in the logo files. The logo dot and the main smiling character; never type or buttons. |
| Ink | #2D2C2B | core | Published wordmark color. All type and the dark pill buttons. |
| White | #FFFFFF | core | Page ground, inverted wordmark, type on blue bands. |
| Warm card | #F9F4F2 | surface | Hero cards, unselected pills, footer newsletter strip (observed). |
| CTA blue | #0061EF | action | Primary CTA pills and the business band (observed). |
| Sunshine yellow | #FFCE00 | band | Carousel, ticker and closing bands (observed). |
| Sky blue | #00A4FF | band | Social-proof band (observed). |
| Pink | #FFA1CC | emotion | Carousel slide ground (observed). |
| Night purple | #3B197F | emotion | Sleep slide ground (observed). |
| Green | #02873E | emotion | Carousel slide ground (observed). |
| Ink soft | #44423F | support | Secondary text, footer base bar (observed). |

Proportion (observed; Not published. Measured by summing band heights by ground color on headspace.com at 1440 (measure/home-desk.json, 8,579 of 8,755px classified): white 58% (includes the #F9F4F2 hero cards and the yellow announcement bar, which is an image), yellow 24%, blue 9%, sky blue 8%. Orange covers almost no area: it lives in the logo and illustrations.): White 59%, Yellow 24%, CTA blue 9%, Sky blue 8%.

## Typography

| Role | Their face | Licence | Open stand-in (Google Fonts) | Fallback |
|---|---|---|---|---|
| display | Headspace Apercu | Proprietary to Headspace; not sold | Hanken Grotesk | system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif |
| body | Headspace Apercu | Proprietary to Headspace; not sold | Hanken Grotesk | system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif |

| Role | Token | Face | Desktop | Phone | Line height | Tracking | Weight |
|---|---|---|---|---|---|---|---|
| Closing pill label "Get your headspace" | --text-display-xl-* | display | 72px | 28px | 1 | -2.16px | 700 |
| Big section H2s: Members are enjoying happier and healthier lives, Explore our library, Join the millions who use Headspace every day | --text-display-l-* | display | 64px | 40px | 1 | -1.92px | 700 |
| Hero H1, two lines: rotating word line + "all with Headspace" | --text-display-hero-* | display | 52px | 36px | 1.1 | -1.56px | 700 |
| Carousel section H2 "The mental health app for every moment" | --text-display-m-* | display | 48px | 32px | 1 | -1.44px | 700 |
| Slide H3s, business band H2, FAQ H2 | --text-heading-l-* | display | 40px | 32px | 1.15 | -1.2px | 700 |
| Hero card titles, need-state H2, library card titles | --text-heading-m-* | display | 32px | 24px | 1.2 | -0.96px | 700 |
| Stat numbers 8M+ and 34M+ in the sky band | --text-stat-* | display | 56px | 32px | 1.1 | -1.68px | 700 |
| Member quotes and need-state tile labels | --text-quote-* | body | 24px | 20px | 1.3 | 0px | 400 |
| Business band subline, FAQ answers | --text-lead-* | body | 20px | 16px | 1.5 | -0.2px | 400 |
| Hero check-list, tab labels, announcement bar, stat labels | --text-body-l-* | body | 18px | 16px | 1.2 | 0px | 400 |
| Slide copy, quote attribution, library descriptions, newsletter copy | --text-body-* | body | 16px | 16px | 1.5 | 0px | 400 |
| Pill button labels | --text-button-* | body | 16px | 16px | 1.1 | 0px | 700 |
| HSA/FSA Eligible, badges, footer links and legal | --text-caption-* | body | 12px | 12px | 1.15 | -0.12px | 400 |
| Footer column headings | --text-footer-heading-* | display | 24px | 24px | 1.33 | -0.6px | 700 |

## Layout

Measured on https://www.headspace.com/: computed styles and bounding boxes at 1440 and 390 in headless Chromium (measure/home-desk.json, measure/home-phone.json, scratch/dom-1440.json, scratch/dom-390.json), pixel samples of the reference screenshots, plus the published press kit; 2026-10-29.

| Measure | Desktop (1440) | Phone (390) |
|---|---|---|
| Page margin | 48px | 24px |
| Section padding | 64px | 32px |
| Container max width | 1344px | full |
| Hero text width | max 420px | full |
| Grid columns | 3 | 1 |
| Gutter | 24px | 16px |
| Card gap | 24px | 24px |
| Navigation height | 80px | 80px |

Breakpoints from Headspace's CSS: 767, 1024, 1280px.

Homepage bands, top to bottom (observed):
1. Announcement
   - Desktop: y0-58
   - Phone: y0-58
   - full-bleed yellow
2. Nav
   - Desktop: y58-138
   - Phone: y58-122; dot logo, pill, hamburger
   - no border
3. Hero
   - Desktop: y138-887; cards y329-867 (914 + 398 wide)
   - Phone: y122-1137; cards stacked 358x437
   - cards #F9F4F2 radius 24
   - images flush to card bottom
4. Need-state tiles
   - Desktop: y887-1360
   - Phone: y1137-1875; 6 stacked
   - 2px #E2DED9 border, radius 8
5. Product carousel
   - Desktop: y1360-2316; slide y1640-2230
   - Phone: y1875-2837
   - slide radius 16, #FFCE00
6. Member quotes
   - Desktop: y2316-3351; cards 432x427 at y2828
   - Phone: y2837-3799; swipe row
   - cards #F9F4F2 radius 16
7. Business band
   - Desktop: inset card x48 y3399-4201, radius 16
   - Phone: x24 y3839-4592
   - white type
   - not full-bleed
8. Ticker
   - Desktop: y4330-4416 full-bleed
   - Phone: y4720-4776
   - ink text 32px
9. Library
   - Desktop: y4464-5254
   - Phone: y4824-5382
   - cards radius 16 with bottom scrim
10. Social proof
   - Desktop: inset card x48 y5334-6052, radius 16
   - Phone: x24 y5450-6180
   - white type on sky
11. FAQ
   - Desktop: y6084-6976; column x276-1164
   - Phone: y6204-7165; H2 left
   - 1px #C6C1B9 rules
12. Closing CTA
   - Desktop: y6976-7935
   - Phone: y7165-7643
   - empty yellow below the pill at rest
13. Footer
   - Desktop: y7935-8755 (legal bar y8655)
   - Phone: y7643-8769
   - link columns 12px #44423F

## Page anatomy

How Headspace's own landing pages are built, part by part (observed; https://www.headspace.com/, 2026-10-29). A homepage pattern, not a brand law: follow it for landing pages.

**Announcement bar**
- summary: Full-bleed sunshine-yellow strip, 58px tall, one centred underlined link
- ground: #FFCE00
- height: 58px desktop and phone
- text: "HSA/FSA eligible: save with pre-tax dollars" 18/26 (CSS 500, renders 400) #2D2C2B, underlined, centred, 331px wide at y17 (phone: same size, centred, fills the 390 width)

**Navigation**
- summary: White 80px bar under the yellow strip: full logo left, six plain links next to it, Log in and Help on the right, then a blue pill. No border, no shadow
- ground: #FFFFFF
- height: 80px desktop (y58-138); 64px phone (y58-122)
- border: none
- logo: variant full logo: orange #FF7300 dot + lowercase headspace wordmark in #2D2C2B (logo-desktop.svg, viewBox 192x40); px 154x32 desktop; phone shows ONLY the orange dot (logo-phone-dot.svg) 32x26; position x48 y82 desktop; x24 y77 phone
- links: count 6 primary + Log in + Help + Try for free; labels For You, For Business, For Providers, Our Plans, Resources, About (each opens a mega-menu; draw them closed). Right side: Log in, Help, Try for free. Verbatim, in this order; size 16/18.4 400; weight 400; color #2D2C2B; alignment primary links start x280 y88: For You x280, For Business x353, For Providers x461, Our Plans x575, Resources x664, About x757 (about 20px between labels). Log in text x1080, Help x1181, Try for free pill 122x48 at x1270 y74 (ends x1392)
- actions: Try for free: #0061EF pill 122x48, label 14/700 white, shadow 0 2px 0 rgba(65,61,69,0.2)
- sticky: yes, the header stays at the top on scroll (screenshots at rest show it once, at y58)
- phone: shows orange dot logo x24 y77; Try for free 122x33 at x184 y74; hamburger (three 2px lines, 24px icon) at x338 y76; menu hamburger; cta Try for free stays visible

**Hero**
- summary: White ground. A centred two-line bold H1, a one-row check list, then TWO side-by-side warm #F9F4F2 cards (a wide app card and a narrow therapy card), each with a centred title, a dark pill, an HSA/FSA line and a product image that sits flush on the card bottom
- desktop: column split card 1 x54-968 (914 wide), 20px gap, card 2 x988-1386 (398 wide): about 70/30; vertical anchors H1 line 1 box y135-201 ("Feel less anxious", 369 wide, centred), line 2 y194-251 ("all with Headspace", 420 wide). Check list y278 (18px, one row: items at x116, x554, x947, each a 17px check-circle icon + 8px gap + text #63605D). Cards y329-867 (538 tall). Card titles y358 (2 lines, 78 tall). Buttons y458 (48 tall). HSA/FSA Eligible line y528 (18px check icon at x452/x1128 + 12px 700 #63605D). Images y571-864: card 1 image 598x293 at x212, card 2 image 348x293 at x1013, bottoms flush with the card bottom; text max width H1 420px; card 1 title 468px; card 2 title 265px; media frame no frame: the images are pre-composited PNGs (phone mock + floating cards + orange Ebb character; a therapist on a phone with a sun and clouds) on transparent ground, cropped by the card bottom; cta size 114x48 (Try for $0) and 198x48 (Check your coverage), #2D2C2B pills
- phone: order H1 (2 lines) then card 1 then card 2, stacked; the check list is hidden on phone; alignment centred; sizes H1 36/36 at y122-207 (line widths 255, 291). Cards 358 wide at x16: card 1 y223-660, card 2 y680-1117 (437 tall each, 20px gap), radius 24, padding 24px 16px 0. Titles 24/28.8 2 lines at +24; button at +98 (y321 / y778); HSA line 14px at +162; image 326x233 at x32 from +201 to the card bottom (phone images hero-app-phone.webp, hero-therapy-phone.webp). Phone image boxes are exactly 326x233 (object-fit contain, bottom-aligned); reset any desktop 293px height in the phone media query. Card 2 title keeps its desktop break on phone: "Online therapy that / accepts insurance" (2 lines, ~199px wide); never let "insurance" wrap alone
- at rest: H1 line 1 rotates (Stress less / Sleep better / Feel less anxious). Draw "Feel less anxious" static. No animation on the cards
- media: hero-app-desktop.png (card 1), hero-therapy-desktop.png (card 2); phone hero-app-phone.webp, hero-therapy-phone.webp
- type: H1 52/57.2 700 -1.56px #2D2C2B centred; card titles 32/38.4 700 -0.96px; check list 18px 400 #63605D. Copy verbatim: H1 "Feel less anxious" / "all with Headspace"; check list "1,000+ meditations and Ebb, your AI companion", "Affordable therapy that accepts insurance", "Trusted mental health app with 105M+ downloads"; card 1 "Mental health app with expert-led meditations and tools" + "Try for $0"; card 2 "Online therapy that accepts insurance" + "Check your coverage"; both "HSA/FSA Eligible"
- cta: two dark ink pills, one per card. No blue in the hero
- proof: the three check-list lines

**Need-state tiles**
- summary: White band. Centred H2 then a 3x2 grid of white outline tiles, each a feeling + small illustrated icon + chevron
- ground: #FFFFFF
- desktop: band y887-1360 (padding 64 48 128). H2 "What kind of headspace are you looking for?" 32/38.4 700 one line centred at y977. Tiles 435x78: columns x48 / x503 / x957 (20px gaps), rows y1056 and y1154 (20px gap). Tile label 24/400 at x+26; 58px icon at tile right -110; chevron 24px at right -42
- phone: band y1137-1875 (padding 48 24 64). H2 24/28.8 2 lines at y1203. Six tiles stacked 342x76 at x24, from y1295 every 88px (12px gaps); icons 40px; labels 20/24
- anatomy:
  - Tiles in order, row by row: Stress less (yellow scribble icon), Sleep soundly (purple moon + sparkle), Manage anxiety (blue spiral), Process thoughts (pink face blob), Practice meditation (orange dot), Start therapy (yellow + blue speech bubbles)
  - 2px #E2DED9 border, radius 8, white fill; no shadow
  - Icons: needstate-stress-less.svg, needstate-sleep-soundly.svg, needstate-manage-anxiety.svg, needstate-process-thoughts.svg, needstate-practice-meditation.svg, needstate-start-therapy.svg; chevron-right.svg
  - Two separate images per tile, sized separately: illustration 58x58 (40x40 phone) and chevron 24x24 drawn as a thin 2px-stroke #2D2C2B chevron. Never size the chevron like the illustration; the illustration is the louder of the two
- components:
  - need_state_tile

**Product carousel ("The mental health app for every moment")**
- summary: White band. Centred 2-line H2, a centred row of five tab pills, then a 1344x590 colored slide card (radius 16) with an illustration on the left half and H3 + copy + light pill on the right; the next slide (pink) peeks in at the right edge; five dots below
- ground: #FFFFFF
- desktop: band y1360-2316 (padding 64 48 32). H2 48/48 2 lines y1418-1514 ("The mental health app for / every moment", 532 wide). Tabs y1568 (48 tall) x239-1201: AI guidance (selected, #2D2C2B, white 8px dot before label), Guided meditations, Sleep resources, Expert-led programs, Online therapy. Slide 1 card x48-1392 y1640-2230, #FFCE00, radius 16, overflow hidden. Left half: illustration 672x590 at x48 (slide1-ebb-chat-render.svg: a white chat bubble "You / I get so stressed talking to my mom. It always ends with us arguing." over the pink-orange Ebb character). Right half text column x820: H3 "Always-there support" 40/46 2 lines at y1783; copy 16/24 4 lines 325 wide at y1911; "Chat with Ebb" light pill 160x48 at y2037. Next slide (#FFA1CC) starts at x1416 (24px gap) and is clipped by the viewport. Dots: five 10px circles at x681/698/715/732/749, y2274; active #44423F, others #DAD9D9
- phone: band y1875-2837. H2 32/35.2 2 lines y1904. Tabs row scrolls: 48 tall from x24 (AI guidance 148, Guided meditations 182 ...). Slide 327 wide at x24 y2085-2773 (radius 16), next slide peeks at x363: text on TOP (H3 32/36.8 centred 2 lines y2115, copy 16/24 centred 4 lines y2209, Chat with Ebb 148x48 at y2327), illustration below (319x342 at y2409). Dots y2804. Phone tab labels 16/19.2 700 -0.48px
- anatomy:
  - Slides in order (only slide 1 is visible at rest): 1 #FFCE00 "Always-there support" / Chat with Ebb; 2 #FFA1CC "Feel-good library" (black heading); 3 #3B197F "Bedtime essentials" (white); 4 #02873E "Do-anywhere exercises" (white); 5 #0061EF "Convenient online therapy" (white)
  - Slide copy verbatim: "Unpack what’s on your mind with Ebb, our empathetic AI companion, and get personalized recommendations based on how you’re feeling."
  - Slide H3 and copy are #2D2C2B on yellow; never center them on desktop (left-aligned at x820)
  - Off-screen slide copy, verbatim (observed 2026-10-30): 2 Feel-good library: "Explore 1,000+ guided meditations for feeling more relaxed — ad-free and always there. Try one for yourself." button Learn more; 3 Bedtime essentials: "Sleep more soundly every night with bedtime meditations, proven exercises, and relaxing sounds. Give it a listen." button Explore sleep resources; 4 Do-anywhere exercises: "Reach your mental health goals with proven courses and expert-led guidance. Check out a preview here." button Learn more; 5 Convenient online therapy: "Check your coverage, find a therapist, and start feeling your best with Headspace therapy." button Get started
- components:
  - tab_pill
  - button_light

**Member quotes**
- summary: White band. A huge centred 2-line H2 with six floating character blobs and stars scattered around it, then three warm quote cards in a row
- ground: #FFFFFF
- desktop: band y2316-3351 (padding 64 48 96). Blobs: blue face 133px at x153 y2423; yellow star 43px at x578 y2393; pink star 33px at x878 y2498; purple-green face 129px at x1084 y2380; orange-yellow face 114x112 at x356 y2641; pink-green face 90px at x983 y2679. H2 "Members are enjoying happier and / healthier lives" 64/64 700 at y2551-2696 (line 1 ~950 wide). Cards 432x427 at x48 / x504 / x960, y2828-3255, #F9F4F2 radius 16, padding 48. Quote 24/31.2 400 at x+48 y2876, opening “ hangs in the left padding; attribution 16/24 #44423F at y3161 (2 lines)
- phone: band y2837-3799. Blobs shrink to ~45-67px at the corners (x24 y2869, x302 y2886, x24 y3089, x321 y3069). H2 40/48 4 lines centred at y2954 (Members are / enjoying happier / and healthier / lives). Cards become a swipe row: 336x422 at x18, next card peeks at x366; padding 32 64 32 32; quote 8 lines. Two 40px arrow buttons at x270 and x326, y3714
- anatomy:
  - Quotes verbatim: "I appreciate the consistent reminders to be kind and patient with myself as I learn and practice daily habits that are helping me find a calmer daily space." — Member on forming more helpful habits; "Headspace helped me begin the process of stepping back from toxic thinking and being a part of something bigger than my own personal grievances." — Member on learning to think in more helpful ways; "The strategies in the courses allow me to work on a part of myself that I am struggling with. Headspace changed the relationship I have with myself." — Member on working through their feelings
  - Blob files: member-blob-blue.svg, member-star-yellow.svg, member-star-pink.svg, member-blob-purple.svg, member-blob-orange.svg, member-blob-pink.svg
  - Attribution is one continuous phrase, no dash and no line break you add: "Member on forming more helpful habits" set 16/24 #44423F in a ~216px wide box, so it wraps naturally to "Member on forming more / helpful habits"
- components:
  - warm_card

**Business band**
- summary: A 1344x802 #0061EF card (radius 16) on white: a white client-logo marquee across the top, then white H2 + subline + two pills on the left and a three-photo collage on the right
- ground: #0061EF
- desktop: card x48-1392 y3399-4201. Logo row y3449-3499 (white SVG logos, ~40px gaps, clipped by the card edges, scrolls continuously): Vertex, HSBC, Adobe, Booking.com, Sephora, Western Union, Boston Medical, Bain & Co, BMO. H2 "Trusted by thousands of / employers, health plans, / and partners globally" 40/46 700 white at x164 y3728 (3 lines, 450 wide). Subline 20/30 white at y3882 (2 lines). Buttons y3972: Request a demo 170x48 at x164 (#F9F4F2, 2px white border, label #44423F); Learn more 136x48 at x346 (blue, 2px white ring). Photo collage image 611x524 at x717 y3613 (business-photos.webp: three portrait photos, stars and a blue cloud)
- phone: card 342 wide at x24 y3839-4592: logo row on top (y3862, ~34px tall), H2 32/36.8 centred 3 lines y3949, subline 16/24 centred 3 lines y4080, Request a demo 170x48 at y4166 and Learn more 136x48 at y4226 stacked centred, collage 278x238 at x56 y4306, 48px bottom padding
- anatomy:
  - Subline verbatim: "Support your team today with mindfulness, coaching, EAP, therapy, and psychiatry."
  - Logo files: logo-vertex.svg, logo-hsbc.svg, logo-adobe.svg, logo-booking.svg, logo-sephora.svg, logo-western-union.svg, logo-boston-medical.svg, logo-bain.svg, logo-bmo.svg (all white)
  - White gap of 129px between the card bottom (4201) and the ticker (4330)
- components:
  - button_light
  - button_outline_white

**Ticker strip**
- summary: Full-bleed 86px #FFCE00 strip: "find some headspace" repeated, each followed by a pair of cartoon eyes, scrolling left
- ground: #FFCE00
- desktop: y4330-4416, then 48px white below. Repeat unit 406px wide: text "find some headspace" 32px (CSS 500, renders 400) -0.96px #2D2C2B, 283 wide, at y4353; then a 75x48 eyes graphic (two white eyeballs with black pupils, outlined) 40px after the text. At rest the strip starts mid-word: "space" at x0
- phone: y4720-4776 (56 tall), text 20/24, eyes 48x30, unit 256 wide
- anatomy:
  - Eyes: marquee-eyes-a-render.svg / -b / -c are the pupil states (white eyeballs with a thin black outline sit behind them); variants: two round eyes, one eye + smile
  - lowercase, never title case
- components:

**Library**
- summary: White band. Huge centred one-line H2, a row of five icon tab pills, then a horizontal row of tall image cards (four and a sliver visible) with scrim, centred white titles and small badges; View all link + arrows bottom right
- ground: #FFFFFF
- desktop: band y4464-5254. H2 "Explore our library" 64/64 one line at y4519. Tabs y4640 (44 tall) x293-1147: Featured (selected, ink, star icon), Popular (heart), Sleep (moon), Stress (green splat), Meditation and Mindfulness (orange square). Cards 318x434 at x48, 390, 732, 1074 (24px gaps), y4716-5150; the fifth starts at x1416 and is clipped. View all 20/26 underlined at x1190 y5185; arrows 48px at x1284 (disabled) and x1344, y5174
- phone: band y4824-5382. H2 40/44 one line y4853. Tabs 44 tall from x24 (scroll). Cards 192x270 at x24, 228 (12px gap), y5016. View all at x38 y5321 (left), arrows 40px at x274 and x326
- anatomy:
  - Cards in order: Meet Ebb (Trending) "Get personalized content recommendations with Ebb"; Wiggle to Wind Down (New) "Help kids settle in and drift off"; Mindful Families Collection "Bring your attention to all interactions with your children"; Politics Without Panic "Stress-relieving tools for election season"; then XR, Mental Strength Training, LinkedIn cards off-screen
  - Images: library-1-meet-ebb.webp, library-2-wiggle-cocomelon.svg, library-3-mindful-families.webp, library-4-politics-without-panic.webp, library-5-xr.webp, library-6-mental-strength.webp, library-7-linkedin.webp
  - Title and description sit in the lower half over the scrim; badge top-left
  - Text anchors inside each 318x434 card (measured): the title block is BOTTOM-aligned so its last line ends at card top +334 (100px above the card bottom) whether it has 1 or 2 lines (1-line Meet Ebb sits at +294..+334, 2-line titles at +256..+334); the description starts at +349 (85px above the bottom). Phone 192x270 cards: title 20/24 700 ending at +200, description 12/18 starting at +207, side padding 16
  - On the selected (ink) tab the icon turns white like the label; unselected icons keep their colors
- components:
  - tab_pill
  - library_card
  - carousel_arrow

**Social proof (sky band)**
- summary: A 1344x718 sky-photo card (radius 16): a ring pill with a live meditating count, a huge white 2-line H2 surrounded by four round member avatars, a dark pill, then a row of four stats
- ground: photo-dark
- ground note: Card ground #00A4FF; on top, sky-bg.webp (object-fit cover, centred) at OPACITY 0.6, so the saturated blue shows through and the clouds stay faint (the result reads as a saturated mid blue with faint clouds). Never show the photo at full opacity; no other scrim
- desktop: card x48-1392 y5334-6052. Pill 263x57 centred at x588 y5430. H2 "Join the millions who use / Headspace every day" 64/64 white, 687 wide, y5526-5671. Avatars (circles): Chris 88px x308 y5436; Ashli 80px x1058 y5486; Jason 88px x413 y5701; Mindy 72px x913 y5696. "Try for free" #2D2C2B 132x54 at x654 y5695. Stats row: 4 equal columns centred at x250 / 563 / 877 / 1190: five stars 150x31 at y5844 / "8M+" 56px / "34M+" 56px / awards image 150x48 (three round badge icons); labels 18/700 white at y5918: App Store Rating, Downloads, Minutes Meditated, Selected Awards
- phone: card 342 wide at x24 y5450-6180. Pill 246x48 at y5506. H2 40/44 4 lines centred y5599 (Join the / millions who / use Headspace / every day). Try for free at y5810. Stats 2x2: stars+App Store Rating and 8M+ Downloads (y5911-5983), 34M+ Minutes Meditated and awards+Selected Awards (y6039-6111). Avatars hidden on phone. Phone stat sizes: numbers 32/38.4 700 white; labels 16/19.2 700 -0.48px white; stars 104x23 at x67 y5912; awards 85x29 at x229 y6040; count pill 246x48 with faces 62x24, "22.9k" 16/700 + "meditating" 16/400
- anatomy:
  - Ground recipe, exactly: background #00A4FF; img sky-bg.webp absolutely positioned inset 0, object-fit cover, opacity 0.6; border-radius 16 with overflow hidden
  - Numbers as captured at rest on 2026-10-29: "22.9k meditating", "8M+" Downloads, "34M+" Minutes Meditated. The counter and stats are live values that change between loads (other loads showed 91.8k / 68.8k, 4M+ / 51M+): use the captured values
  - Assets: sky-bg.webp, avatar-chris.webp, avatar-ashli.webp, avatar-jason.webp, avatar-mindy.webp, meditating-faces.svg, stars-rating-render.svg, awards.svg
  - H2 line break is forced: "Join the millions who use" / "Headspace every day" (line 1 is the longer one, ~687px). Never break before "use"
- components:
  - stat_pill
  - button_primary_ink

**FAQ**
- summary: White band, narrow 888px column: centred H2 and eight collapsed accordion rows with hairlines and plus icons
- ground: #FFFFFF
- desktop: band y6084-6976 (padding 80 0 96). H2 "Frequently asked questions" 40/45 centred at y6161. Rows x276-1164, from y6239, 80 tall each (y6239, 6319, 6399, 6480, 6560, 6640, 6720, 6800); question 24px at row top +24; plus icon 24px at x1140
- phone: band y6204-7165 (padding 40 20 80). H2 32/42 LEFT-aligned 2 lines at y6245. Rows x20-370, 75 tall for one-line and 101 for two-line questions, from y6356; question 20/26
- anatomy:
  - Questions verbatim, in order: What is Headspace? / What is Headspace’s mission? / How do I download the Headspace app? / What is included in a Headspace app subscription? / How much does Headspace cost? / Does my Headspace subscription automatically renew? / How do I cancel my Headspace subscription? / How can I support my team’s mental health at work?
  - all collapsed at rest; 1px #C6C1B9 rule under rows 1-7, none under row 8
  - Answers are collapsed at rest and never visible in the screenshot: render each answer hidden (empty or a one-line placeholder from the book facts). Do not invent prices or policies
  - Plus icon: a thin 1.5px-stroke plus about 12px across, centred in its 24px box, #2D2C2B; quiet, never a bold cross
- components:
  - faq_row

**Closing CTA**
- summary: Full-bleed #FFCE00 band whose top edge is a downward white arc, holding one giant blue pill "Get your headspace", then a tall empty yellow area
- ground: #FFCE00
- desktop: band y6976-7935 (959 tall). Top edge: a white convex arc hanging into the yellow, measured on the reference: 0px deep at x0/x1440, 14px at x110, 34px at x299, 44px at x440, 52px at x720 (yellow starts y6976 at the edges, y7028 at the centre). That is exactly a quadratic curve: draw an inline SVG 1440x52 at the band top, white path "M0 0 H1440 Q720 104 0 0 Z" (preserveAspectRatio none, width 100%). Do not use cta-arc.svg. Pill 750x188 centred at x345 y7087. Below it y7275-7935 is plain yellow (660px)
- phone: band y7165-7643 (478 tall), arc 14px deep (same quadratic, control point 28), pill 308x100 at x41 y7211, then ~330px of plain yellow
- anatomy:
  - At rest the area under the pill is EMPTY yellow: draw it empty. A rainbow-and-sun Lottie (cta-rainbow-sun-render.svg) rises into it only after scrolling: animation only, never draw it
  - No copy besides the pill label
- components:
  - button_cta_giant

**Footer**
- summary: Warm #F9F4F2 footer: a newsletter row (squiggle smile, Stay in the loop copy, email input, Subscribe pill), a 2px hairline, six link columns, a scroll-to-top chevron, then a dark #44423F legal bar
- ground: #F9F4F2
- anatomy:
  - Newsletter row y7935-8121: footer-squiggle.svg 107x105 at x140 y7974; text column x287 (461 wide): "Stay in the loop" 24/27.6 700 #2D2C2B y7957, "Be the first to get updates on our latest content, special offers, and new features." 16/24 (2 lines) y7997, legal 12/18 #44423F y8052 "By signing up, you’re agreeing to receive marketing emails from Headspace. You can unsubscribe at any time. For more details, check out our Privacy Policy." (Privacy Policy. underlined); input 283x58 at x788 y7998; Subscribe 149x58 at x1087 y7998
  - Hairline 2px #E2DED9 at y8119, x140-1236
  - Columns from y8153, headings 24/32 700 #4B4C4D; links 12/13.8 #44423F from y8208 every 21.7px. Column x: 138, 390, 561, 728, 886, 1070
  - Get some Headspace: Try 14-days free, Our plans, Mental health coaching, Family plan, Student Plan, For educators, Send a gift, Redeem a code, Share Headspace, Headspace for business, Administrator portal login
  - Our content: Meditation app, Meditation articles, Beginning meditation, Quick meditations, Meditation courses, Sleep app, Sleep articles, Sleep music, White noise, Mindfulness app, Mindfulness articles, Focus music, Mindfulness with kids, Mindful parenting, Mental health support, Mental health articles, Mental health videos, Browse all articles, Browse our content library
  - About us: About Headspace, About the Headspace app, Press, Sitemap
  - Support: Trust Center, Help, Contact us, Mental health resources, Accessibility Statement, Security, Cookie policy
  - My Headspace: blue Login pill 107x48 at x886 y8209
  - Get the app: App Store badge 164x49 at x1070 y8209, Google Play badge 164x50 at y8265 (badge-app-store.png, badge-google-play.png)
  - Scroll-to-top chevron (48px circle button, 24px up-chevron) at x1364 y8567
  - Legal bar y8655-8755 #44423F: "© 2026 Headspace Inc." x32, Terms & conditions, Privacy policy, Consumer Health Data, Your privacy choices (with the blue toggle icon privacy-choices.svg), CA Privacy Notice, all 12px white, y8697. Social circles 28px white with dark icons (Facebook, Instagram, LinkedIn, Twitter, YouTube) at x890-1078 y8691. Language button 196x52 at x1212 y8679: #44423F with 2px white border, globe icon, "English" 16/700 white, chevron-down
- phone: Newsletter stacked on #F9F4F2 (x16, y7643-7994): heading, copy, legal, input 358x58, Subscribe 149x58. Then centred "My Headspace" + Login 200x48 at x95 y8082; five accordion rows with plus icons (Get some Headspace, Our content, About us, Support, About), "Get the app" heading with the two badges side by side (x20 and x192, y8467); English language button 196x52 (#F9F4F2, 2px #44423F border) + scroll-top chevron at y8581; dark #44423F bar y8657-8769 with five centred social circles and the copyright line centred

**On dark grounds**
- secondary button: on #0061EF: #F9F4F2 pill with #44423F label and 2px white border, or a same-blue pill with a 2px white ring
- link: white
- muted text: white (no grey on blue or sky)
- hairline: none used
- logo variant: logo-white (press kit) on blue; the site shows no logo on dark grounds

## Components

- **button primary blue** (observed): fill #0061EF, text #FFFFFF, height 48, padding x 24, radius pill, font size 14, weight 700, face body. Nav "Try for free": 122x48 at x1270 y74 desktop (label 14/700); phone 122x33 at x184 y74. Footer "Login" 107x48 (label 16, padding 13px 32px; phone 200x48). Shadow 0 2px 0 rgba(65,61,69,0.2). Transition color/background 0.15s cubic-bezier(0.32,0.94,0.6,1)
- **button primary ink** (observed): fill #2D2C2B, text #FFFFFF, height 48, padding x 20, radius pill, font size 16, weight 700, face body. The CTA inside the warm hero cards: "Try for $0" 114x48, "Check your coverage" 198x48 (padding 14px 20px). Sky band "Try for free" 132x54 (padding 16px 24px). Footer "Subscribe" 149x58 (label 18/700, padding 16px 32px, shadow 0 2px 0 rgba(65,61,69,0.2))
- **button light** (observed): fill #F9F4F2, text #44423F, height 48, padding x 24, radius pill, font size 16, weight 700, face body. Light pill on colored grounds: slide "Chat with Ebb" 160x48 (label 18/700) on yellow; business band "Request a demo" 170x48 with a 2px #FFFFFF border
- **button outline white** (observed): fill #0061EF, text #FFFFFF, ring #FFFFFF, ring px 2, height 48, padding x 24, radius pill, font size 16, weight 700, face body. Business band "Learn more" 136x48: blue fill (same as the band) with a 2px white ring
- **button cta giant** (observed): fill #0061EF, text #FFFFFF, height 188, padding x 64, radius 112, font size 72, weight 700, face display. "Get your headspace": 750x188 at x345 y7087 (padding 56px 64px, label 72/72 -2.16px), shadow 0 3.23px 6.45px rgba(20,19,19,0.2). Phone 308x100 at x41 y7211, label 28px
- **tab pill** (observed): fill #F9F4F2, text #2D2C2B, height 48, padding x 24, radius 24, font size 18, weight 700, face body. Selected tab: fill #2D2C2B, label white. Carousel tabs are 48 tall (AI guidance 158, Guided meditations 199, Sleep resources 170, Expert-led programs 208, Online therapy 162 wide; 16px gaps; row centred, x239-1201). The selected carousel tab has an 8px white dot before its label. Library tabs are 44 tall with a 16px icon before the label (star, heart, moon, splat, square): Featured 141, Popular 133, Sleep 115, Stress 117, Meditation and Mindfulness 285, x293-1147. No border. Transition 0.3s
- **need state tile** (observed): fill #FFFFFF, text #2D2C2B, ring #E2DED9, ring px 2, radius 8. 435x78 desktop, 342x76 phone. 2px #E2DED9 border, radius 8, padding 8px 16px 8px 24px. Label 24/400 left at x+26; on the right a 58px illustrated icon (40px phone) then a 24px chevron-right, 8px apart, the chevron 18px from the right edge. Border transition 0.3s
- **warm card** (observed): fill #F9F4F2, text #2D2C2B, radius 24. Hero cards: radius 24, padding 30px 25px 0, image sits flush on the bottom edge (no bottom padding). Quote cards use the same fill with radius 16, padding 48 (phone 32px 64px 32px 32px)
- **library card** (observed): fill #2D2C2B, text #FFFFFF, radius 16. 318x434 desktop (192x270 phone), 24px gap. Full-bleed image (object-fit cover), then a scrim ::after linear-gradient(rgba(20,19,19,0) 50%, rgba(20,19,19,0.35) 75%, rgb(20,19,19) 150%). Title 32/38.4 700 white centred, its last line ending 100px above the card bottom (card top +334); description 16/24 white centred starting 85px above the bottom (+349), ~24px side padding. Badge top-left at +24,+24: pill #F9F4F2 radius 800, padding 3.5px 8px, label 14/700 #0061EF ("Trending", "New")
- **carousel arrow** (observed): fill #F9F4F2, text #2D2C2B, radius pill. 48px circle filled #F9F4F2 with a 24px #2D2C2B chevron, nothing else: NO visible ring or border (the site has a ring element but it is at opacity 0). Disabled (left arrow at rest) is the whole button at 50% opacity. Phone 40px
- **stat pill** (observed): fill none, text #FFFFFF, ring #FFFFFF, ring px 2, radius 30. "22.9k meditating" pill 263x57 at x588 y5430: 2px white ring, transparent fill, padding 10px 16px; 84x33 three-faces image, then "22.9k" 18/700 and "meditating" 18/400 white
- **faq row** (observed): fill #FFFFFF, text #2D2C2B, radius 0. 888px wide x 80 tall rows (padding 24px 0), 1px #C6C1B9 rule under each but the last; question 24 (renders 400) left; 24px plus icon right-aligned at the row end. All 8 rows collapsed at rest
- **email input** (observed): fill #FFFFFF, text #63605D, ring #D2D5DE, ring px 1, radius 8, height 58. 283x58 desktop (358 phone), 1px #D2D5DE border, radius 8, floating label "Email address" 16/24 #63605D

States (hover, focus, pressed, disabled) weren't measured; define them before you build.

## Motion tokens

| Name | Easing | Duration | Use | Label |
|---|---|---|---|---|
| breath-animation |  |  | Character animation paced like breathing; Headspace says its animations help simplify complex ideas | published |
| smooth-soft |  |  | Soft colors and smooth motions are part of the 2024 identity (coverage; no durations or easing published) | published |
| ticker-loop |  |  | The find some headspace strip scrolls continuously; carousels advance by tab (speed not measured) | observed |
| button-press | cubic-bezier(0.32, 0.94, 0.6, 1) | 150ms | Every pill button: color and background-color transition | observed |
| tile-border | ease | 300ms | Need-state tile border and tab pill fill transitions (CSS transition 0.3s, default ease) | observed |

## Icon tokens

Grid not published, stroke thin outlined check-circle icons in the hero proof row and HSA/FSA labels, ink on white; category tiles use small illustration spots, not icons (observed).

## Signature moves

### The orange dot becomes a face

Where: logo, illustration kit, hero and Ebb key visual.
Do: The logo is a solid #FF7300 dot beside the lowercase wordmark. In illustration the same round shape gets a closed-eye smile (two short curved strokes) and becomes the main character; since the 2024 refresh the cast also shows stress, sadness, worry and other moods, in yellow, blue, green, pink and purple as well as orange. Use the press-kit illustrations as supplied.
Don't: No redrawn or new faces, no realistic mascots, no smile on the logo dot itself.

### White page, bright inset cards and yellow strips

Where: headspace.com homepage, top to bottom.
Do: A white page broken by flat saturated color with no gradient: full-bleed #FFCE00 yellow for the announcement strip, the ticker and the closing CTA band; inset 1344px radius-16 cards for the yellow carousel slide, the #0061EF business band and the sky-photo social-proof band. Measured share of page height at 1440: about 58% white, 24% yellow, 9% blue, 8% sky blue. Type is #2D2C2B on yellow and white, #FFFFFF on the blues.
Don't: No orange bands, no grey or dark bands, no gradients on grounds.

### Everything you press is a pill

Where: nav, hero cards, tabs, CTAs.
Do: Buttons are 48px tall with 32px radius: #0061EF with white 14-16px bold text in the nav, #2D2C2B with white text inside the warm #F9F4F2 hero cards. Tab pills are 44-48px with 24px radius, selected #2D2C2B with white text, unselected #F9F4F2 with ink text. The close is one giant pill: "Get your headspace" in 72px bold white on #0061EF, 188px tall, 112px radius, centred on yellow.
Don't: No square or outlined buttons, no orange buttons.

### find some headspace ticker

Where: between the business band and the library.
Do: An 86px #FFCE00 strip with a looping line of lowercase "find some headspace" separated by pairs of character eyes, in ink.
Don't: Never more than one ticker on a page.

## Messaging: rules

The homepage leads with a rotating feeling ("Feel less anxious", "Stress less") and the line "all with Headspace", then two offers side by side: the app and insured therapy. Proof sits in a row of check marks (1,000+ meditations and Ebb, therapy that accepts insurance, 105M+ downloads). Business gets its own blue band.

Why it works: Since the 2023 unification the brand has to carry both a meditation app and clinical care; feeling-first lines keep it approachable while the offers stay concrete.

|  |  |
|---|---|
| Hero | rotating feeling + "all with Headspace" |
| Proof row | three check-marked lines |
| Close | "Get your headspace" |

- Feeling first, then the offer, then proof
- Name the product plainly: app, therapy, Ebb, coaching
- Keep consumer and business messages in separate bands
- Don't lead with clinical jargon
- Don't promise a cure or outcome Headspace has not published

Real examples, to look at on Headspace's own pages (not for reuse):
- Meet Ebb key visual: "Meet Ebb" in white on orange with a pink-to-orange character: https://drive.google.com/drive/folders/1f7lekUX-EfQAT6KaKAkDkBBbWoejz7nS

Sources: https://www.headspace.com/, https://www.headspace.com/about-us, https://organizations.headspace.com/blog/headspace-unveils-refreshed-brand-and-expands-offerings-for-lifelong-mental-health-support

## Voice: rules

Second person, short, warm and plain: Stress less, Sleep soundly, Manage anxiety, Process thoughts. Sentence-case headings, no exclamation marks in headings. Ebb copy is careful about its limits.

Why it works: Headspace aims to make talking about mental health feel approachable and normalised (It's Nice That); the brand team calls it "a big warm hug" (Blush).

|  |  |
|---|---|
| Person | we / you |
| Case | sentence |
| CTA length | 2-4 words |

- Write to "you", as "we"
- Short sentence-case lines
- Kind, everyday words before clinical ones
- State Ebb's limits plainly
- Don't sound alarming or clinical in consumer copy
- Don't use all caps headlines

Do and don't:
- Do: "Feel less anxious". Feeling first, plain and kind (live hero).
- Don't: "Ebb replaces your therapist". Headspace states Ebb does not replace human care.

Sources: https://www.headspace.com/, https://www.itsnicethat.com/articles/italic-studio-headspace-graphic-design-project-250424, https://blush.design/blog/post/headspace-mindfulness-app, https://www.headspace.com/ai-mental-health-companion

## Logo: rules

A lowercase "headspace" wordmark with a solid orange dot to its left. The press kit publishes three registered RGB versions: primary (#FF7300 dot, #2D2C2B wordmark), inverted (#FF7300 dot, white wordmark) and white, in PDF, PNG, SVG and EPS for web and print. The SVG artboard is 1554 x 363 (about 4.3:1).

Why it works: The dot is the seed of the whole illustration system: the same orange circle becomes the smiling character.

|  |  |
|---|---|
| Dot | #FF7300 |
| Wordmark | #2D2C2B or #FFFFFF |
| Artboard ratio | 1554.44 x 362.78 |
| Clear space | not published |
| Minimum size | not published |

- Primary on white and light grounds
- Inverted (white wordmark, orange dot) on dark or saturated grounds
- All-white only when orange cannot sit on the ground
- Use the supplied files
- Don't recolor the dot
- Don't retype the wordmark
- Don't capitalize the wordmark

Not published: Clear space; Minimum size; Lockup rules.

Do and don't:
- Do: "headspace". The wordmark is lowercase; in running text the name is "Headspace".
- Don't: "HeadSpace". Never mid-capitalised or retyped.

Real examples, to look at on Headspace's own pages (not for reuse):
- Primary logo: orange dot, ink wordmark: https://drive.google.com/drive/folders/1RvTZapWJ8TmS6-wp2Px7QoevaHQMRDBm
- Inverted logo: orange dot, white wordmark: https://drive.google.com/drive/folders/1RvTZapWJ8TmS6-wp2Px7QoevaHQMRDBm

Sources: https://drive.google.com/drive/folders/1RvTZapWJ8TmS6-wp2Px7QoevaHQMRDBm, https://drive.google.com/drive/folders/1_bGJi36dthZc4eDgt2jDTqaAj12Qxrbi

## Color: rules

Orange #FF7300 is the signature (logo dot and the lead character). The 2024 refresh kept orange and added complementary colors for a range of emotions, with attention to contrast. On the site the working colors are ink #2D2C2B on white, warm #F9F4F2 cards, #0061EF CTA blue, full-bleed #FFCE00 strips and inset #FFCE00, #0061EF and sky-photo cards (1344px, radius 16); pink #FFA1CC, purple #3B197F and green #02873E appear on carousel slides.

Why it works: Bright, lively color separates Headspace from a category it calls a "dreary sea of blues and greys".

|  |  |
|---|---|
| Signature | #FF7300 (published, logo file) |
| Ink | #2D2C2B (published, logo file) |
| CTA | #0061EF |
| Most-used band | #FFCE00 |
| Card | #F9F4F2 |

- Orange belongs to the logo and characters
- Blue #0061EF is the action color
- Ink, not black, for type
- Bands are flat and full width
- Don't set text in orange
- Don't use gradients as grounds
- Don't use grey bands

Not published: An official palette with hex values beyond the logo files; Color ratios (the proportion shown is measured).

Do and don't:
- Do: "Get your headspace". On yellow, the action is a blue pill with white bold text (observed).
- Don't: "Get your headspace". Orange is the logo and the characters; the site never sets type in it.

Real examples, to look at on Headspace's own pages (not for reuse):
- Emotions: blue, orange, green and pink faces on yellow: https://drive.google.com/drive/folders/1-XV8UHy4hTFcQBmeOkoDd-eRuMITQki5

Sources: https://drive.google.com/drive/folders/1RvTZapWJ8TmS6-wp2Px7QoevaHQMRDBm, https://www.itsnicethat.com/articles/italic-studio-headspace-graphic-design-project-250424, https://www.printmag.com/?p=767405, https://www.headspace.com/

## Typography: rules

One family everywhere: Headspace Apercu, a custom version of Colophon Foundry's Aperçu made for the 2024 refresh, chosen to flex from playful to clinical, with curves drawn from the smile. On the site headings are bold with -0.03em tracking and tight leading; body is regular at 20/30.

Why it works: One friendly-but-functional grotesque lets the same page carry a sleepcast and an insurance check.

|  |  |
|---|---|
| Hero H1 | 52px / 57px, 700, -1.56px (phone 40px) |
| Section H2 | 64px / 64px, 700, -1.92px |
| Card title | 32px / 38px, 700, -0.96px |
| Body | 20px / 30px, 400, -0.2px |
| Button | 14-18px, 700 |

- Bold sentence-case headings, tracked -0.03em
- Regular body, generous 1.5 leading
- One family; weight does the hierarchy
- Don't add a second display face
- Don't set headings light or italic

Not published: Type scale; Weights list; Licensing of Headspace Apercu.

Do and don't:
- Do: "Explore our library". Bold, sentence case, tracked tight.
- Don't: "EXPLORE OUR LIBRARY". No all-caps headings anywhere on the site.

Sources: https://www.itsnicethat.com/articles/italic-studio-headspace-graphic-design-project-250424, https://designcompass.org/en/2024/04/30/headspace/, https://www.printmag.com/?p=767405, https://www.headspace.com/

## Iconography: rules

Few icons: outlined check circles in the hero proof row and HSA/FSA labels, chevrons on category rows, social glyphs in the footer. Category tiles use small illustration spots instead of icons.

Why it works: Illustration carries the personality, so icons stay quiet and functional.

|  |  |
|---|---|
| Grid | not published |
| Style | thin outline, ink |

- Thin outlined UI icons in ink
- Use illustration spots for topics
- Don't use filled colorful icon sets

Not published: Icon set or grid.

Sources: https://www.headspace.com/

## Illustration: rules

Flat, round, bold-color scenes built from circles and soft shapes, with simple closed-eye or open-eye faces. The press kit groups them as Evergreen, Work, Education, Mindful Eating, Seasonal, Sleep, Stress Anxiety and Hard Topics, at 3840 x 2160. Since 2024 the faces express stress, sadness, contentment and more, not only joy.

Why it works: Cute, round characters make hard topics approachable without making light of them (coverage of the 2024 refresh).

|  |  |
|---|---|
| Size | 3840 x 2160 JPEG / PNG / SVG / PDF |
| Faces | two curved strokes for closed eyes, simple smile |

- Use the supplied illustrations
- Flat color, no outlines, no gradients inside shapes
- Match the emotion to the topic (Hard Topics, Sleep, Stress)
- Don't draw new characters
- Don't use realistic people in illustration
- Don't use stock 3D or clip art

Not published: Illustration guidelines.

Real examples, to look at on Headspace's own pages (not for reuse):
- Smile: the orange character with closed eyes: https://drive.google.com/drive/folders/1RvePlqySxy3s7GBtJd4p5zZe0IfBv1dK
- Sleep: a smiling purple moon on deep purple: https://drive.google.com/drive/folders/1RvePlqySxy3s7GBtJd4p5zZe0IfBv1dK
- Hard Topics, Overwhelmed: a blue wave over yellow: https://drive.google.com/drive/folders/1RvePlqySxy3s7GBtJd4p5zZe0IfBv1dK
- Stress: rain cloud over an orange character: https://drive.google.com/drive/folders/1RvePlqySxy3s7GBtJd4p5zZe0IfBv1dK
- Group: a stack of colored characters on yellow: https://drive.google.com/drive/folders/1RvePlqySxy3s7GBtJd4p5zZe0IfBv1dK

Sources: https://drive.google.com/drive/folders/1RvePlqySxy3s7GBtJd4p5zZe0IfBv1dK, https://www.itsnicethat.com/articles/italic-studio-headspace-graphic-design-project-250424, https://designcompass.org/en/2024/04/30/headspace/, https://blush.design/blog/post/headspace-mindfulness-app

## Photography: rules

Photography arrived with care services: real clinicians and members in video-call frames on the hero therapy card, portraits in the business band, and warm daylight office photos in the press kit.

Why it works: Coverage says photos show the human-to-human side of coaching and therapy; illustration keeps the inner, emotional side.

|  |  |
|---|---|
| Use | therapy, coaching, business |

- Photos for people and care; illustration for feelings
- Natural light, real people, warm tones
- Don't use photos for abstract feelings

Not published: Photography rules.

Real examples, to look at on Headspace's own pages (not for reuse):
- HQ courtyard: daylight, plants, two people walking: https://drive.google.com/drive/folders/1RxOVgmtgSJe2nMs1bXAQ7Jv18K7nOzpp
- Care tab screen: Your Care Team with coach and therapist avatars: https://drive.google.com/drive/folders/1RzGeEvaFa7SR0Bg3NvBdA9Cxc0OJeXT1

Sources: https://designcompass.org/en/2024/04/30/headspace/, https://www.headspace.com/, https://drive.google.com/drive/folders/1RxOVgmtgSJe2nMs1bXAQ7Jv18K7nOzpp

## Motion: rules

The brand has always been animated (breath-driven animation since the start, per coverage); the 2024 identity keeps soft, smooth motion. On the site: a looping ticker and tabbed carousels.

Why it works: Animation helps simplify complex ideas (Headspace via It's Nice That).

|  |  |
|---|---|
| Durations | not published |
| Easing | not published |

- Slow, soft, breathing pace
- Animate characters, not layouts
- Don't use fast or bouncy UI transitions

Not published: Motion durations and easing.

Sources: https://www.itsnicethat.com/articles/italic-studio-headspace-graphic-design-project-250424, https://designcompass.org/en/2024/04/30/headspace/, https://www.headspace.com/

## Interface and layout: rules

A white page with a centred hero, two warm #F9F4F2 cards, a six-tile category grid, then white sections holding inset radius-16 color cards (yellow slide, blue business band, sky band) and a full-bleed yellow ticker, a giant pill CTA on yellow and a dense white footer with a dark #44423F base bar.

Why it works: White sections hold information; color bands mark emotional beats and offers.

|  |  |
|---|---|
| Page width measured | 1440 |
| Hero cards | #F9F4F2 |
| Footer base | #44423F |

- Centre headings
- Alternate white and one bright band
- End on one big CTA
- Don't stack two colored bands of the same color

Real examples, to look at on Headspace's own pages (not for reuse):
- Today tab: illustration thumbnails in a list: https://drive.google.com/drive/folders/1RzGeEvaFa7SR0Bg3NvBdA9Cxc0OJeXT1

Sources: https://www.headspace.com/

## Rules: rules

Rules gathered from the press kit, the 2024 coverage and the site.

Why it works: Headspace has no public guideline document; these are the stable patterns.

|  |  |
|---|---|

- Orange is the logo and the lead character
- Pills for every action
- Sentence case, warm and plain
- Supplied illustrations only
- Don't invent faces
- Don't set type in orange
- Don't imply Ebb replaces care

Sources: https://drive.google.com/drive/folders/1_bGJi36dthZc4eDgt2jDTqaAj12Qxrbi, https://www.itsnicethat.com/articles/italic-studio-headspace-graphic-design-project-250424, https://www.headspace.com/

## Campaigns

### One Headspace brand refresh (2023)

On October 31, 2023 Headspace Health became Headspace and unified its products under one brand (Ginger became Headspace Care). The refreshed identity, covered in April 2024, was made in-house with Italic Studio, with a custom Aperçu by Colophon Foundry and guidelines by Order on Standards.

How the system shows: Orange kept as the signature with complementary emotion colors; faces beyond the smile; one typeface from playful to clinical; more photography for care.
Why it works: The brand Headspace already had (cited by 73% of enterprise clients as an adoption driver) now carries clinical care too.
Channels: product, press, app, website. Source: https://organizations.headspace.com/blog/headspace-unveils-refreshed-brand-and-expands-offerings-for-lifelong-mental-health-support

### Meet Ebb (2024)

Launch of Ebb, Headspace's empathetic AI companion (press coverage October 10, 2024), with voice mode and memory added December 2025.

How the system shows: Key visual: "Meet Ebb" in bold white on orange beside a soft pink-to-orange blob character with simple eyes.
Why it works: The AI gets a Headspace face, so a new technology reads as part of the same warm cast.
Channels: app, press, website. Source: https://www.headspace.com/press-and-media

## Applications

| Format | What | Source |
|---|---|---|
| website | headspace.com: white page, pill nav, feeling-first hero with two cards, yellow/blue bands, giant pill close. | https://www.headspace.com/ |
| app | Today, Meditate, Sleep and Care screens: white UI, illustration thumbnails, purple sleep player. | https://drive.google.com/drive/folders/1RzGeEvaFa7SR0Bg3NvBdA9Cxc0OJeXT1 |
| illustration kit | 3840 x 2160 scenes in eight themes for press and partners. | https://drive.google.com/drive/folders/1RvePlqySxy3s7GBtJd4p5zZe0IfBv1dK |
| key visual | Meet Ebb hero and app-screen composite on an orange-pink field. | https://drive.google.com/drive/folders/1f7lekUX-EfQAT6KaKAkDkBBbWoejz7nS |
| press page | #0C6FF9 hero band, #FAF6F4 press-kit band, dated coverage list. | https://www.headspace.com/press-and-media |

## By format

How our engine applies Headspace's system to each format. Our recipe, not something Headspace publishes. Loudness runs 0 (nothing but the essentials) to 5 (the signature moves at full volume).

| Format | Loudness 0–5 | Must appear | What varies |
|---|---|---|---|
| Landing page | 3 | White page; centred bold sentence-case hero with a feeling-first line; #F9F4F2 cards with dark pill CTAs; a full-bleed #FFCE00 strip plus inset radius-16 color cards; blue #0061EF primary pill; a press-kit illustration; close on one big blue pill on yellow | which bands follow the hero; illustration theme |
| Deck | 3 | White or yellow slides, ink bold headings, one illustration per section, logo primary on white | emotion color per section |
| Social post | 4 | Full-bleed flat color with one character illustration and a short ink or white line | color and mood |
| Email | 2 | White body, ink type, one blue pill, one illustration | header color band |

## Checks before anything ships

- **Logo hidden**: Cover the logo. It should still read as Headspace: flat bright bands, a round smiling character, ink bold type, pills.
- **Swap test**: Put another name on it. If nothing else changed, the faces, the yellow/blue bands and the warm voice are missing.
- **Care check**: Nothing implies Ebb or the app replaces a clinician.

## Make it your own

Keep the system: color roles and proportions, type, layout, components, the signature moves, the voice traits and rules. Replace everything that is Headspace's own: name and logo, positioning, pillars, proof, taglines, boilerplate and any real line quoted above. kit.json lists these under make_it_yours.

## Not published

- No public brand guideline document (Headspace's guidelines by Order on Standards are not public)
- Official palette hex values are not published beyond the logo files (#FF7300, #2D2C2B); every other color is observed on headspace.com
- Clear space, minimum size and lockup rules for the logo are not published
- Type scale, weights and licensing of Headspace Apercu are not published; Colophon Foundry's Headspace page could not be found (colophon-foundry.org now redirects to Monotype)
- Italic Studio's own case study could not be found
- Photography rules are not published
- Motion durations and easing are not published
- Icon set and grid are not published
- No monospace face is observed or published
- Headspace's own press releases on Business Wire and GlobeNewswire returned 403; the refresh release was read on organizations.headspace.com, and the Ebb launch and Sword acquisition are cited from the press page listing
- No named advertising campaign could be sourced

Logos and reference images belong to Headspace. Look at them on Headspace's own pages; don't reuse them.