iOS Design Spec

# One gesture. Two outcomes.
One gradient tying it together.

The Tinder iOS app, dissected. A swipe deck above five colorful action buttons. Pink-to-orange gradient as the brand spine — applied to flame, CTAs, match modals, and nothing else.

View Design Tokens Explore Surfaces
9:41
Matches
Matches (24)
Messages
128 Likes
See who likes you with Gold
UPGRADE
New Matches
Marie
Akira
Sofia
Inês
Joana
Marie
Just sent you a song 🎶
10:42
Akira
Coffee tomorrow then? ☕
9:18
Sofia
Haha that's exactly my vibe
Yesterday
Matches
9:41
✓ Verified
Marie 26
12 km away
📸 Photography ☕ Coffee 🌅 Sunsets
Swipe deck
9:41
Jiang 31
💼 Designer · 📍 Lisbon
Profile completion · 78%
Get Tinder Gold™
See who Likes you · 5 Super Likes/week
TRY
About me
📐 Designer 🏠 Lisbon 🌐 EN · PT · 中文
Interests
📸 Photography ☕ Coffee 🎬 Cinema 🍷 Wine
Profile
iOS Surface Anatomy

## Three surfaces. Five colorful buttons. One gradient that signs everything.

Tinder's app is built around a single gesture — the swipe — and a row of five color-coded action buttons that turn the gesture into a vocabulary. The pink-to-orange brand gradient appears only where it earns its place: flame, primary CTAs, match celebrations.

### Swipe deck

Full-screen card (5:7 aspect) with bottom gradient fade → name + age + distance overlay. Five circular action buttons below — gold rewind, red nope, blue super-like, green like, purple boost. Card behind peeks at 94% scale.

### Matches

New Matches horizontal row with 60×80 cards + pink-dot "new" indicator. Likes-You card uses the brand gradient — the only chromatic real estate on the screen. Messages list below with circular pink-ringed avatars.

### Profile

Hero photo with name+age overlay bottom-left, edit pencil bottom-right. Profile completion meter. Gold gradient upsell card. Pill-based interest tags — outlined white, no fills.

Swipe gesture overlays

### Three intents, three colored stamps.

Drag the card horizontally and a colored stamp fades in over the photo — red NOPE at 18° clockwise, green LIKE at -18°, blue SUPER LIKE straight (drag up). The stamp's opacity tracks the drag distance: 0% at rest, 100% at the commit threshold.

Release before the threshold and the card springs back. Cross it and the card flies off-screen in the gesture direction, the next card snaps into place behind.

`nope rotation: +18°` `like rotation: -18°` `super: straight up` `threshold: 100pt`
Nope
drag left
Super
drag up
Like
drag right
It's a Match!
Marie likes you too · Lisbon, Portugal
Say something nice…
Send Message
It's a Match modal

### Two photos overlapping, one big italic verdict.

When both users have liked each other, Tinder slides up a full-screen modal: brand-gradient background, italicized "It's a Match!" wordmark in 30pt 900-weight, two card thumbnails tilted -12° and +12° toward each other, and a single CTA — Send Message.

"Keep swiping" exits without messaging. The modal honors iOS Reduce Motion (no card-tilt animation if disabled). Confetti is system-rendered.

`bg: gradient(135°)` `radius: 16px` `title: italic 30/900` `haptic: success`
Gold / Platinum gate

### A second gradient. Used sparingly. Always premium.

Tinder reserves a second gradient — gold (`#FFD86F → #E89B00`) — for paid tier upsells. It appears in the Likes-You unblur, the Gold upgrade card on Profile, and the trophy tab icon. Never anywhere else.

The contrast pairs gold-on-black for primary CTAs ("TRY"), and italicized 900-weight "Tinder Gold™" wordmark across all subscription surfaces.

`gradient: gold 135°` `CTA: black on gold` `ink: black (#000)` `cap: ™ italic`

#### Tinder Gold™

See who Likes you
Unlimited Likes
5 Super Likes per week
1 Boost per month
Continue — €19.99/mo
Design System Reference

## One brand gradient. Five action colors. One gold tier.

Every token Tinder's iOS app reaches for — surface ladder, type ramp, radius scale, components. The brand gradient is the only place pink and orange ever live; the action buttons each get a single hue; gold means "premium."

View Source ↗

### Color

Pink-to-orange brand gradient. Five color-coded action buttons (gold/red/blue/green/purple). Gold gradient for paid tiers. Everything else is grayscale — the photography brings every other color in.

Brand Gradient
Pink Start
#FE3C72
Orange End
#FF655B
Gradient
135deg
Negative
#FF4458
Confirm
#42D886
Action Buttons
Rewind
#FFC629
Nope
#FF4458
Super Like
#1B82FF
Like
#42D886
Boost
#9C27FF
Gold / Platinum
Gold Light
#FFD86F
Gold
#FFC629
Gold Deep
#E89B00
Platinum
#A57DF1
Gold Gradient
135deg
Surface & Ink
Canvas
#ffffff
Soft
#fafafa
Surface
#f5f5f5
Ink
#000000
Muted
#999999

### Typography

Proxima Nova (substituted with Inter). Heavy, opinionated weights. Italics signal premium ("Tinder Gold™", "It's a Match!"). Numbers tabular in distances and ages.

Token | Sample | Size | Weight | Tracking
--- | --- | --- | --- | ---
--match-title | It's a Match! | 30 / 1.88rem | 900 italic | -1px
--name-overlay | Marie 26 | 24 / 1.5rem | 800 | -0.4px
--screen-title | Matches | 22 / 1.38rem | 800 | normal
--gold-wordmark | Tinder Gold™ | 18 / 1.13rem | 900 italic | normal
--body | 12 km away | 15 / 0.94rem | 500 | normal
--cta | Get Premium | 14 / 0.88rem | 800 | 0.6px
--match-row | Marie | 13 / 0.81rem | 700 | normal
--preview | Just sent you a song 🎶 | 12 / 0.75rem | 400 | normal
--tag | 📸 Photography | 11 / 0.69rem | 600 | normal

### Radius

Pill-and-circle for actions. Cards at 12-14px. Photo cards on the swipe deck and profile hero both share 14px — Tinder's signature card-corner.

Min
2px
Tile
6px
Mini-card
8px
Card
12px
Photo
14px
Modal
16px
Pill / CTA
9999px
Action
50%

### iOS Spec Strip

The constants that anchor the iOS implementation.

Profile card
5:7
Aspect ratio. Always 14pt radius, always 12pt photo dots top.
Nope / Like btn
50pt
Outer circle. Rewind/Super/Boost drop to 38-42pt.
Swipe threshold
100pt
Drag distance before commit. Card springs back below this.
Card rotation
±18°
At max drag. Nope tilts CW; Like tilts CCW.
Match modal
spring
0.5 response, 0.55 damping. Confetti via SwiftUI symbols.
Gold gradient
135°
Same angle as brand gradient. Stops at #FFD86F → #E89B00.
Distance precision
km
Rounded to nearest km. <2km shows "Just now near you".
Haptics
3 levels
selection on drag · light on commit · success on match.

### Components

A vocabulary built for one-handed thumb use — every action within thumb arc, every button colored distinctly so muscle memory wins.

##### Buttons

Create Account Get Gold™ Continue Skip

##### Inputs

Verified Super Like Gold

##### Cards

Marie 26
12 km away
View source ↗