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.
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.
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.
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.
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.
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
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
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
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."
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.
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 |
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.
The constants that anchor the iOS implementation.
A vocabulary built for one-handed thumb use — every action within thumb arc, every button colored distinctly so muscle memory wins.