Headspace
A design blueprint Spectr produced from Headspace. Scroll to look closer.
Headspace design blueprint — build a warm meditation + sleep app
A complete spec of the Headspace iOS app — Today screen, meditation player with the breathing sphere, Sleep tab with Sage tint, course detail — captured with the butter-cream canvas and Marigold + Aurora gradient wash.
The starting blueprint for any meditation, wellness, sleep, or guided-audio app. The 234pt breathing sphere on a 12s cycle, illustrative tile system, and title-case typography are all documented.
Screens documented
- Today
- Meditate library
- Player + breathing sphere
- Sleep tab
- Course detail
- Profile + streaks
What a Spectr spec includes
Screen-by-screen documentation, complete design system (color, typography, spacing), navigation map, component library, implementation notes, and a Claude Code prompt — everything an AI coding agent needs to build.
Turnaround
Most mobile apps produce a full spec in under 90 seconds from a single screen recording. Upload your own MP4 and watch the blueprint generate live.
Why not a design file?
Design files don't compile. A Spectr spec is optimized for AI coding agents like Claude Code — it produces working code on the first prompt, not layered artboards.
Target stack
Every spec targets Expo SDK 54 and React Native on an iPhone 15 baseline. The Headspace blueprint translates cleanly into an Expo Router app structure.