Tinder DESIGN.md

1. Visual Theme & Atmosphere

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

2. Color Palette & Roles

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.

3. Typography Rules

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 Display weight 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

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

4. Component Stylings

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: #FFFFFF with 2pt colored stroke ring matching action
• Shadow: rgba(0,0,0,0.1) 0 2px 8px
• Glyph: 24pt colored SF Symbol centered
  • Rewind: arrow.counterclockwise in #FFBD3B gold
  • Nope: xmark in #FF4458 red
  • Super Like: star.fill in #5D8DF1 blue
  • Like: heart.fill in #00D68F green
  • Boost: bolt.fill in #A952FF purple
• 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, #737373 default / #FD267A on 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 #FFFFFF dashes 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.fill next 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 info glyph 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 xmark glyph

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 #00D68F online-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: #FFFFFF with 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: #9E9E9E outline 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)

• Height: 44pt
• Background: #F5F5F5, corner radius 22pt (pill)
• Leading: GIF picker icon 22pt
• Placeholder: "Say something...", Tinder Sans 15pt w400 #9E9E9E
• Trailing: when text entered, send button appears as 36pt pink→orange gradient circle with arrow.up white inside

Distinctive Components

Swipe Stamps

• During a swipe gesture, an overlay "stamp" appears at the top of the card, rotated 15°, with opacity tied to swipe progress
• LIKE: green #00D68F, Tinder Sans 36pt w800 italic, 4pt border, rotated -15° (right side of card)
• NOPE: red #FF4458, Tinder Sans 36pt w800 italic, 4pt border, rotated 15° (left side of card)
• SUPER LIKE: blue #5D8DF1, Tinder Sans 32pt w800 italic, 4pt border, centered top, paired with a blue star burst animation
• Opacity: 0 → 1 as swipe distance reaches 40% of threshold; snaps to full opacity past 60%

Photo Paginator (Top of Card)

• Thin #FFFFFF line at top of card, divided into N equal segments (one per photo)
• Inactive segment: rgba(255,255,255,0.4) filled
• Active segment: rgba(255,255,255,1.0) filled
• Segment height: 3pt; gap between: 3pt
• Padding: 8pt from top, 16pt left/right

New Match Glow

• On the conversation list, an unread new match gets a pulsing #00D68F green ring around the avatar
• Ring: 2pt stroke expanding 1.0 → 1.2 scale over 1.5s, opacity 1.0 → 0.0, infinite loop

Boost Activated Chip

• Top-right corner pill when Boost is active
• Background: purple→pink gradient #A952FF → #FD267A
• Text: white, Tinder Sans 12pt w700 "⚡ Boost Active · 25m"
• Corner radius: 16pt
• Countdown updates live

Tinder Gold / Platinum Hero

• Full-screen modal with gold gradient background #FFBD3B → #FF6036
• Hero flame logo (oversized, 120pt) centered
• Feature list with checkmarks in gold
• Sticky CTA at bottom: "Continue" pill with brand gradient

Top Picks Card (Curated Daily)

• Same 3:4 card but with gold glow around the border
• "Top Pick" badge top-left corner: gold #FFBD3B pill with black text
• Limited to premium users

5. Layout Principles

Spacing System

• Base unit: 4pt
• Scale: 4, 8, 12, 16, 20, 24, 32, 40, 48
• Standard margin: 16pt horizontal
• Card stack: centered in viewport, 16pt margins from edges, 24pt above action buttons
• Action buttons: centered row, 12pt gap between, 32pt below card

Grid & Container

• Swipe stage: single card centered, subsequent cards peek behind (slight scale offset, 0.95)
• Profile detail sheet: single column, 16pt horizontal padding, sections with 24pt gaps
• Chat: full-width messages, 16pt horizontal padding, bubbles max 75%

Whitespace Philosophy

• The card breathes: 16pt margins on sides, 20pt above (below nav), 32pt below (above action buttons)
• Action buttons have room: 32pt of canvas around them — they're meant to look iconic, like a remote control
• Match screen is all space: gradient fills everything, photos and text centered with generous negative space
• Chat is dense but cozy: bubbles pack tight but have 12pt gaps between messages

Border Radius Scale

• Square (0pt): Rare, only for sharp pattern tiles
• Subtle (4pt): Photo pagination segments
• Standard (12pt): Inner cards, small buttons
• Card (16pt): Swipe card, bottom sheet
• Comfortable (20pt): Chat bubbles, modal sheets
• Pill (22-32pt): Secondary buttons, search inputs
• Full Pill (500pt): Primary CTAs, message input
• Circle (50%): Action buttons, profile photos, tab icons, send button

6. Depth & Elevation

Shadow Philosophy: The swipe card floats — it's the object of desire, and the 15% black shadow at 16pt blur is what sells the "you can pick it up" feeling. Action buttons get a lighter 10% shadow to sit as a second layer below the card. Primary CTAs get a colored shadow (pink glow) instead of a black shadow, because the gradient is the identity and a black shadow would dull it. The match screen abandons shadows entirely — the gradient is the whole event.

Motion

