Citymapper
A design blueprint Spectr produced from Citymapper. Scroll to look closer.
Citymapper design blueprint — build a multimodal transit and navigation app
A complete UI blueprint of the Citymapper iOS app — the colored leg strip, ranked route options, the iconic GO button, GO trip mode, and the live departures board — captured with every mode color, type scale, and spacing rule intact.
Use this spec as the foundation for any transit, journey-planning, or live-navigation app. The theme-invariant mode-color system and the shape-locked GO pill are documented down to hex codes and pixel values.
Screens documented
- Route options list
- Origin to destination
- GO trip mode
- Live departures board
- Nearby stops
- Saved + you
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 Citymapper blueprint translates cleanly into an Expo Router app structure.