A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
24tokens
10type steps
5radius steps
8pxspacing base
Tinder, in one page
Tinder's iOS app is built around a single, unforgettable gesture: the swipe. Every primary screen is really just a stage for the swipeable card — a 3:4 portrait photo that takes up roughly 80% of the viewport, adorned with a name, age, and a trio of subtle overlays, floating on a clean canvas. The visual language is pure gravity: the card is the object, the five action buttons below it are the verbs, and everything else is chrome that steps aside. This is the rare app where the UI doesn't frame the content — the content *is* the UI, and every design decision is in service of the swipe feeling fast, tactile, and slightly dangerous.
The accent is a horizontal gradient from Tinder Pink (#FD267A) to Tinder Orange (#FF6036) — the exact gradient of the famous flame logo. This gradient shows up exactly three places: on the "Match" screen (the entire background goes gradient when two users match), on the primary "subscribe" CTA for Tinder Gold/Platinum, and in micro-moments like the flame icon in the tab bar and the heart stamp overlay on a right-swipe. Beyond the gradient, the app is ruthlessly disciplined: Pink (#FD267A) alone marks the "Like" action, Blue (#5D8DF1) marks "Super Like", Purple (#A952FF) marks "Boost", Gold (#FFBD3B) marks "Rewind", and Green marks new-match glow states. These five colors are the verbs, and the app never uses them decoratively. The canvas itself is stark white (#FFFFFF) in light mode, #121212 in dark — letting the photos do all the work.
Typography is Tinder Sans (proprietary, 2021) — a humanist sans with slightly condensed proportions, optimized for readability at card-overlay sizes. Before 2021, Tinder used Proxima Nova, and many legacy surfaces still reflect that family's geometry. The hierarchy on the swipe card itself is intentionally minimal: the person's name is 28pt weight 700 in white, with a comma and a lighter 24pt weight 400 age right after ("Jamie, 27"). Below that, a single line of metadata (location, distance, occupation) at 14pt weight 400 with 70% white opacity. The "It's a Match!" screen uses an entirely different type register — 48pt script-feeling display text that feels celebratory, because the whole point of the app is getting here.
Key Characteristics:
- Swipe cards — 3:4 profile photos full-bleed, name + age overlaid bottom-left, info "ⓘ" button bottom-right
- Pink-to-orange brand gradient (
#FD267A → #FF6036) for Match screens and premium upsells - Stamp overlays during swipe: "LIKE" (green rotated), "NOPE" (red rotated), "SUPER LIKE" (blue rotated)
- Five action buttons below the card: Rewind (gold) | Nope (red X) | Super Like (blue star) | Like (green heart) | Boost (purple lightning)
- Tinder Sans font (2021+), Proxima Nova legacy fallback
- Circular action buttons with colored SF Symbols — the only place color appears in chrome
- Match screen: full pink→orange gradient, "It's a Match!" in script display type, both profiles side-by-side
- Chat bubbles: white sender / pink gradient receiver (matched user) — the visual "this is your match" continues
- Tab bar: Flame (swipe) | Star (top picks) | Chat bubble | Profile — icons only, no labels, spartan
- Haptics on swipe threshold, match reveal, and super-like — the gesture *feels* like a slot machine
Do's and don'ts
Do
- Center the swipe card in the viewport with 16pt margins and 32pt of breathing room below it
- Use the brand gradient
#FD267A → #FF6036on Match screens and premium CTAs — never elsewhere - Assign one color per action: Gold (Rewind), Red (Nope), Blue (Super Like), Green (Like), Purple (Boost)
- Render LIKE / NOPE / SUPER LIKE stamps rotated 15° with 4pt colored borders in italic display type
- Show the photo paginator at the top of the card as thin white segments
- Use "Name, age" formula (28pt w700 + 24pt w400 after comma)
- Trigger medium haptic on swipe commit and action button tap; success haptic on match
- Keep the tab bar icon-only (Flame / Star / Chat / Profile) — no labels
- Use the softer
#424242for body text in light mode (not pure black) - On match, let the entire screen go pink→orange gradient — it should feel like a celebration
Don't
- Don't change the swipe card aspect ratio — 3:4 portrait is load-bearing to the gesture
- Don't add text labels to the tab bar — icons only
- Don't use the brand gradient on every button — reserved for Match screens and premium
- Don't swap the action button colors — the 5-verb color system is the UI language
- Don't use pure black (
#000000) for body text —#424242is softer and on-brand - Don't straighten the LIKE / NOPE stamps — they must be rotated
- Don't add decorative colors to chat bubbles beyond sender/receiver — the gradient is the sender identity
- Don't hide the flame logo in the top-left of the swipe screen — it's the visual anchor
- Don't animate swipe commits too slow — it must feel snappy (400ms max off-screen)
- Don't use underlines on links — color + weight signal interactivity
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Tinder design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Tinder Pink: #fd267a
- Tinder Orange: #ff6036
- Like Pink: #fd267a
- Like Stamp Green: #00d68f
- Nope Red: #ff4458
- Super Like Blue: #5d8df1
- Boost Purple: #a952ff
- Rewind Gold: #ffbd3b
- Canvas White: #ffffff
- Surface Muted: #f5f5f5
Type:
- families: Tinder Sans, Proxima Nova, Tinder Sans Display, Match Screen Display
- scale: 11, 13, 14, 15, 16, 20, 24, 28, 36
- weights: 400, 500, 700
Shape:
- radius: 16, 20, 22, 24, 32
- elevation: Shadow: `rgba(0,0,0,0.1) 0 2px 8px` | Shadow: `rgba(253,38,122,0.3) 0 4px 16px` | Shadow: `rgba(0,0,0,0.15) 0 4px 16px`
Spacing: 8, 10, 14
Rules:
- Center the swipe card in the viewport with 16pt margins and 32pt of breathing room below it
- Use the brand gradient `#FD267A → #FF6036` on Match screens and premium CTAs — never elsewhere
- Assign one color per action: Gold (Rewind), Red (Nope), Blue (Super Like), Green (Like), Purple (Boost)
- Render LIKE / NOPE / SUPER LIKE stamps rotated 15° with 4pt colored borders in italic display type
- Show the photo paginator at the top of the card as thin white segments
- Use "Name, age" formula (28pt w700 + 24pt w400 after comma)
Avoid:
- Don't change the swipe card aspect ratio — 3:4 portrait is load-bearing to the gesture
- Don't add text labels to the tab bar — icons only
- Don't use the brand gradient on every button — reserved for Match screens and premium
- Don't swap the action button colors — the 5-verb color system is the UI language
- Don't use pure black (`#000000`) for body text — `#424242` is softer and on-brand
- Don't straighten the LIKE / NOPE stamps — they must be rotated
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary (Brand Gradient)
- Tinder Pink (
#FD267A): Primary brand anchor, Like heart button, gradient start. - Tinder Orange (
#FF6036): Gradient terminus, flame logo secondary. - Brand Gradient: horizontal linear
#FD267A → #FF6036— used on Match screen, premium CTAs, and the flame logo itself.
Action Colors (The 5 Verbs)
- Like Pink (
#FD267A): Right-swipe action, heart button, "LIKE" stamp green? — NO, stamp is green for Like; the button glyph is pink. - Like Stamp Green (
#00D68F): The rotated "LIKE" stamp overlay on right-swipe; echoes "yes" / "match" semantics. - Nope Red (
#FF4458): X button background, "NOPE" stamp overlay, swipe-left haptic. - Super Like Blue (
#5D8DF1): Star button, "SUPER LIKE" stamp, swipe-up action, premium badge. - Boost Purple (
#A952FF): Lightning button (promote profile for 30 min), premium feature highlight. - Rewind Gold (
#FFBD3B): Clockwise-arrow button (undo last swipe), flame-gold moments.
Canvas & Text (Light Mode)
- Canvas White (
#FFFFFF): Primary background. - Surface Muted (
#F5F5F5): Card backgrounds in profile view, chat background. - Surface Tint (
#FAFAFA): Sectional fills, table row background. - Divider (
#E5E5E5): Hairline dividers. - Text Primary (
#424242): Primary body text (note: Tinder uses a softer dark gray, not pure black). - Text Secondary (
#737373): Metadata, timestamps, helper text. - Text Tertiary (
#9E9E9E): Disabled state, placeholder.
Dark Mode
- Dark Canvas (
#121212): Primary dark canvas. - Dark Surface 1 (
#1D1D1D): Card background on dark. - Dark Surface 2 (
#2A2A2A): Elevated surfaces on dark. - Dark Divider (
#3A3A3A). - Dark Text Primary (
#FFFFFF). - Dark Text Secondary (
#B8B8B8).
Semantic
- Match Glow Green (
#00D68F): "New Match!" glow animation, unread-match badge dot. - Alert Red (
#FF4458): Error, form validation, destructive. - Online Dot Green (
#00D68F): "Recently active" dot in chat list. - Verified Blue (
#29B0FF): Blue-check verified profile badge.
Profile Card Overlay
- Card Gradient Bottom (
rgba(0,0,0,0.0) → rgba(0,0,0,0.7)): Vertical gradient at bottom ~30% of card to ensure name/age/meta readability over any photo.
Type scaleRead the full spec
Font Family
- Primary (2021+):
Tinder Sans(proprietary, humanist sans) — used across profile cards, CTAs, body, UI - Legacy (pre-2021):
Proxima Nova(many older surfaces still reflect it) - Match Screen Display:
Tinder Sans Displayweight 800 italic, used only for "It's a Match!" and hero moments - Fallback Stack:
-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Proxima Nova', Helvetica, Arial, sans-serif - CJK / Non-Latin: Noto Sans family fallback
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Match Hero | Tinder Sans Display | 48pt | 800 italic | 1.1 | -0.5pt | "It's a Match!" on match screen |
| Screen Title | Tinder Sans | 28pt | 700 | 1.2 | -0.3pt | "Matches", "Messages" hero |
| Profile Name (Card) | Tinder Sans | 28pt | 700 | 1.15 | -0.3pt | Name on swipe card |
| Profile Age (inline) | Tinder Sans | 24pt | 400 | 1.15 | 0pt | Age follows name after comma |
| Section Header | Tinder Sans | 20pt | 700 | 1.2 | -0.2pt | "About me", "Photos" |
| Button (Primary) | Tinder Sans | 16pt | 700 | 1.0 | 0.2pt | "Get Tinder Gold", "Send Message" |
| Button (Secondary) | Tinder Sans | 15pt | 500 | 1.0 | 0pt | Text links, outline buttons |
| Body | Tinder Sans | 15pt | 400 | 1.45 | 0pt | Bio, "About me" paragraph |
| Card Meta | Tinder Sans | 14pt | 400 | 1.3 | 0pt | "2 miles away · Software Engineer" |
| Chat Message | Tinder Sans | 15pt | 400 | 1.35 | 0pt | Bubble text |
| Chat Timestamp | Tinder Sans | 11pt | 400 | 1.2 | 0pt | Below bubble, gray |
| Stamp (LIKE/NOPE) | Tinder Sans | 36pt | 800 italic | 1.0 | 2pt | Rotated swipe stamp overlay |
| Tab Label (none) | — | — | — | — | — | Tab bar is icon-only, no labels |
| Input Placeholder | Tinder Sans | 16pt | 400 | 1.0 | 0pt | Search input, message input |
| Notification | Tinder Sans | 13pt | 500 | 1.3 | 0pt | Toast, snackbar messages |
Principles
- Two type moments: Small UI is in Tinder Sans; the match screen breaks the rules with italic display type
- Weights concentrated at 400 / 500 / 700 / 800-italic: 800 italic exclusively for the match screen
- Name/age formula: "Jamie, 27" — name at 28pt w700, comma, age at 24pt w400, no other ornamentation
- Tight tracking on titles: -0.3pt on 20pt+
- Stamp type is rotated 15°: The "LIKE" / "NOPE" / "SUPER LIKE" swipe stamps sit at a slight rotation
- No italics in body: Italic is reserved for the match-hero moment
Components and layoutRead the full spec
Buttons
Five Action Buttons (Below Swipe Card)
- All are circular, ranging from 48pt (outer: Rewind, Boost) to 64pt (outer: Nope, Like) to 40pt (center: Super Like)
- Stacked horizontally:
[Rewind 48pt] [Nope 64pt] [Super Like 40pt] [Like 64pt] [Boost 48pt] - Wait — standard Tinder arrangement:
[Rewind 48] [Nope 56] [Super Like 40] [Like 56] [Boost 48] - Background:
#FFFFFFwith 2pt colored stroke ring matching action - Shadow:
rgba(0,0,0,0.1) 0 2px 8px - Glyph: 24pt colored SF Symbol centered
- Rewind:
arrow.counterclockwisein#FFBD3Bgold - Nope:
xmarkin#FF4458red - Super Like:
star.fillin#5D8DF1blue - Like:
heart.fillin#00D68Fgreen - Boost:
bolt.fillin#A952FFpurple - Pressed: scale 0.92 spring + medium haptic, glyph fills the ring entirely for a brief 150ms
Primary Pill CTA ("Get Tinder Gold", "Send Like")
- Background: pink→orange brand gradient
#FD267A → #FF6036 - Text:
#FFFFFF, Tinder Sans 16pt w700 with 0.2pt tracking - Padding: 14pt vertical, 32pt horizontal
- Corner radius: 32pt (full pill)
- Height: 52pt
- Pressed: scale 0.97 + gradient darkens 10%, medium haptic
- Shadow:
rgba(253,38,122,0.3) 0 4px 16px
Secondary Outline Button
- Background: transparent
- Border: 1.5pt
#424242(light mode) /#FFFFFF(dark mode) - Text:
#424242/#FFFFFF, Tinder Sans 15pt w500 - Height: 44pt, corner radius 22pt (pill)
- Pressed: border color darkens + light haptic
Icon Button (Chat Header)
- Size: 44pt
- Icon: 22pt,
#737373default /#FD267Aon interaction - Background: transparent
- Used for: back chevron, profile, menu
Cards & Containers
Swipe Card
- Width: full screen minus 16pt margins
- Aspect: 3:4 (e.g., 358×478pt on iPhone 15)
- Corner radius: 16pt
- Shadow:
rgba(0,0,0,0.15) 0 4px 16px - Content: full-bleed photo
- Photo pagination: tap left/right edge to go prev/next photo; thin
#FFFFFFdashes at top of card count photos, with a subtle white-filled active segment - Bottom gradient:
rgba(0,0,0,0.0) → rgba(0,0,0,0.7)over bottom 30% for text legibility - Name + age row: name 28pt w700 white + ", age 24pt w400 white" (inline)
- Verified badge: 18pt blue
checkmark.seal.fillnext to name if verified - Meta row: "2 miles away · Software Engineer" in Tinder Sans 14pt w400
rgba(255,255,255,0.9) - Info button (ⓘ): bottom-right corner, 32pt white circle with
infoglyph in#424242
Profile Card (Expanded Detail)
- Appears when user taps ⓘ or scrolls up on a card
- Full-screen sheet with same photo carousel at top
- Below: bio text, prompts (e.g., "My ideal Saturday: 🌅"), Instagram/Spotify sections
- Corner radius: 24pt on the sheet
- Close button: top-right, 32pt white circle with
xmarkglyph
Match Screen
- Full-screen takeover with pink→orange gradient background
#FD267A → #FF6036 - Top: "It's a Match!" in Tinder Sans Display 48pt w800 italic white
- Subtitle: "You and [Name] liked each other" in Tinder Sans 16pt w400 white 80%
- Two circular profile photos (120pt each) side-by-side, with 20pt gap
- CTA row below: "Send Message" pill (white bg, gradient text) | "Keep Playing" outline (white border, white text)
- Celebratory confetti-like particle animation on entry (300ms)
- Success haptic + optional sound
Chat Bubble
- Incoming (from matched user): background pink→orange gradient (or solid
#FD267A), text white, 20pt radius (more bubbly on sender-side corner) - Outgoing (yours): background
#F5F5F5, text#424242, 20pt radius with squared corner bottom-right - Max width: 75% of screen
- Padding: 10pt vertical, 14pt horizontal
- Timestamp below: 11pt w400
#9E9E9E - GIF / Sticker messages: no bubble, just the media with rounded corners
- Long-press: shows reactions (6 emoji row)
Conversation List Row
- Height: 72pt
- Leading: 56pt circular profile photo with optional
#00D68Fonline-dot overlay (12pt circle, 2pt white ring) - Title: Tinder Sans 16pt w700
#424242(name) - Snippet: Tinder Sans 14pt w400
#737373, 1-line clamp - Trailing: timestamp Tinder Sans 12pt w400
#9E9E9E+ optional unread dot (10pt pink circle) - Pressed:
#FAFAFA
Navigation
Top Nav (Swipe Screen)
- Height: 56pt + safe area
- Background:
#FFFFFF(light) /#121212(dark), transparent when swipe card is scrolled - Leading: 32pt flame logo (pink→orange gradient filled)
- Trailing: 32pt settings gear
#424242, then 32pt boost lightning#A952FF(premium chip) - No title text — logo is the anchor
Bottom Tab Bar
- Height: 64pt + safe area (taller than typical because icons are larger)
- Background:
#FFFFFFwith 0.5pt top border#E5E5E5 - Tabs: Flame (swipe) | Star (Top Picks / Likes You) | Chat bubble | Profile
- Icons: 28pt (bigger than typical, no labels)
- Active: pink→orange gradient filled icon
- Inactive:
#9E9E9Eoutline icon - No labels — icon-only tab bar
Input Fields
Search Input (Conversations)
- Background:
#F5F5F5 - Height: 40pt
- Leading: 16pt
magnifyingglass#737373 - Placeholder: "Search matches", Tinder Sans 16pt w400
#9E9E9E - Corner radius: 20pt (pill)
- Focus: no border change
Message Input (Chat)
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Card height reduces by 60pt, action buttons shrink proportionally |
| iPhone 13/14/15 | 390pt | Standard 358×478pt card |
| iPhone 15/16 Pro | 393pt | Dynamic Island pushes nav 8pt lower, card unchanged |
| iPhone 15/16 Pro Max | 430pt | Card scales to 398×530pt, profile detail gets more breathing room |
| iPad | 768pt+ | Card caps at 420pt wide, centered with generous whitespace around |
Dynamic Type
- Profile name/age, body, meta: full scale
- Match hero "It's a Match!": scales to 56pt max then truncates
- Stamp type (LIKE/NOPE): fixed 36pt (layout-sensitive rotation)
- Tab icons: fixed 28pt (visual consistency)
- Chat messages: full scale with max multiplier 1.4
Orientation
- Swipe / Chat / Profile: portrait-locked (the card gesture is designed for portrait)
- Match screen: portrait-locked
- No landscape support — the card is the product
Touch Targets
- Action buttons: 48-64pt (larger than typical because they're mission-critical)
- Swipe card: full-card drag area (300pt+ diagonal)
- Photo paginator tap zones: 50% of card width (left half = previous photo, right half = next)
- Chat send button: 36pt circle with 44pt effective hit
- Tab icons: 28pt icon inside 44pt hit
Safe Area Handling
- Top: safe area honored on nav (except swipe screen extends under with transparent nav)
- Bottom: action buttons respect home indicator with 24pt padding above
- Sides: 16pt content insets everywhere
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-tinder {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #424242;
--heading-color: #424242;
--link-color: #d12c00;
--link-hover-color: #9e2100;
--border-color: #dddddd;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(66,66,66,0.06);
--card-hover-shadow: 0 6px 18px rgba(66,66,66,0.12);
--header-bg: #424242;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #707070;
--button-bg: #ff6036;
--button-text-color: #000000;
--button-hover-bg: #ff3803;
--button-border: none;
--button-border-radius: 22px;
--button-secondary-bg: #f4f4f4;
--button-secondary-text-color: #424242;
--button-secondary-hover-bg: #e8e8e8;
--button-secondary-border: 1px solid #dddddd;
--prompt-bg: #f6f6f6;
--prompt-text-color: #424242;
--base-font: var(--font-helvetica);
--heading-font: var(--font-helvetica);
--card-border-radius: 22px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- plenty of fish 82.2%
- happn 79.1%
- lemon8 78.0%
- gyokusendo 76.5%
- paypal 75.4%
Where this came from
- Source document
ios/design-md/dating/tinder/DESIGN.md· 25.9 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.