Life360
A design blueprint Spectr produced from Life360. Scroll to look closer.
Clone Life360 iOS down to the family map, member identity colors, and SOS button
A pixel-faithful design token catalog reverse-engineered from the Life360 iOS app, built around the map-first home screen where every family member is a fixed-color pin you find by hue, not by reading names. Deep violet night canvas, a dark-styled map that keeps the colored pins salient, and Life360 Purple as the brand spine for Circles and Places.
Everything you need to ship a Life360-grade family locator: exact hex values, the dark-styled map with member pins, the per-member identity color system used everywhere, the draggable member sheet with battery, translucent Place geofences, and the press-and-hold SOS button. Comes with framework-neutral specs plus SwiftUI, Expo, and Jetpack Compose guides.
Screens documented
- Family map with member pins
- Draggable member sheet with battery
- Circle selector and switcher
- Place geofence and arrival alerts
- Member detail with location history
- Driving report with trip events
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 Life360 blueprint translates cleanly into an Expo Router app structure.