The Hinge iOS app, dissected. White canvas. One calm violet. Profiles you scroll, not swipe. Every card has a heart, every prompt has a reply.
Every Hinge screen earns its position on an iPhone through the same rules — white canvas, slow scroll, prompt-cards stacked vertically, and a single accent purple that means "this is the one button worth pressing."
One profile at a time — full-bleed photos and prompt cards alternate down a single scrollable feed. Each card has its own #5D3F92 heart. You're not swiping; you're reading.
2-column grid of inbound likes. Hearts tab default; Roses tab for premium. Free tier blurs every other card behind a backdrop-filter of 8px — the paywall is honest about itself.
A daily-refresh tray of the day's best prompts, paired with a gold Rose CTA — the one currency that costs something. Plus a "We Met" follow-up loop.
Tap the floating violet heart on any prompt card and a sheet pops up with a single text input — your reply attaches to that prompt, not the profile. This is the entire conversational engine of the app.
Send button is a #5D3F92 circle; idle hearts are outlined, active hearts fill.
sheet: detents [.medium]
radius: 14px
send: 26pt circle
haptic: light
One free Rose per week. Extra Roses cost money. Receiving one bumps you to the top of someone's Likes You queue and sends an explicit "this person stood out" signal — not a generic like.
Gold #CBA258 is the only warm color in the app — reserved entirely for the Rose system. Never used for active states, never used for CTAs.
rose: #CBA258
shadow: y6 b16
StoreKit: 1 / 3 / 12 / 50
Profiles can host one 30-second voice answer to a Hinge prompt. The waveform renders pre-baked from AVAudioSession amplitude samples; tap to play, scrub to seek. AirPods routing is automatic.
Wave bars use the accent at opacity:.85, gaining 100% opacity as the playhead crosses each bar — visual scrubber and waveform in one element.
max: 30s
bars: 48
AVAudioSession: .playback
Every token Hinge's iOS app reaches for — surface ladder, type ramp, radius scale, components. Quiet by design; loud only at the points of decision.
White is the canvas. Black is the type. Violet is the only thing asking for your attention — and it asks softly. Gold appears only on Roses; never anywhere else.
Hinge Drive in production — Cormorant Garamond stands in for the display serif, Inter for sans. Prompt answers always use the serif. UI labels stay sans. The mix is the brand.
| Token | Sample | Size | Weight | Tracking |
|---|---|---|---|---|
| --display-serif | Discover | 32 / 2.00rem | 500 | -0.5px |
| --name-overlay | Elena, 28 | 22 / 1.38rem | 500 | -0.3px |
| --prompt-answer | Olive oil counts as a personality trait. | 18 / 1.13rem | 500 | normal |
| --prompt-question | My simple pleasures | 11 / 0.69rem | 600 | 0.2px |
| --body | Liked your prompt | 15 / 0.94rem | 400 | normal |
| --button-pill | Send a Like | 14 / 0.88rem | 600 | normal |
| --tab-active | Discover | 9 / 0.56rem | 500 | normal |
| --meta-time | 14h until refresh | 11 / 0.69rem | 500 (tnum) | normal |
| --badge-rose | Sent a Rose | 10.5 / 0.66rem | 600 | 0.3px |
Soft, not severe. Photos and cards live at 12–14px; pills are full-radius; tab icons stay open. There is no sharp corner in Hinge.
The constants that anchor the iOS implementation across iPhone 12 mini through iPhone 16 Pro Max.
Hearts, pills, and inset cards — every Hinge interaction lives inside one of these three shapes.