Zomato
A design blueprint Spectr produced from Zomato. Scroll to look closer.
A dual delivery and dining app built on a semantic color-coded rating pill
Zomato runs on a rating pill whose color is the score — green for great, amber for average, red for poor — plus an India-mandated veg/non-veg mark and a bordered red ADD button that overlaps each dish photo. A Delivery / Dining Out toggle re-themes the entire restaurant detail screen under a full-bleed hero and a pull-up info card.
Clone the restaurant app that is both food delivery and dining-out discovery. This pack ships the exact Zomato Red, the semantic green/amber/red rating scale, the veg/non-veg mark, the bordered ADD button and the Delivery/Dining toggle with paste-ready SwiftUI, Expo, and Compose components.
Screens documented
- Restaurant detail with hero and pull-up card
- Delivery and Dining Out segmented toggle
- Menu with veg marks and bordered ADD buttons
- Semantic rating pills on cards and dishes
- Cart and checkout with price button
- Live order tracking with rider map
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 Zomato blueprint translates cleanly into an Expo Router app structure.