iMessage
A design blueprint Spectr produced from iMessage. Scroll to look closer.
Apple iMessage blue and green bubble chat thread, tapbacks, typing dots
A pixel-faithful blueprint of the iMessage iOS thread: outgoing iMessage Blue (#007AFF) bubbles with white text, SMS Green (#34C759) fallback, and incoming gray bubbles (#E9E9EB light, #26262A dark) with a pinched ~6pt tail corner at a 19pt radius. Includes the centered avatar-over-name nav bar, the six-glyph tapback strip, pulsing typing dots, Delivered/Read receipts, and the blur-backed compose bar.
Build a complete Apple-grade messaging client documented down to the exact system hex values, SF Pro Dynamic Type ramp, and 3pt/9pt bubble grouping rhythm. Ship SwiftUI, Expo, and Jetpack Compose with the tapback capsule, typing indicator, and true-black OLED dark mode all specced to production fidelity.
Screens documented
- Conversation thread with blue and gray bubbles
- SMS green fallback bubble
- Tapback reaction strip and docked chip
- Typing indicator with pulsing dots
- Delivered and Read receipts
- Blur-backed compose input bar
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 iMessage blueprint translates cleanly into an Expo Router app structure.