iOS Design Spec

# The app designed to be deleted.

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.

View Design Tokens Explore Surfaces
9:41
Likes You
24 new
Hearts
Roses
Liked your prompt"morning coffee, no agenda"
Subscribe to see
Liked your photo
Subscribe to see
Liked youwith a comment
Subscribe to see
Discover
Standouts
Likes
Chats
Likes You
9:41
Discover
Elena
28
My simple pleasures
Morning coffee with no agenda, the dog asleep on my feet.
A shower thought I recently had
Olive oil counts as a personality trait.
Discover
Standouts
Likes
Chats
Discover · One Profile
9:41
Standouts
Today's curated picks · resets in 14h
Mara · 29
I'll know I've made it when
My bookshelf collapses.
Caleb · 31
My most controversial opinion
Almonds taste like cardboard.
We Met
Did your date with Alex go well?
Two taps · Yes / Not really.
Discover
Standouts
Likes
Chats
Standouts
iOS Surface Anatomy

## Three surfaces. One calm violet.

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."

### Discover

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.

### Likes You

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.

### Standouts

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.

Comment-on-Prompt

### Reply to a specific thing, not a whole person.

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`
My simple pleasures
Morning coffee with no agenda.
Same. Best part of waking up.
Send a Rose
3× more likely to start a conversation
Rose Economy

### The premium currency that actually means something.

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`
Voice Prompts

### Hear the laugh before you decide.

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`
A voice answer to
"The way to win me over is…"
0:08 / 0:28
Design System Reference

## The whole vocabulary, in one place.

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.

View Source ↗

### Color

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.

Primary Brand
Hinge Violet
#5D3F92
Violet Soft
#7B5FB1
Violet Tint
#F1ECF7
Canvas
#FFFFFF
Ink
#000000
Text
Primary
#000000
Body
#3a3a3a
Muted
#7B7B7B
Dim
#A6A6A6
On-Violet
#FFFFFF
Surface & Border
Surface
#FAFAFA
Surface 2
#F5F3F8
Border
#EFEFEF
Border Strong
#E0E0E0
Border Soft
#F4F4F4
Semantic
Rose Gold
#CBA258
Negative
#C04545
Confirm
#3A7D5F
Active Gradient
violet ramp
Rose Gradient
gold ramp

### Typography

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

### Radius

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.

Hairline
2px
Chip
4px
Input
8px
Photo
12px
Card
14px
Sheet
24px
Pill
∞
Heart
50%

### iOS Spec Strip

The constants that anchor the iOS implementation across iPhone 12 mini through iPhone 16 Pro Max.

Tab bar height
83pt
4-tab arrangement: Discover, Standouts, Likes, Chats.
Heart FAB
32pt
Outlined idle, filled active. One per prompt card.
Profile scroll
vertical
No swipe deck. One profile, top-to-bottom.
Photo radius
12pt
Card radius 14pt. Standouts hero 14pt.
Likes blur
8px
backdrop-filter on every other card for free tier.
Side padding
14pt
Photos full bleed; prompt cards inset 14pt.
Rose price
1 / wk
Free tier. Packs 3 / 12 / 50 via StoreKit.
Animation curve
easeOut
.30s for prompt-comment sheet present.

### Components

Hearts, pills, and inset cards — every Hinge interaction lives inside one of these three shapes.

##### Buttons

Send a Like Skip Edit Profile Subscribe

##### Inputs

Sent a Rose Prompt Active today

##### Prompt Card

My simple pleasures
Morning coffee with no agenda.
A standout pick
I'll know I've made it when…
View source ↗