• Swipe drag: card follows finger 1:1 with slight rotation based on horizontal velocity (-15° to 15°)
• Swipe threshold: at 40% horizontal displacement, stamp overlay fades in; at 100% it locks and the card animates off-screen at 600pt/s
• Swipe snap-back: if threshold not reached, spring back with damping 0.7 over 400ms, light haptic
• Like / Nope commit: card flies off-screen 400ms ease-out, next card scales from 0.95 to 1.0 over 250ms, medium haptic at commit
• Super Like swipe up: blue star burst particle animation (300ms), success haptic, card flies up off-screen
• Match reveal: full-screen gradient fade-in 300ms, confetti particle animation over 800ms, success + medium haptic combo
• Action button press: scale 0.92 spring damping 0.5, glyph fills the ring briefly (150ms), medium haptic
• Photo paginator tap: 120ms cross-fade between photos, no haptic (lightweight)
• New match glow: infinite 1.5s ease-in-out green ring pulse on avatar
• Boost activation: purple→pink gradient sweep across the card stack (500ms), strong haptic

7. 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 → #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)
• 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 #424242 for 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 — #424242 is 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

8. Responsive Behavior

Device Sizes

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

9. Agent Prompt Guide

Quick Color Reference

• Canvas (light): #FFFFFF
• Canvas (dark): #121212
• Surface muted: #F5F5F5
• Text primary: #424242
• Text secondary: #737373
• Tinder Pink (Like): #FD267A
• Tinder Orange: #FF6036
• Nope Red: #FF4458
• Super Like Blue: #5D8DF1
• Boost Purple: #A952FF
• Rewind Gold: #FFBD3B
• Like Stamp Green: #00D68F
• Verified Blue: #29B0FF
• Brand Gradient: linear-gradient(90deg, #FD267A 0%, #FF6036 100%)

Example Component Prompts

• "Create a SwiftUI Tinder swipe card: 3:4 aspect ratio, full-bleed photo, 16pt corner radius, shadow rgba(0,0,0,0.15) 0 4px 16px. Bottom 30% vertical gradient rgba(0,0,0,0.0) → rgba(0,0,0,0.7) for legibility. Name 'Jamie' in Tinder Sans 28pt w700 white + comma + age '27' in Tinder Sans 24pt w400 white. Meta row '2 miles away · Software Engineer' in Tinder Sans 14pt w400 rgba(255,255,255,0.9). Photo paginator at top: thin 3pt white segments with 3pt gaps. Bottom-right ⓘ info button (32pt white circle with info glyph in #424242). Drag gesture with -15° to 15° rotation based on horizontal velocity."
• "Build the 5 action buttons row below the swipe card: centered horizontal row with 12pt gaps, 32pt below the card. [Rewind 48pt gold arrow.counterclockwise] [Nope 56pt red xmark] [Super Like 40pt blue star.fill] [Like 56pt green heart.fill] [Boost 48pt purple bolt.fill]. Each button: white background, 2pt colored stroke ring, 24pt colored SF Symbol centered, shadow rgba(0,0,0,0.1) 0 2px 8px. Pressed: scale 0.92 spring with medium haptic, glyph fills the ring briefly."
• "Design the LIKE swipe stamp: green #00D68F Tinder Sans 36pt w800 italic, 4pt border in the same green, rotated -15°. Appears top-right of the card as the user drags right, opacity 0 → 1 tied to swipe distance (40% → 100% of threshold). Paired with a medium haptic at commit."
• "Create the Match screen: full-screen linear gradient #FD267A → #FF6036 horizontal. Top: 'It's a Match!' in Tinder Sans Display 48pt w800 italic white. Subtitle 'You and Sarah liked each other' in Tinder Sans 16pt w400 white 80%. Two 120pt circular profile photos side-by-side with 20pt gap. Bottom: 'Send Message' pill button (white background with gradient text) and 'Keep Playing' outline pill button (2pt white border, white text). Confetti particle burst on entry."
• "Build the primary brand CTA: 52pt tall pill button with horizontal linear gradient background #FD267A → #FF6036. Text 'Get Tinder Gold' in Tinder Sans 16pt w700 white with 0.2pt tracking, 14pt vertical / 32pt horizontal padding. Full-pill 32pt corner radius. Shadow rgba(253,38,122,0.3) 0 4px 16px (branded pink glow, not black). Pressed: scale 0.97, gradient darkens 10%, medium haptic."
• "Design the bottom tab bar: 64pt + safe area, #FFFFFF background with 0.5pt top border #E5E5E5. 4 icon-only tabs (no labels): Flame (swipe), Star (Top Picks), Chat bubble, Profile. Icons 28pt. Active icon filled with horizontal pink→orange gradient #FD267A → #FF6036; inactive icon outline in #9E9E9E."

Iteration Guide

1. The swipe card is the product — 3:4 aspect, 16pt margins, 16pt radius, black shadow for lift
2. Brand gradient (#FD267A → #FF6036) appears only on Match screens and premium CTAs — reserve it
3. Five action buttons = five colors = five verbs: Rewind gold, Nope red, Super Like blue, Like green, Boost purple
4. LIKE / NOPE / SUPER LIKE stamps are rotated 15° italic display type with colored borders — always
5. "Name, 27" formula: name 28pt w700 + age 24pt w400 with a comma between
6. Tab bar is icon-only — no labels, 28pt icons, active tint is the brand gradient
7. Pure black is not on-brand — use #424242 for body text in light mode
8. Haptics are the soul of the gesture: medium on swipe commit, success on match, strong on Boost
9. Match screen is a full-screen celebration — gradient fills everything, confetti particles burst on entry