Kik
A design blueprint Spectr produced from Kik. Scroll to look closer.
Kik username-first chat with S/D/R receipts, bots, and Kik Codes
A pixel-faithful blueprint of the Kik iOS app: outgoing Kik Blue (#00B0F0) bubbles with dark-cyan ink (#002A36 for WCAG AA), incoming gray bubbles (#E9EAEC light, #25282D dark) at a 16pt radius with a 5pt tail, and the single-letter S/D/R receipt (Sent gray, Delivered gray, Read turns Kik Blue). Includes the anonymous @username conversation list, first-class bots with rounded-square avatars and a BOT tag, the circular dotted Kik Code plate, and a neutral near-black (#121316) dark canvas.
Build a complete username-first messenger documented to the exact modern Kik-Blue hex palette (with the heritage #82BC23 green noted), Inter-substitute type ramp, and 4pt/8pt bubble grouping rhythm. Ship SwiftUI, Expo, and Jetpack Compose with the S/D/R receipt logic, bot list treatment, Kik Code plate, and text Send affordance all specced to production fidelity.
Screens documented
- Username-first conversation list
- Chat thread with blue and gray bubbles
- S D R single-letter receipts
- Bot row with rounded-square avatar and BOT tag
- Kik Code scannable plate
- Neutral near-black 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 Kik blueprint translates cleanly into an Expo Router app structure.