A warm, calming system built on a sand-toned canvas and soft charcoal ink, where a single confident cobalt blue carries every action and a sunny marigold yellow plays the brand's friendly accent.
Set in Headspace Apercu (a proprietary humanist grotesque); shown here in Hanken Grotesk, the closest Google substitute. Hierarchy is built on size and weight alone — just regular (400) and bold (700).
Cards sit on white over the sand canvas, rounded at 16px, flat by default and lifting to a soft shadow on hover.
Built on an 8px base unit (with a 4px sub-step), scaling to a generous 64px rhythm between major sections.
Roundness is the signature — from a 2px hairline detail up to fully-rounded pills on the largest hero CTAs.
| Name | Width | Key changes |
|---|---|---|
| Mobile | < 768px | Grids collapse to one column; display headlines drop to ~36–40px; side margins tighten to ~22px. |
| Tablet | 768–1023px | Card grids go two-up; hero display steps down to ~48px; CTAs stack. |
| Laptop | 1024–1279px | Full multi-column grids return; centered column with wide calm margins. |
| Desktop | ≥ 1280px | Max content width ~1200px; generous 64px+ vertical rhythm between bands. |
Layout note: A centered column with airy margins, alternating sand and white (or colored) full-width bands to segment the long marketing page.
Sample membership tiers demonstrating the card, list, and emphasis patterns — modeled on Headspace's subscription style.
A sample content table using the warm header fill, hairline rows, and pill status tags.
| ID | Session | Category | Status | When |
|---|---|---|---|---|
| #4821 | Letting Go of Stress | Meditation | Completed | Today |
| #4820 | Wind Down | Sleepcast | Completed | Yesterday |
| #4819 | Reframe Anxiety | Course | In progress | 2 days ago |
| #4818 | Focus Music: Flow | Soundscape | Saved | 3 days ago |
| #4817 | Morning Mindfulness | Meditation | Completed | Last week |
Sign-in and sign-up cards showing the input, button, and elevation patterns on a rounded panel.