Back to Gallery
Gallery · happn

happn

A design blueprint Spectr produced from happn. Scroll to look closer.

Dating and Social

The Crossings timeline, the pink Charm heart, location stamps, and the gold Crush

A pixel-faithful design token catalog reverse-engineered from happn iOS, built around the signature Crossings timeline: a connector-line feed of location and time-stamped cards with one-tap Charm hearts. Real brand palette with happn pink #FF4865 fading to magenta #E91E63, reserved Crush gold, and warm rounded Poppins type over a graphite canvas.

Everything you need to ship a happn-grade crossed-paths dating front end: exact hex values, the connector-spine timeline with pink crossing counts, the Charm and Crush gestures, teardrop map pins, FlashNote openers, and the gold Crush celebration. Comes with framework-neutral specs plus SwiftUI, Expo, and Jetpack Compose guides.

Screens documented

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 happn blueprint translates cleanly into an Expo Router app structure.