Plenty of Fish DESIGN.md

1. Visual Theme & Atmosphere

Plenty of Fish (POF) is one of the original mass-market dating apps, and its iOS design system reflects that heritage: approachable, high-density, and unmistakably blue. Where newer dating apps lean on swipe-deck spectacle, POF is grid-first and conversation-first — it shows you many people at once and pushes you toward messaging quickly. The atmosphere is friendly and busy rather than minimal: rounded cards, heavy rounded type, full-color profile photography edge-to-edge, and POF Blue (#0098DB → #00A6E2) as the single, dominant brand color on every primary action. The default app is light (#FFFFFF / #F4F5F7); this guide also specifies a cool near-black dark mode (#121417).

The signature surface — and the screen this guide treats as the hero — is the match grid: a 2-column scrolling grid of portrait profile cards. Each card is a full-bleed photo with a bottom gradient scrim carrying the person's name + age, distance and last-active ("Sofia, 27 · 3 mi · Active now"), an "Online" pill top-left (teal dot), and a circular blue like button bottom-right. Above the grid sits a logo + actions bar and a segmented strip (Matches / Meet Me / Search). The grid is paired with Meet Me — POF's lightweight yes/maybe/no game: one large profile card at a time with three round buttons (✕ no, ? maybe, ♥ yes), the yes button in POF Blue. Together the grid and Meet Me are the heart of POF's "see lots of people, decide fast, then chat" model.

Navigation is a 5-slot bottom tab bar — Matches, Meet Me, Search, Messages (with a pink unread badge), Me — with the active tab in POF Blue. Messaging is a first-class destination (POF historically lets you message before matching), so the Messages tab and its badge are prominent. The brand typeface direction is a rounded, friendly, heavy sans; this guide uses Nunito Sans (free, SIL OFL) — warm, rounded, with strong 800/900 weights for names and section titles, matching POF's approachable, unintimidating personality. Color discipline: POF Blue for brand + primary action, teal for online/presence, pink for unread/notification, gold for upgrade, and full-color photography for content; chrome stays neutral.

Key Characteristics:

• Light (#FFFFFF) default / cool near-black (#121417) dark — friendly and busy, never pure black
• POF Blue (#0098DB → #00A6E2) is the brand color — logo, primary CTA, active tab, the like button
• Match grid — 2-column scrolling grid of full-bleed portrait photo cards with gradient name/meta scrims
• Meet Me — one big profile card + three round actions (✕ no / ? maybe / ♥ yes), yes in POF Blue
• "Online" presence pill — teal dot (#00C9B7) + "Online", top-left of cards; first-class presence
• Messaging is a primary destination — Messages tab with a pink (#FF4F8B) unread badge
• 5-slot bottom tab bar — Matches / Meet Me / Search / Messages / Me, active in POF Blue
• Rounded everything — 16–20pt photo cards, 999pt pill buttons, circular action buttons
• Heavy rounded type (Nunito Sans) — 800/900 weights for names and titles; approachable, unintimidating
• Distance + last-active everywhere — "3 mi · Active now" is core profile metadata, not decoration
• Full-color photography edge-to-edge — content is loud; chrome is neutral and recedes

2. Color Palette & Roles

Primary (Interactive)

• POF Blue (#0098DB): The brand anchor — logo, primary CTA, active tab, the circular like button, links.
• POF Blue Light (#00A6E2): Gradient end (#0098DB → #00A6E2), highlights, selected states.
• POF Blue Gradient (#0098DB → #00A6E2, 135°): Primary buttons, the Meet Me "yes" button, key headers.
• POF Blue Pressed (#0079B0): Pressed state for blue buttons (apply via 0.93 brightness).

Canvas & Surfaces (Light Mode)

• Canvas White (#FFFFFF): Primary light background, cards, sheets.
• Background Grey (#F4F5F7): App background behind cards and grid.
• Surface Raised (#FFFFFF): Cards, Meet Me card, sheets (with soft shadow).
• Surface Pressed (#E9EBEF): Pressed rows / chips.
• Divider (#E4E6EA): Hairlines, segmented-strip underline track.

Canvas & Surfaces (Dark Mode)

• Dark Canvas (#121417): Primary dark background — cool near-black, NOT pure black.
• Dark Surface 1 (#1A1D21): Cards, Meet Me card, panels.
• Dark Surface 2 (#23272C): Search field, raised chips, hovered rows.
• Dark Divider (#2C3036): Hairlines and the tab-bar top border.

Text

• Text Primary Light (#16181C): Names, headlines, body on light.
• Text Secondary Light (#6B7079): Distance, last-active, captions, placeholder.
• Text Tertiary Light (#9BA1AB): Disabled, inactive tab labels.
• Text Primary Dark (#EDEFF2): Names, headlines, body on dark.
• Text Secondary Dark (#9BA1AB): Distance/meta on dark.
• Text Tertiary Dark (#6B7079): Disabled, inactive tab labels on dark.
• Text On Photo (#FFFFFF): Name/meta over a card's bottom gradient scrim (always white).

Accent / Status

Semantic

• Success Green (#20C997): Match-made confirmation, profile-saved toast.
• Error Red (#FF5267): Block/report confirmation, send-failure banner.
• Warning Gold (#FFB23E): Reuses Upgrade Gold for quota/limit warnings.
• Scrim Gradient (transparent → rgba(0,0,0,0.78)): Bottom-of-card overlay for name/meta legibility.
• Selection Tint (#0098DB1F): ~12% POF Blue overlay on a selected row/chip.

3. Typography Rules

Font Family

• Primary: POF's UI sans (a rounded, friendly, heavy grotesque). Free stand-in: Nunito Sans (by Vernon Adams / Jacques Le Bailly, SIL OFL) — warm, rounded, with strong 800/900 weights.
• Fallback Stack: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
• Weights used: 400 (body), 600 (meta emphasis), 700 (card names / labels), 800 (section titles / buttons), 900 (display).

Hierarchy

Principles

• Friendly and unintimidating: rounded heavy weights (800/900) make names and titles warm and confident, never corporate-thin — dating should feel inviting.
• Weight concentrated at 400 / 600 / 700 / 800 / 900: regular body, semibold meta, bold card names, extrabold titles/buttons, black display. No thin.
• White on photos, always: any text on a card photo is #FFFFFF over a bottom gradient scrim — never colored text on imagery.
• Names lead: the profile name+age is the loudest text on any card (700+) — people, not chrome, are the content.
• Dynamic Type first-class: display, titles, body, meta scale; card-scrim name/meta, tab labels, badges, status chips stay fixed (layout-sensitive over imagery).

4. Component Stylings

Buttons

Primary Button (Send Message / Continue)

• Shape: pill, 999pt corner radius
• Background: linear gradient #0098DB → #00A6E2 at 135°
• Text: #FFFFFF, Nunito Sans 16pt weight 800
• Padding: 14pt vertical, 28pt horizontal
• Pressed: brightness 0.93 + scale 0.98

Secondary Solid Button (Like)

• Background: solid #0098DB (POF Blue)
• Text: #FFFFFF, 15pt weight 800
• Padding: 12pt vertical, 22pt horizontal
• Corner radius: 999pt (pill)
• Pressed: background #0079B0

Outline Button (View Profile)

• Background: transparent
• Text: #0098DB, 15pt weight 700
• Border: 1.5pt #0098DB
• Corner radius: 999pt (pill)
• Padding: 11pt vertical, 20pt horizontal
• Pressed: background #0098DB14 (8% blue)

Upgrade Button (Upgrade / Get Premium)

• Background: #FFB23E (Upgrade Gold)
• Text: #2A1B05, 14pt weight 800
• Corner radius: 999pt (pill)
• Padding: 10pt vertical, 18pt horizontal
• Often paired with a small crown/diamond glyph

Text Button (Skip / Cancel)

• Font: Nunito Sans 15pt weight 700
• Color: #0098DB
• No background, no underline
• Pressed: opacity 0.6

Circular Action Buttons (Meet Me / card like)

• Like (♥, primary): 56pt circle, #0098DB fill, white heart, shadow rgba(0,152,219,0.5) 0 6px 16px
• Maybe (?): 56pt circle, surface fill, 1.5pt #FFB23E border, gold glyph
• No (✕): 56pt circle, surface fill, 1.5pt divider border, secondary glyph
• Grid-card like: 36pt circle, #0098DB, white heart, smaller shadow
• Press: scale 0.9 + light haptic; on "yes" a brief heart pop

Core Atoms

Profile Grid Card

• Aspect ratio 3:4, 16pt corner radius, full-bleed photo, no border
• Top-left "Online" pill (when present): rgba(0,0,0,0.42) bg, teal #00C9B7 7pt dot, white 12pt w700 "Online", 999pt radius
• Bottom gradient scrim transparent → rgba(0,0,0,0.78) carrying: name+age (white 15pt w700) and meta "3 mi · Active now" (white 12pt w600)
• Bottom-right 36pt circular blue like button
• Tap card → profile detail; tap heart → like (heart fills, light haptic)

Meet Me Card

• Surface card, 20pt corner radius, centered photo (1:1, 16pt radius), name+age (18pt w800), prompt "Would you like to meet {name}?" (13pt w700 secondary), then the three round buttons row
• Swipeable: drag left = no, right = yes, tap buttons equivalently

"Online" / Presence Pill

• Teal dot (#00C9B7) + label; on a card it's white text on a dark translucent pill; in a list it's teal text

Distance / Last-Active Meta

• "3 mi · Active now" — Nunito Sans 12–14pt w600 secondary; "Active now" may carry the teal dot

Search / Filter Field

• Height: 46pt, 12pt corner radius
• Background: #F4F5F7 / #23272C
• Leading magnifier 18pt #6B7079
• Placeholder 15pt #6B7079; focus: 1.5pt #0098DB border

Unread Badge

• Pink #FF4F8B pill, white 9pt w800 count, min 16pt, on the Messages tab and conversation rows

Avatar

• 48pt circle in lists/chat; photo or POF-blue placeholder with white initial

Navigation

Bottom Tab Bar

• Height: 70pt + safe area
• Background: #FFFFFF / #121417 at 94% + blur, 0.5pt top border #E4E6EA / #2C3036
• 5 slots: Matches, Meet Me, Search, Messages (pink badge), Me
• Icon size: 23pt; active icon+label #0098DB (active icon filled); inactive #9BA1AB
• Labels: Nunito Sans 10pt w800, always shown
• Messages tab shows a pink unread badge top-right when count > 0

Top Bar (Matches / grid)

• Leading: POF logo + "POF" wordmark (Nunito Sans 20pt w900)
• Trailing: filter and search glyphs in #0098DB, 22pt
• Below: segmented strip — Matches / Meet Me / Search — active item w800 primary with a 3pt POF-Blue underline; inactive w800 tertiary

Profile Detail

• Full-bleed photo carousel with page dots, name+age overlay, scrollable bio + interests + distance, sticky bottom bar with a gradient "Send Message" pill and a circular like

Input Fields

Text Field (search, edit profile)

• Height: 46pt, 12pt corner radius
• Background: #F4F5F7 / #23272C, no border at rest
• Focus: 1.5pt #0098DB border
• Placeholder #6B7079 15pt; text primary 16pt

Message Composer

• Rounded 999pt pill input, leading #23272C field, trailing circular #0098DB send button (white arrow) when text present
• Photo/GIF affordances inside the field at 22pt #6B7079

Distinctive Components

Match Grid (signature)

• The 2-column full-bleed photo grid with name/meta scrims and inline blue like buttons. POF's core "browse many at once" surface — content-dense, photo-forward.

Meet Me (signature)

• The yes/maybe/no card game. One big profile at a time; ✕ / ? / ♥ round buttons; ♥ in POF Blue with a glow and heart pop. The fastest decision loop in the app.

"Online" Presence System

• Teal-dot "Online" pill on cards + "Active now" meta — POF surfaces presence aggressively to drive timely conversations.

Messages-First Inbox

• A prominent Messages tab with pink unread badges; conversation rows show avatar, name, last message, time, and an online dot — messaging is a destination, not an afterthought.

Upgrade Surface

• Gold-accented sheets/cards ("Get Premium" / "See who likes you") with a gold CTA — the single place gold dominates.

Profile Detail Carousel

• Full-bleed swipeable photo carousel with page dots, overlaid name+age, then a scroll of bio/interest chips/distance and a sticky gradient message bar.

5. Layout Principles

Spacing System

• Base unit: 4pt
• Scale: 4, 8, 10, 12, 14, 16, 20, 24, 28, 32, 40
• Grid outer inset: 14pt; card gutter: 10pt; 2 columns on iPhone
• Section vertical rhythm: 18–22pt before a header, 12pt header→content

Grid & Container

• iPhone: 2-column match grid, 14pt insets, 10pt gutter
• iPhone Plus/Max: 2-column with larger cards (same gutter)
• iPad portrait: 3-column grid; Meet Me card centered max ~480pt wide
• iPad landscape: 4-column grid; profile detail in a centered sheet
• Profile detail photo: full-bleed, fixed 4:5 region with carousel dots

Whitespace Philosophy

• Photo-forward density: cards are tightly gridded (10pt gutters) — busy but rhythmic; photography fills the screen
• Content is loud, chrome is quiet: profile photos are full-color edge-to-edge; surrounding UI is neutral + POF Blue
• Rounded warmth: 16–20pt card radii, 999pt pill buttons, circular actions — friendly, never sharp
• Color is rationed by meaning: blue = brand/action, teal = presence, pink = unread, gold = upgrade

Border Radius Scale

• Square (0pt): full-bleed carousel edges
• Subtle (6pt): small chips, badges
• Standard (10–12pt): search field, interest chips, message bubbles
• Comfortable (16pt): profile grid cards
• Large (20pt): Meet Me card, sheets
• Extra (28pt): large bottom sheets/modals
• Pill (500pt): all buttons, "Online" pill, composer
• Circle (50%): avatars, Meet Me / like action buttons

6. Depth & Elevation

POF is mostly flat with soft shadows reserved for raised cards and the circular action buttons.

Shadow Philosophy: shadows are soft and friendly, lifting photo cards off the background and giving the blue like/yes button a confident glow so it reads as the primary action. On dark mode shadows nearly vanish, so cards rely on the #1A1D21 surface step and sheets add a faint 1pt #2C3036 top border.

Motion

• Like (grid card): heart scales 1→1.25→1 over 220ms with a light haptic; on mutual like a "It's a Match" overlay slides up (320ms ease-out)
• Meet Me decision: tapping ♥/✕ slides the card off (right/left) over 260ms ease-in with a light haptic; "?" lifts the card up and away (240ms); the next card eases in beneath
• Meet Me swipe: drag tracks the finger with slight rotation; release past 35% commits; spring-back if under threshold (damping 0.8)
• Tab switch: instant content swap; active icon does a subtle 1.05 pop (120ms); badge count animates a quick scale
• Profile open: card photo shared-element zooms into the detail carousel over 320ms
• Message send: bubble scales in from the composer (180ms ease-out); send button does a 0.9 press dip
• Online dot: a slow 2s pulse on the teal presence dot (opacity 1↔0.5) to signal "live"
• Skeleton loading: grid shows shimmering rounded photo placeholders (1.2s loop) while photos fetch
• Haptic feedback: light impact on like, Meet Me decision, tab switch; success haptic on a new match

7. Do's and Don'ts

Do

• Lead with POF Blue (#0098DB → #00A6E2) for brand + every primary action — logo, CTA, active tab, like button
• Build the match grid as a 2-column full-bleed photo grid with bottom gradient name/meta scrims
• Make Meet Me one big card + three round buttons (✕ / ? / ♥), the ♥ in POF Blue with a glow
• Show presence aggressively — teal "Online" pill + "Active now" meta; pulse the teal dot
• Treat Messages as a primary destination — prominent tab with a pink unread badge
• Keep text on photos white over a bottom gradient scrim — always
• Round everything — 16–20pt cards, 999pt pill buttons, circular actions
• Use heavy rounded type (800/900) for names and titles — approachable, unintimidating
• Use gold (#FFB23E) only for upgrade/premium; pink (#FF4F8B) only for unread/notification
• Keep profile photography full-color edge-to-edge in both themes — chrome dims, content does not

Don't

• Don't use pure black (#000000) for canvas or text — cool near-black #121417 / near-black #16181C
• Don't put colored text on profile photos — white on a gradient scrim only
• Don't make the app a single swipe deck — POF is grid-first + Meet Me; show many people at once
• Don't bury messaging — the Messages tab and unread badge are prominent by design
• Don't use sharp corners — POF's rounded warmth (16–20pt, pills, circles) is the brand feel
• Don't recolor POF Blue per screen — one brand blue everywhere for brand/action
• Don't use the brand blue for upgrade — upgrade is gold; presence is teal; unread is pink
• Don't desaturate profile photos in dark mode — only chrome dims
• Don't use thin/hairline weights for names — names lead and are bold (700+)
• Don't put shadows on flat list rows — shadows are for raised photo cards and the blue action button only
• Don't hide distance/last-active — "3 mi · Active now" is core metadata, not optional decoration

8. Responsive Behavior

Device Sizes

Dynamic Type

• Display, titles, body, meta: full scale
• Card-scrim name/meta, tab labels (10pt), unread badge (9pt), status chips (12pt): FIXED (layout-sensitive over imagery)
• Profile name in detail scales; card-scrim name stays fixed to protect the photo composition

Orientation

• Grid reflows column count on rotation (2→3→4-up)
• Meet Me card re-centers and caps width; swipe physics unchanged
• Profile detail carousel keeps a fixed aspect region; rotates with letterboxing if needed

Touch Targets

• Tab icons: 23pt glyph, 44pt hit
• Grid-card like: 36pt circle, 44pt hit
• Meet Me action buttons: 56pt circle (52pt SE)
• Top-bar icons: 22pt glyph, 44pt hit
• Full grid card: entire card tappable to open profile

Safe Area Handling

• Top: top bar + segmented strip respect safe area + Dynamic Island
• Bottom: tab bar + home indicator respected; the profile-detail message bar docks above the home indicator
• Keyboard: message composer rises above the keyboard; search field scrolls clear
• Sides: 14pt grid inset (12pt SE)

9. Agent Prompt Guide

Quick Color Reference

• Canvas (light): #FFFFFF / bg #F4F5F7
• Canvas (dark): #121417
• Surface 1 (dark): #1A1D21 · Surface 2 (dark): #23272C
• Divider: #E4E6EA light / #2C3036 dark
• Text primary: #16181C light / #EDEFF2 dark
• Text secondary: #6B7079 / #9BA1AB
• Text on photo: #FFFFFF
• POF Blue: #0098DB · POF Blue Light: #00A6E2
• Brand gradient: #0098DB → #00A6E2 (135°)
• Online teal: #00C9B7 · Unread pink: #FF4F8B · Upgrade gold: #FFB23E
• Success: #20C997 · Error: #FF5267
• Card scrim: transparent → rgba(0,0,0,0.78)
• Selection tint: #0098DB1F

Example Component Prompts

• "Build the POF match grid in SwiftUI: a 2-column LazyVGrid, 14pt outer inset, 10pt spacing. Each card is 3:4, 16pt corner radius, full-bleed photo. Top-left an 'Online' pill — rgba(0,0,0,0.42) bg, a 7pt teal #00C9B7 dot + 'Online' in white Nunito Sans 12pt w700, 999pt radius. Bottom gradient scrim transparent → rgba(0,0,0,0.78) with name+age white 15pt w700 and '3 mi · Active now' white 12pt w600. Bottom-right a 36pt circular #0098DB like button with a white heart and shadow rgba(0,152,219,0.5) 0 4px 12px."

• "Create the POF Meet Me card: a #1A1D21 surface card, 20pt corner radius, a centered 1:1 photo (16pt radius), name+age in Nunito Sans 18pt w800, prompt 'Would you like to meet {name}?' in 13pt w700 #9BA1AB, then a row of three 56pt circular buttons — No (✕, surface + 1.5pt divider border, secondary glyph), Maybe (?, surface + 1.5pt #FFB23E border, gold glyph), Yes (♥, solid #0098DB, white heart, shadow rgba(0,152,219,0.5) 0 6px 16px). Drag right = yes / left = no, commit past 35%, spring-back under threshold."

• "Render the POF bottom tab bar: 5 slots — Matches, Meet Me, Search, Messages, Me. Background #121417 @94% + blur, 0.5pt top border #2C3036. 23pt glyphs + 10pt w800 labels, active #0098DB (filled icon), inactive #9BA1AB. The Messages tab shows a pink #FF4F8B unread badge (white 9pt w800, min 16pt) top-right when count > 0."

• "Build a POF primary button: pill (999pt), linear-gradient #0098DB → #00A6E2 at 135°, white Nunito Sans 16pt w800, 14pt/28pt padding, pressed = brightness 0.93 + scale 0.98. Add a gold Upgrade pill (#FFB23E bg, #2A1B05 text, 14pt w800) and a blue outline 'View Profile' pill (1.5pt #0098DB, #0098DB text)."

• "Create a POF 'Online' presence pill + meta row: a 7pt teal #00C9B7 dot with a slow 2s opacity pulse (1↔0.5), 'Online' or 'Active now' in Nunito Sans 12pt w700, followed by '· 3 mi' in #9BA1AB. Over a photo, wrap it in a rgba(0,0,0,0.42) 999pt pill with white text."

• "Build the POF profile detail: a full-bleed swipeable photo carousel with page dots, an overlaid name+age (white 26pt w800 over a bottom scrim), a scroll of bio (Nunito Sans 16pt w400) + rounded interest chips + '3 miles away · Active now', and a sticky bottom bar with a gradient 'Send Message' pill #0098DB → #00A6E2 and a 48pt circular like button."

Iteration Guide

1. Canvas is white (#FFFFFF) light / cool near-black #121417 dark — NOT pure black
2. POF Blue #0098DB → #00A6E2 is the brand color — logo, primary CTA, active tab, like/yes button; one blue everywhere
3. The match grid is 2-column full-bleed photo cards with bottom gradient name/meta scrims — content-dense, photo-forward
4. Meet Me = one big card + ✕ / ? / ♥ round buttons; ♥ is POF Blue with a glow and a heart pop
5. Presence is teal (#00C9B7) and aggressive — "Online" pill + "Active now" meta + a pulsing dot
6. Messaging is a primary destination — prominent Messages tab with a pink (#FF4F8B) unread badge
7. Text on photos is always white over a transparent → rgba(0,0,0,0.78) scrim — never colored text on imagery
8. Round everything — 16–20pt cards, 999pt pill buttons, circular actions; heavy rounded type (800/900) for names/titles
9. Color is rationed by meaning — blue = brand/action, teal = presence, pink = unread, gold = upgrade
10. Profile photography stays full-color edge-to-edge in both themes — chrome dims, content does not; motion is friendly (180–320ms)