{ "schema": "brand-kit@2", "palette": { "primary": "#FF7300", "secondary": "#FFCE00", "accent": "#0061EF", "on_accent": "#FFFFFF", "ink": "#2D2C2B", "ink_muted": "#44423F", "surface": "#F9F4F2", "paper": "#FFFFFF", "accent_secondary": "#00A4FF", "night": "#3B197F", "on_night": "#FFFFFF", "extras": [ { "name": "headspace-orange", "hex": "#FF7300", "role": "The logo dot (fill #ff7300 in the registered RGB logo files). Also the face of the smiling orange characters in the illustration kit. Never a text, button or band color on the homepage", "prov": "published", "source": "https://drive.google.com/drive/folders/1RvTZapWJ8TmS6-wp2Px7QoevaHQMRDBm" }, { "name": "ink", "hex": "#2D2C2B", "role": "Wordmark fill in the primary logo file; all headings and body copy, and the filled hero buttons (Try for $0, Check your coverage, Featured tab, Subscribe)", "prov": "published", "source": "https://drive.google.com/drive/folders/1RvTZapWJ8TmS6-wp2Px7QoevaHQMRDBm" }, { "name": "cta-blue", "hex": "#0061EF", "role": "Nav Try for free pill, Learn more and Login buttons, the 72px Get your headspace pill, and the ground of the inset business card (1344px, radius 16)", "prov": "observed", "source": "https://www.headspace.com/", "date": "2026-10-29" }, { "name": "sunshine-yellow", "hex": "#FFCE00", "role": "Most-used colored ground: the product carousel band, the find some headspace ticker strip and the Get your headspace closing band", "prov": "observed", "source": "https://www.headspace.com/", "date": "2026-10-29" }, { "name": "sky-blue", "hex": "#00A4FF", "role": "Ground of the Join the millions social-proof band (white type on top)", "prov": "observed", "source": "https://www.headspace.com/", "date": "2026-10-29" }, { "name": "pink", "hex": "#FFA1CC", "role": "Ground of a product carousel slide (Feel-good library)", "prov": "observed", "source": "https://www.headspace.com/", "date": "2026-10-29" }, { "name": "night-purple", "hex": "#3B197F", "role": "Ground of the Bedtime essentials carousel slide, with white heading; the sleep color", "prov": "observed", "source": "https://www.headspace.com/", "date": "2026-10-29" }, { "name": "green", "hex": "#02873E", "role": "Ground of one product carousel slide", "prov": "observed", "source": "https://www.headspace.com/", "date": "2026-10-29" }, { "name": "warm-card", "hex": "#F9F4F2", "role": "Warm off-white: the two hero cards, the unselected library and carousel tab pills, the Request a demo button on blue, the newsletter strip in the footer", "prov": "observed", "source": "https://www.headspace.com/", "date": "2026-10-29" }, { "name": "ink-soft", "hex": "#44423F", "role": "Secondary text (testimonial attributions, legal line), Request a demo text, and the bottom footer bar ground", "prov": "observed", "source": "https://www.headspace.com/", "date": "2026-10-29" }, { "name": "footer-heading", "hex": "#4B4C4D", "role": "Footer column headings (24px bold)", "prov": "observed", "source": "https://www.headspace.com/", "date": "2026-10-29" }, { "name": "press-blue", "hex": "#0C6FF9", "role": "Ground of the press page hero band", "prov": "observed", "source": "https://www.headspace.com/press-and-media", "date": "2026-10-29" }, { "name": "press-card", "hex": "#FAF6F4", "role": "Ground of the Get our press kit band on the press page", "prov": "observed", "source": "https://www.headspace.com/press-and-media", "date": "2026-10-29" }, { "name": "ink-muted-grey", "hex": "#63605D", "role": "Hero check-list lines (18px) and the HSA/FSA Eligible label under the hero buttons; the email input placeholder", "prov": "observed", "source": "https://www.headspace.com/", "date": "2026-10-29" }, { "name": "tile-border", "hex": "#E2DED9", "role": "2px border of the six need-state tiles and the 2px hairline that separates the footer newsletter row from the link columns", "prov": "observed", "source": "https://www.headspace.com/", "date": "2026-10-29" }, { "name": "faq-rule", "hex": "#C6C1B9", "role": "1px rule under each FAQ row", "prov": "observed", "source": "https://www.headspace.com/", "date": "2026-10-29" }, { "name": "input-border", "hex": "#D2D5DE", "role": "1px border of the email input; 2px ring of the carousel arrow buttons", "prov": "observed", "source": "https://www.headspace.com/", "date": "2026-10-29" }, { "name": "dot-inactive", "hex": "#DAD9D9", "role": "Inactive carousel dots (10px); the active dot is #44423F", "prov": "observed", "source": "https://www.headspace.com/", "date": "2026-10-29" } ] }, "typography": { "display": { "family": "Hanken Grotesk", "weight": 700, "tracking": -0.03, "line_height": 1, "fallback_stack": "system-ui, \"Helvetica Neue\", Helvetica, Arial, sans-serif", "google_fonts": "Hanken+Grotesk:wght@400;600;700", "real": "Headspace Apercu (custom Aperçu by Colophon Foundry), proprietary", "stand_in": true, "licence": "Headspace Apercu is proprietary to Headspace. Hanken Grotesk (SIL OFL) is the calibrated open stand-in" }, "body": { "family": "Hanken Grotesk", "weight": 400, "line_height": 1.5, "scale": 1, "fallback_stack": "system-ui, \"Helvetica Neue\", Helvetica, Arial, sans-serif", "google_fonts": "Hanken+Grotesk:wght@400;600;700", "real": "Headspace Apercu (custom Aperçu by Colophon Foundry), proprietary", "stand_in": true, "licence": "Headspace Apercu is proprietary to Headspace. Hanken Grotesk (SIL OFL) is the calibrated open stand-in" }, "calibration": "Calibrated 2026-10-30 by rendering the real Headspace Apercu woff2 files (static.headspace.com/fonts/apercu-v1.002, Regular=400, Medium=600, Bold=700) and 29 Google Fonts candidates at the site's sizes and tracking, then comparing rendered line width and ink per px. Winner for both roles: Hanken Grotesk. Display 700 vs Apercu Bold: \"Feel less anxious\" 52px/-1.56px = 1.011x width, 1.000x ink; \"Members are enjoying happier and\" 64px/-1.92px = 0.993x width, 0.995x ink; \"Check your coverage\" 16px = 0.999x width, 0.975x ink. Body 400 vs Apercu Regular: 18px line 1.009x width, 0.992x ink; 24px/-0.72px 1.032x width; 20px/-0.2px 1.009x width. Runners-up: display Host Grotesk 600 (1.002-1.017x), Funnel Sans 600, Jost 600 (taller x-height, +3-5px ink height), Red Hat Display 700; body Red Hat Display 500, Figtree 400 (1.012-1.031x). Rethink Sans (the earlier placeholder) ran 4-5% light at 600. IMPORTANT: the site loads only Regular (400), Medium (declared 600) and Bold (700). Text the CSS sets at font-weight 500 (announcement bar, business-band subline, ticker words, FAQ questions, View all, footer links, newsletter copy) falls back to Regular 400: set those at 400 in the stand-in, never 500." }, "style": { "button_shape": "pill (32px radius on 48px buttons; 24px radius on 44-48px tab pills; 112px radius on the 188px closing CTA)", "motion": "Breath-driven, smooth character animation in the app and campaigns (published, not measured); on the site a looping word ticker and carousels" }, "voice": { "tone": [ "Warm", "Approachable", "Plain" ], "notes": [ "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": [ { "id": "headline-case", "kind": "headline_case", "value": "sentence" }, { "id": "we-you", "kind": "person", "value": "we_you" }, { "id": "spelling", "kind": "spelling", "value": "en-US" }, { "id": "feeling-first", "kind": "guidance", "text": "Lead with the feeling or outcome the reader wants (Feel less anxious, Sleep soundly), not the feature", "prov": "observed", "source": "https://www.headspace.com/" }, { "id": "normalise", "kind": "guidance", "text": "Make talking about mental health feel approachable and normal, never alarming", "prov": "published", "source": "https://www.itsnicethat.com/articles/italic-studio-headspace-graphic-design-project-250424" }, { "id": "ebb-limits", "kind": "guidance", "text": "When Ebb is mentioned, say it is an AI companion that does not replace human care", "prov": "published", "source": "https://www.headspace.com/ai-mental-health-companion" }, { "id": "short-ctas", "kind": "guidance", "text": "CTAs are two to four words: Try for free, Try for $0, Check your coverage, Request a demo", "prov": "observed", "source": "https://www.headspace.com/" } ], "approved": { "words": [ "your mind", "mental health", "headspace", "Try for free", "Check your coverage", "everyday", "members" ] }, "banned": [ "Ebb replaces your therapist", "Ebb is a therapist" ] }, "spec": { "source": "https://www.headspace.com/", "how": "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", "provenance": "observed", "signature": [ { "id": "smiling-dot", "name": "The orange dot becomes a face", "where": "logo, illustration kit, hero and Ebb key visual", "spec": "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", "dont": "No redrawn or new faces, no realistic mascots, no smile on the logo dot itself", "prov": "published", "source": "https://drive.google.com/drive/folders/1RvePlqySxy3s7GBtJd4p5zZe0IfBv1dK" }, { "id": "color-bands", "name": "White page, bright inset cards and yellow strips", "where": "headspace.com homepage, top to bottom", "spec": "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", "dont": "No orange bands, no grey or dark bands, no gradients on grounds", "prov": "observed", "source": "https://www.headspace.com/", "date": "2026-10-29" }, { "id": "pills", "name": "Everything you press is a pill", "where": "nav, hero cards, tabs, CTAs", "spec": "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", "dont": "No square or outlined buttons, no orange buttons", "prov": "observed", "source": "https://www.headspace.com/", "date": "2026-10-29" }, { "id": "ticker", "name": "find some headspace ticker", "where": "between the business band and the library", "spec": "An 86px #FFCE00 strip with a looping line of lowercase \"find some headspace\" separated by pairs of character eyes, in ink", "dont": "Never more than one ticker on a page", "prov": "observed", "source": "https://www.headspace.com/", "date": "2026-10-29" } ], "motion": [ { "name": "breath-animation", "use": "Character animation paced like breathing; Headspace says its animations help simplify complex ideas", "prov": "published", "source": "https://www.itsnicethat.com/articles/italic-studio-headspace-graphic-design-project-250424" }, { "name": "smooth-soft", "use": "Soft colors and smooth motions are part of the 2024 identity (coverage; no durations or easing published)", "prov": "published", "source": "https://designcompass.org/en/2024/04/30/headspace/" }, { "name": "ticker-loop", "use": "The find some headspace strip scrolls continuously; carousels advance by tab (speed not measured)", "prov": "observed", "source": "https://www.headspace.com/", "date": "2026-10-29" }, { "name": "button-press", "easing": "cubic-bezier(0.32, 0.94, 0.6, 1)", "duration_ms": 150, "use": "Every pill button: color and background-color transition", "prov": "observed", "source": "https://www.headspace.com/ (computed styles, 2026-10-29)" }, { "name": "tile-border", "easing": "ease", "duration_ms": 300, "use": "Need-state tile border and tab pill fill transitions (CSS transition 0.3s, default ease)", "prov": "observed", "source": "https://www.headspace.com/ (computed styles, 2026-10-29)" } ], "icons": { "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", "prov": "observed", "source": "https://www.headspace.com/" }, "layout": { "page_margin": { "desktop": 48, "phone": 24 }, "section_padding": { "desktop": 64, "phone": 32 }, "container_max": 1344, "hero_text_max": 420, "columns": 3, "columns_phone": 1, "gutter": 24, "gutter_phone": 16, "card_gap": 24, "nav_height": 80, "note": "Page is 8755px tall at 1440 and 8769px at 390. Content sits in a 1344px column at x48-1392 (48px margins); the hero cards use x54-1386; FAQ uses an 888px column at x276-1164. Phone margins are 24px for most bands, 16px for the hero cards and the footer newsletter, 20px for FAQ and footer. Three colored panels (the carousel slide, the blue business band, the sky social-proof band) are NOT full-bleed: they are 1344px wide inset cards with 16px radius on white (342px wide at x24 on phone). Only three things run full-bleed edge to edge: the yellow announcement bar (58px), the yellow ticker strip (86px) and the closing yellow CTA band (976px), plus the footer. Use the absolute y coordinates in kit.spec.page; the padding numbers are CSS padding, not distances to ink." }, "breakpoints": { "phone_max": 767, "all": [ 767, 1024, 1280 ], "note": "Observed: the nav collapses to dot logo + Try for free + hamburger and the hero cards stack at phone width; the exact CSS breakpoints were not read from the stylesheet (inferred from the 390 and 1440 layouts). Treat 767 as the switch." }, "type": [ { "id": "display-xl", "role": "Closing pill label \"Get your headspace\"", "face": "display", "size": { "desktop": 72, "phone": 28 }, "line_height": 1, "weight": 700, "tracking_px": -2.16, "prov": "observed", "source": "https://www.headspace.com/ (Playwright Chromium, 1440x900 and 390x844, computed styles and bounding boxes, 2026-10-29)", "note": "72/72 desktop, white, inside the 750x188 blue pill; 28px phone (-0.84px) in a 308x100 pill. Tracking is always -0.03em" }, { "id": "display-l", "role": "Big section H2s: Members are enjoying happier and healthier lives, Explore our library, Join the millions who use Headspace every day", "face": "display", "size": { "desktop": 64, "phone": 40 }, "line_height": 1, "weight": 700, "tracking_px": -1.92, "prov": "observed", "source": "https://www.headspace.com/ (Playwright Chromium, 1440x900 and 390x844, computed styles and bounding boxes, 2026-10-29)", "note": "64/64 desktop (2 lines, centred), 40/48 phone (Members: 4 lines; Join: 4 lines 40/44; Explore: 1 line 40/44). Members H2 950px wide at 1440; Join 687px wide (white); Explore 510px. Line-height is exactly 64px (2 lines = 128px of line boxes). The 145px boxes quoted in the page anatomy are glyph-overflow boxes, not line boxes: place by line boxes. Members H2 ink runs y2568-2715 at 1440" }, { "id": "display-hero", "role": "Hero H1, two lines: rotating word line + \"all with Headspace\"", "face": "display", "size": { "desktop": 52, "phone": 36 }, "line_height": 1.1, "weight": 700, "tracking_px": -1.56, "prov": "observed", "source": "https://www.headspace.com/ (Playwright Chromium, 1440x900 and 390x844, computed styles and bounding boxes, 2026-10-29)", "note": "52/57.2 desktop, centred, line 1 369px wide (\"Feel less anxious\"), line 2 420px (\"all with Headspace\"); phone 36/36 (-1.08px), line 1 255px, line 2 291px. Line 1 cycles Stress less / Sleep better / Feel less anxious: draw \"Feel less anxious\" (the captured resting frame). Line-height: 57.2px desktop (1.1), 36px phone (1.0). The H1 element starts at y138 (straight under the nav); measured cap/ascender ink of line 1 runs y148-185, line 2 y207-254 at 1440" }, { "id": "display-m", "role": "Carousel section H2 \"The mental health app for every moment\"", "face": "display", "size": { "desktop": 48, "phone": 32 }, "line_height": 1, "weight": 700, "tracking_px": -1.44, "prov": "observed", "source": "https://www.headspace.com/ (Playwright Chromium, 1440x900 and 390x844, computed styles and bounding boxes, 2026-10-29)", "note": "48/48 desktop, 2 lines 532px wide (\"The mental health app for / every moment\"); phone 32/35.2, 2 lines" }, { "id": "heading-l", "role": "Slide H3s, business band H2, FAQ H2", "face": "display", "size": { "desktop": 40, "phone": 32 }, "line_height": 1.15, "weight": 700, "tracking_px": -1.2, "prov": "observed", "source": "https://www.headspace.com/ (Playwright Chromium, 1440x900 and 390x844, computed styles and bounding boxes, 2026-10-29)", "note": "40/46 desktop. Slide H3 left-aligned 2 lines in a 336px box (\"Always-there / support\"); business H2 3 lines in 450px, white; FAQ H2 40/45 one line centred (466px). Phone 32/36.8 (FAQ 32/42, left-aligned, 2 lines)" }, { "id": "heading-m", "role": "Hero card titles, need-state H2, library card titles", "face": "display", "size": { "desktop": 32, "phone": 24 }, "line_height": 1.2, "weight": 700, "tracking_px": -0.96, "prov": "observed", "source": "https://www.headspace.com/ (Playwright Chromium, 1440x900 and 390x844, computed styles and bounding boxes, 2026-10-29)", "note": "32/38.4 desktop. Hero card 1 title 2 lines in 468px (\"Mental health app with expert-led / meditations and tools\"), card 2 title 2 lines in 265px (\"Online therapy that / accepts insurance\"); need-state H2 one line 606px; library card titles white, centred, 1-2 lines. Phone 24/28.8 (library titles 20/24)" }, { "id": "stat", "role": "Stat numbers 8M+ and 34M+ in the sky band", "face": "display", "size": { "desktop": 56, "phone": 32 }, "line_height": 1.1, "weight": 700, "tracking_px": -1.68, "prov": "observed", "source": "https://www.headspace.com/ (Playwright Chromium, 1440x900 and 390x844, computed styles and bounding boxes, 2026-10-29)", "note": "56/61.6 white desktop; 32/38.4 phone" }, { "id": "quote", "role": "Member quotes and need-state tile labels", "face": "body", "size": { "desktop": 24, "phone": 20 }, "line_height": 1.3, "weight": 400, "tracking_px": 0, "prov": "observed", "source": "https://www.headspace.com/ (Playwright Chromium, 1440x900 and 390x844, computed styles and bounding boxes, 2026-10-29)", "note": "Quotes 24/31.2 400 #2D2C2B, 6, 5 and 5 lines in a 336px measure. Need-state tile labels 24/28.8 400 tracking -0.72px (phone 20/24, -0.6px). FAQ questions are CSS 24/31.2 weight 500, which renders Regular 400 (phone 20/26)" }, { "id": "lead", "role": "Business band subline, FAQ answers", "face": "body", "size": { "desktop": 20, "phone": 16 }, "line_height": 1.5, "weight": 400, "tracking_px": -0.2, "prov": "observed", "source": "https://www.headspace.com/ (Playwright Chromium, 1440x900 and 390x844, computed styles and bounding boxes, 2026-10-29)", "note": "20/30. Business subline white, 2 lines in 450px (CSS 500, renders 400). FAQ answers 20/30 400 -0.2px (collapsed at rest). Phone 16/24" }, { "id": "body-l", "role": "Hero check-list, tab labels, announcement bar, stat labels", "face": "body", "size": { "desktop": 18, "phone": 16 }, "line_height": 1.2, "weight": 400, "tracking_px": 0, "prov": "observed", "source": "https://www.headspace.com/ (Playwright Chromium, 1440x900 and 390x844, computed styles and bounding boxes, 2026-10-29)", "note": "Hero check-list 18/20.7 400 #63605D (3 items in one centred row, 16px check icon + 8px gap). Tabs 18/21.6 700 -0.54px (phone 16/19.2 -0.48px). Announcement 18/26 underlined #2D2C2B. Stat labels 18/21.6 700 white" }, { "id": "body", "role": "Slide copy, quote attribution, library descriptions, newsletter copy", "face": "body", "size": { "desktop": 16, "phone": 16 }, "line_height": 1.5, "weight": 400, "tracking_px": 0, "prov": "observed", "source": "https://www.headspace.com/ (Playwright Chromium, 1440x900 and 390x844, computed styles and bounding boxes, 2026-10-29)", "note": "16/24. Slide copy 4 lines in 325px; attributions #44423F 2 lines in ~200px; library descriptions white centred 1-2 lines (phone 12/18); nav links 16/18.4 400 #2D2C2B" }, { "id": "button", "role": "Pill button labels", "face": "body", "size": { "desktop": 16, "phone": 16 }, "line_height": 1.1, "weight": 700, "tracking_px": 0, "prov": "observed", "source": "https://www.headspace.com/ (Playwright Chromium, 1440x900 and 390x844, computed styles and bounding boxes, 2026-10-29)", "note": "16/17.6 700. Nav Try for free is 14/15.4 700. Subscribe is 18/19.8 700. Tab pills 18/21.6 700" }, { "id": "caption", "role": "HSA/FSA Eligible, badges, footer links and legal", "face": "body", "size": { "desktop": 12, "phone": 12 }, "line_height": 1.15, "weight": 400, "tracking_px": -0.12, "prov": "observed", "source": "https://www.headspace.com/ (Playwright Chromium, 1440x900 and 390x844, computed styles and bounding boxes, 2026-10-29)", "note": "HSA/FSA Eligible 12/19.2 700 #63605D (phone 14). Library badges 14/16.1 700 #0061EF. Footer links 12/13.8 (CSS 500, renders 400) #44423F, 21.7px row pitch. Legal bar 12/16 white" }, { "id": "footer-heading", "role": "Footer column headings", "face": "display", "size": { "desktop": 24, "phone": 24 }, "line_height": 1.33, "weight": 700, "tracking_px": -0.6, "prov": "observed", "source": "https://www.headspace.com/ (Playwright Chromium, 1440x900 and 390x844, computed styles and bounding boxes, 2026-10-29)", "note": "24/32 700 #4B4C4D. \"Stay in the loop\" is 24/27.6 700 #2D2C2B" } ], "components": { "button_primary_blue": { "fill": "#0061EF", "text": "#FFFFFF", "height": 48, "padding_x": 24, "radius": "pill", "font_size": 14, "weight": 700, "face": "body", "note": "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)", "prov": "observed", "source": "https://www.headspace.com/ (Playwright Chromium, 1440x900 and 390x844, computed styles and bounding boxes, 2026-10-29)" }, "button_primary_ink": { "fill": "#2D2C2B", "text": "#FFFFFF", "height": 48, "padding_x": 20, "radius": "pill", "font_size": 16, "weight": 700, "face": "body", "note": "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))", "prov": "observed", "source": "https://www.headspace.com/ (Playwright Chromium, 1440x900 and 390x844, computed styles and bounding boxes, 2026-10-29)" }, "button_light": { "fill": "#F9F4F2", "text": "#44423F", "height": 48, "padding_x": 24, "radius": "pill", "font_size": 16, "weight": 700, "face": "body", "note": "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", "prov": "observed", "source": "https://www.headspace.com/ (Playwright Chromium, 1440x900 and 390x844, computed styles and bounding boxes, 2026-10-29)" }, "button_outline_white": { "fill": "#0061EF", "text": "#FFFFFF", "ring": "#FFFFFF", "ring_px": 2, "height": 48, "padding_x": 24, "radius": "pill", "font_size": 16, "weight": 700, "face": "body", "note": "Business band \"Learn more\" 136x48: blue fill (same as the band) with a 2px white ring", "prov": "observed", "source": "https://www.headspace.com/ (Playwright Chromium, 1440x900 and 390x844, computed styles and bounding boxes, 2026-10-29)" }, "button_cta_giant": { "fill": "#0061EF", "text": "#FFFFFF", "height": 188, "padding_x": 64, "radius": 112, "font_size": 72, "weight": 700, "face": "display", "note": "\"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", "prov": "observed", "source": "https://www.headspace.com/ (Playwright Chromium, 1440x900 and 390x844, computed styles and bounding boxes, 2026-10-29)" }, "tab_pill": { "fill": "#F9F4F2", "text": "#2D2C2B", "height": 48, "padding_x": 24, "radius": 24, "font_size": 18, "weight": 700, "face": "body", "note": "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", "prov": "observed", "source": "https://www.headspace.com/ (Playwright Chromium, 1440x900 and 390x844, computed styles and bounding boxes, 2026-10-29)" }, "need_state_tile": { "fill": "#FFFFFF", "text": "#2D2C2B", "ring": "#E2DED9", "ring_px": 2, "radius": 8, "note": "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", "prov": "observed", "source": "https://www.headspace.com/ (Playwright Chromium, 1440x900 and 390x844, computed styles and bounding boxes, 2026-10-29)" }, "warm_card": { "fill": "#F9F4F2", "text": "#2D2C2B", "radius": 24, "note": "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)", "prov": "observed", "source": "https://www.headspace.com/ (Playwright Chromium, 1440x900 and 390x844, computed styles and bounding boxes, 2026-10-29)" }, "library_card": { "fill": "#2D2C2B", "text": "#FFFFFF", "radius": 16, "note": "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\")", "prov": "observed", "source": "https://www.headspace.com/ (Playwright Chromium, 1440x900 and 390x844, computed styles and bounding boxes, 2026-10-29)" }, "carousel_arrow": { "fill": "#F9F4F2", "text": "#2D2C2B", "radius": "pill", "note": "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", "prov": "observed", "source": "https://www.headspace.com/ (Playwright Chromium, 1440x900 and 390x844, computed styles and bounding boxes, 2026-10-29)" }, "stat_pill": { "fill": "none", "text": "#FFFFFF", "ring": "#FFFFFF", "ring_px": 2, "radius": 30, "note": "\"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", "prov": "observed", "source": "https://www.headspace.com/ (Playwright Chromium, 1440x900 and 390x844, computed styles and bounding boxes, 2026-10-29)" }, "faq_row": { "fill": "#FFFFFF", "text": "#2D2C2B", "radius": 0, "note": "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", "prov": "observed", "source": "https://www.headspace.com/ (Playwright Chromium, 1440x900 and 390x844, computed styles and bounding boxes, 2026-10-29)" }, "email_input": { "fill": "#FFFFFF", "text": "#63605D", "ring": "#D2D5DE", "ring_px": 1, "radius": 8, "height": 58, "note": "283x58 desktop (358 phone), 1px #D2D5DE border, radius 8, floating label \"Email address\" 16/24 #63605D", "prov": "observed", "source": "https://www.headspace.com/ (Playwright Chromium, 1440x900 and 390x844, computed styles and bounding boxes, 2026-10-29)" } }, "page": { "source": "https://www.headspace.com/", "date": "2026-10-29", "prov": "observed", "announcement": { "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)" }, "nav": { "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" }, "sections": [ { "name": "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" ] }, { "name": "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" ] }, { "name": "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" ] }, { "name": "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" ] }, { "name": "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": [] }, { "name": "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" ] }, { "name": "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" ] }, { "name": "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" ] }, { "name": "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" }, "dark_ground": { "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" } }, "bands": [ { "label": "Announcement", "ground": "#FFCE00", "content": "one underlined link", "desktop": "y0-58", "phone": "y0-58", "anatomy": [ "full-bleed yellow" ] }, { "label": "Nav", "ground": "#FFFFFF", "content": "logo, 6 links, Log in, Help, Try for free", "desktop": "y58-138", "phone": "y58-122; dot logo, pill, hamburger", "anatomy": [ "no border" ] }, { "label": "Hero", "ground": "#FFFFFF", "content": "H1 2 lines, check list, two warm cards with images", "desktop": "y138-887; cards y329-867 (914 + 398 wide)", "phone": "y122-1137; cards stacked 358x437", "anatomy": [ "cards #F9F4F2 radius 24", "images flush to card bottom" ] }, { "label": "Need-state tiles", "ground": "#FFFFFF", "content": "H2 + 3x2 outline tiles", "desktop": "y887-1360", "phone": "y1137-1875; 6 stacked", "anatomy": [ "2px #E2DED9 border, radius 8" ] }, { "label": "Product carousel", "ground": "#FFFFFF", "content": "H2, 5 tabs, yellow slide card 1344x590 + pink peek, dots", "desktop": "y1360-2316; slide y1640-2230", "phone": "y1875-2837", "anatomy": [ "slide radius 16, #FFCE00" ] }, { "label": "Member quotes", "ground": "#FFFFFF", "content": "H2 with 6 floating blobs, 3 warm quote cards", "desktop": "y2316-3351; cards 432x427 at y2828", "phone": "y2837-3799; swipe row", "anatomy": [ "cards #F9F4F2 radius 16" ] }, { "label": "Business band", "ground": "#0061EF", "content": "logo marquee, H2, subline, 2 pills, photo collage", "desktop": "inset card x48 y3399-4201, radius 16", "phone": "x24 y3839-4592", "anatomy": [ "white type", "not full-bleed" ] }, { "label": "Ticker", "ground": "#FFCE00", "content": "find some headspace + eyes, looping", "desktop": "y4330-4416 full-bleed", "phone": "y4720-4776", "anatomy": [ "ink text 32px" ] }, { "label": "Library", "ground": "#FFFFFF", "content": "H2, 5 icon tabs, image cards 318x434, View all + arrows", "desktop": "y4464-5254", "phone": "y4824-5382", "anatomy": [ "cards radius 16 with bottom scrim" ] }, { "label": "Social proof", "ground": "photo-dark", "ground_note": "#00A4FF with sky-bg.webp at opacity 0.6 on top", "content": "pill, H2, avatars, dark pill, 4 stats", "desktop": "inset card x48 y5334-6052, radius 16", "phone": "x24 y5450-6180", "anatomy": [ "white type on sky" ] }, { "label": "FAQ", "ground": "#FFFFFF", "content": "H2 + 8 collapsed rows", "desktop": "y6084-6976; column x276-1164", "phone": "y6204-7165; H2 left", "anatomy": [ "1px #C6C1B9 rules" ] }, { "label": "Closing CTA", "ground": "#FFCE00", "content": "white arc top edge, giant blue pill, empty yellow", "desktop": "y6976-7935", "phone": "y7165-7643", "anatomy": [ "empty yellow below the pill at rest" ] }, { "label": "Footer", "ground": "#F9F4F2", "content": "newsletter, hairline, 6 columns, legal bar #44423F", "desktop": "y7935-8755 (legal bar y8655)", "phone": "y7643-8769", "anatomy": [ "link columns 12px #44423F" ] } ] }, "system": { "fixed": [ "The orange dot logo and lowercase wordmark", "Headspace Apercu, bold sentence-case headings", "Pill-shaped actions", "Flat, round, face-led illustration from the kit" ], "flex": "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.", "traits": [ { "is": "Approachable", "not": "Clinical", "text": "Aims to make talking about mental health feel normal.", "prov": "published", "source": "https://www.itsnicethat.com/articles/italic-studio-headspace-graphic-design-project-250424" }, { "is": "Playful", "not": "Childish", "text": "The team moved away from feedback that it felt \"childish and cartoony\".", "prov": "published", "source": "https://blush.design/blog/post/headspace-mindfulness-app" }, { "is": "Emotionally honest", "not": "Relentlessly happy", "text": "Faces now show stress and sadness, not only smiles.", "prov": "published", "source": "https://www.itsnicethat.com/articles/italic-studio-headspace-graphic-design-project-250424" }, { "is": "Expert-backed", "not": "Preachy", "text": "Expert-led meditations; Ebb tested by clinical experts.", "prov": "observed", "source": "https://www.headspace.com/" } ] }, "proportion": { "note": "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.", "source": "https://www.headspace.com/", "prov": "observed", "parts": [ { "name": "White", "hex": "#FFFFFF", "n": 58 }, { "name": "Yellow", "hex": "#FFCE00", "n": 24 }, { "name": "CTA blue", "hex": "#0061EF", "n": 9 }, { "name": "Sky blue", "hex": "#00A4FF", "n": 8 } ] }, "tone_by_state": { "note": "Our reading: consumer pages are warm and light; care, Ebb safety and business copy turn plainer.", "source": "https://www.headspace.com/", "states": [ { "state": "Homepage and app content", "level": 4 }, { "state": "Business and care offers", "level": 2 }, { "state": "Ebb safety and crisis copy", "level": 1 } ] }, "formats": [ { "format": "Landing page", "level": 3, "must": "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", "flex": "which bands follow the hero; illustration theme" }, { "format": "Deck", "level": 3, "must": "White or yellow slides, ink bold headings, one illustration per section, logo primary on white", "flex": "emotion color per section" }, { "format": "Social post", "level": 4, "must": "Full-bleed flat color with one character illustration and a short ink or white line", "flex": "color and mood" }, { "format": "Email", "level": 2, "must": "White body, ink type, one blue pill, one illustration", "flex": "header color band" } ], "checks": [ { "name": "Logo hidden", "text": "Cover the logo. It should still read as Headspace: flat bright bands, a round smiling character, ink bold type, pills." }, { "name": "Swap test", "text": "Put another name on it. If nothing else changed, the faces, the yellow/blue bands and the warm voice are missing." }, { "name": "Care check", "text": "Nothing implies Ebb or the app replaces a clinician." } ], "examples": [ { "chapter": "color", "do": { "ground": "secondary", "text": "Get your headspace", "button": true }, "do_caption": "On yellow, the action is a blue pill with white bold text (observed).", "dont": { "ground": "secondary", "text": "Get your headspace", "ink": "primary" }, "dont_caption": "Orange is the logo and the characters; the site never sets type in it." }, { "chapter": "type", "do": { "ground": "paper", "text": "Explore our library" }, "do_caption": "Bold, sentence case, tracked tight.", "dont": { "ground": "paper", "text": "EXPLORE OUR LIBRARY" }, "dont_caption": "No all-caps headings anywhere on the site." }, { "chapter": "logo", "do": { "ground": "paper", "text": "headspace" }, "do_caption": "The wordmark is lowercase; in running text the name is \"Headspace\".", "dont": { "ground": "paper", "text": "HeadSpace" }, "dont_caption": "Never mid-capitalised or retyped." }, { "chapter": "voice", "do": { "ground": "surface", "text": "Feel less anxious" }, "do_caption": "Feeling first, plain and kind (live hero).", "dont": { "ground": "surface", "text": "Ebb replaces your therapist" }, "dont_caption": "Headspace states Ebb does not replace human care." } ], "make_it_yours": { "note": "Everything above transfers. These are Headspace's own and must be replaced with yours: name and logo, purpose, positioning, messaging pillars, proof, taglines and boilerplate.", "replace": [ "identity", "purpose", "positioning", "messaging.pillars", "messaging.proof_points", "messaging.taglines", "messaging.boilerplate" ], "reference": { "purpose": { "mission": { "label": "Mission", "text": "Headspace's mission is to provide every person access to lifelong mental health support.", "prov": "published", "source": "https://www.headspace.com/about-us" }, "story": { "text": "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.", "prov": "published", "source": "https://organizations.headspace.com/blog/headspace-unveils-refreshed-brand-and-expands-offerings-for-lifelong-mental-health-support" }, "values": [ { "name": "Make the Mission Matter", "means": "Named on the about page; meaning not published", "prov": "published", "source": "https://www.headspace.com/about-us" }, { "name": "Iterate to Great", "means": "Named on the about page; meaning not published", "prov": "published", "source": "https://www.headspace.com/about-us" }, { "name": "Own the Outcome", "means": "Named on the about page; meaning not published", "prov": "published", "source": "https://www.headspace.com/about-us" }, { "name": "Connect with Courage", "means": "Named on the about page; meaning not published", "prov": "published", "source": "https://www.headspace.com/about-us" } ] }, "positioning": { "statement": { "text": "The leading everyday mental health companion, helping people care for their minds anytime, anywhere (about-page boilerplate, abridged).", "prov": "published", "source": "https://www.headspace.com/about-us" }, "category": { "text": "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.", "prov": "observed", "source": "https://www.headspace.com/", "date": "2026-10-29" }, "audience": { "text": "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.", "prov": "observed", "source": "https://www.headspace.com/", "date": "2026-10-29" }, "promise": { "text": "Mental health support that feels approachable, from a two-minute meditation to insured therapy, all in one place.", "prov": "inferred", "why": "Hero line \"all with Headspace\" over two cards (app and therapy), and Headspace's stated aim to make talking about mental health feel approachable (It's Nice That, 2024)." }, "differentiators": [ { "text": "Bright, emotional color in a category Headspace calls a \"dreary sea of blues and greys\"", "prov": "published", "source": "https://www.itsnicethat.com/articles/italic-studio-headspace-graphic-design-project-250424" }, { "text": "One app from self-guided content to clinical care (coaching, therapy, psychiatry)", "prov": "published", "source": "https://organizations.headspace.com/blog/headspace-unveils-refreshed-brand-and-expands-offerings-for-lifelong-mental-health-support" }, { "text": "Insurance-accepted online therapy and HSA/FSA eligibility on the homepage", "prov": "observed", "source": "https://www.headspace.com/", "date": "2026-10-29" } ] }, "messaging": { "taglines": [ { "text": "Get your headspace", "prov": "observed", "source": "https://www.headspace.com/", "where": "72px blue pill CTA closing the homepage, 2026-10-29" }, { "text": "find some headspace", "prov": "observed", "source": "https://www.headspace.com/", "where": "looping ticker strip on yellow, 2026-10-29" }, { "text": "your mind matters", "prov": "published", "source": "https://www.headspace.com/about-us", "where": "last line of the about-page boilerplate" }, { "text": "all with Headspace", "prov": "observed", "source": "https://www.headspace.com/", "where": "second line of the rotating hero H1 (e.g. \"Feel less anxious / all with Headspace\"), 2026-10-29" } ], "attributes": [ "approachable", "warm", "playful", "expert-backed" ], "key_messages": [], "boilerplate": { "text": "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).", "prov": "published", "source": "https://www.headspace.com/about-us", "paraphrase": true }, "pillars": [ { "name": "Meditation and mindfulness", "claim": "Mental health app with expert-led meditations and tools (hero card).", "proof": [ "p-library" ], "prov": "observed", "source": "https://www.headspace.com/" }, { "name": "Therapy", "claim": "Online therapy that accepts insurance (hero card).", "proof": [ "p-therapy" ], "prov": "observed", "source": "https://www.headspace.com/" }, { "name": "Ebb, the AI companion", "claim": "An empathetic AI companion for in-the-moment support and personal recommendations.", "proof": [ "p-ebb" ], "prov": "published", "source": "https://www.headspace.com/ai-mental-health-companion" }, { "name": "Sleep", "claim": "Wind-downs, soundscapes and sleepcasts (Bedtime essentials slide).", "proof": [ "p-library" ], "prov": "observed", "source": "https://www.headspace.com/" }, { "name": "For business", "claim": "Mindfulness, coaching, EAP, therapy and psychiatry for teams.", "proof": [ "p-reach", "p-brand" ], "prov": "observed", "source": "https://www.headspace.com/" } ], "proof_points": [ { "id": "p-library", "text": "1,000+ expert-led exercises in a subscription", "prov": "observed", "source": "https://www.headspace.com/", "date": "2026-10-29" }, { "id": "p-therapy", "text": "Online therapy that accepts insurance; HSA/FSA eligible", "prov": "observed", "source": "https://www.headspace.com/", "date": "2026-10-29" }, { "id": "p-downloads", "text": "Trusted mental health app with 105M+ downloads (hero proof row)", "prov": "observed", "source": "https://www.headspace.com/", "date": "2026-10-29" }, { "id": "p-reach", "text": "Used in 200 countries and regions", "prov": "published", "source": "https://www.headspace.com/about-us" }, { "id": "p-ebb", "text": "Ebb is clinically tested for safety and connects members to crisis support when needed", "prov": "published", "source": "https://www.headspace.com/ai-mental-health-companion" }, { "id": "p-brand", "text": "73% of enterprise clients cite the brand as a key driver of employee adoption (Oct 31, 2023)", "prov": "published", "source": "https://organizations.headspace.com/blog/headspace-unveils-refreshed-brand-and-expands-offerings-for-lifelong-mental-health-support" } ], "claim_boundaries": [ "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" ] } } } }