Runna
A design blueprint Spectr produced from Runna. Scroll to look closer.
Runna Indigo and electric Lime, the color-coded plan week strip, and the guided run card
A pixel-faithful design token catalog reverse-engineered from Runna iOS, built around its two signatures: the color-coded training-plan week strip and the Indigo guided run-session card with its workout-structure breakdown and pace targets. Real two-color brand system, athletic Sora type, an Indigo-tinted dark canvas.
Everything you need to ship a Runna-grade structured-training front end: exact hex values, the seven-cell plan week strip, the guided run-session gradient card, the warm-up to cooldown structure bar, the fixed run-type color system, and the Lime go button. Comes with framework-neutral specs plus SwiftUI, Expo, and Jetpack Compose guides.
Screens documented
- Training plan with week strip
- Guided run-session card
- Workout-structure breakdown
- Live guided run screen
- Run summary with splits
- Progress and pace trends
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 Runna blueprint translates cleanly into an Expo Router app structure.