Viber
A design blueprint Spectr produced from Viber. Scroll to look closer.
Viber purple chat thread with free-call banner, sticker market, check receipts
A pixel-faithful blueprint of the Viber iOS conversation: outgoing Viber Purple (#7360F2) bubbles with white text, incoming gray bubbles (#EDEBF5 light, #26232F dark) at a 16pt radius with a 5pt tail, and the three-state check receipt (one gray sent, two gray delivered, two violet #8F7DF7 seen). Includes the purple-to-deep-violet (#59267C) free-call banner, call-first header with phone and video icons, the sticker market, and the aubergine-tinted (#121118) dark canvas.
Build a complete call-first messenger documented to the exact Rakuten-purple hex palette, Manrope-substitute type ramp, and 4pt/8pt bubble grouping rhythm. Ship SwiftUI, Expo, and Jetpack Compose with the violet seen-receipt recolor, free-call banner gradient, and borderless 96pt in-thread stickers all specced to production fidelity.
Screens documented
- Conversation thread with purple and gray bubbles
- Free Viber Call banner with gradient
- Three-state check receipt sent delivered seen
- In-thread borderless sticker
- Call-first chat header with phone and video
- Aubergine-tinted dark mode canvas
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 Viber blueprint translates cleanly into an Expo Router app structure.