designmd-forge 1.2.0

package/dist/data/designs/ios-plenty-of-fish.md

@@ -0,0 +1,387 @@
+# Design System Inspiration of Plenty of Fish (iOS)
+
+## 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
+| Role | Light Mode | Dark Mode |
+|------|-----------|-----------|
+| Online / Presence (teal) | `#00C9B7` | `#00C9B7` |
+| Unread / Notification (pink) | `#FF4F8B` | `#FF4F8B` |
+| Upgrade / Premium (gold) | `#FFB23E` | `#FFB23E` |
+| Like (blue) | `#0098DB` | `#0098DB` |
+| Maybe (gold outline) | `#FFB23E` | `#FFB23E` |
+
+### 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
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display | Nunito Sans | 32pt | 900 | 1.15 | -0.6pt | Onboarding / large titles |
+| Title | Nunito Sans | 26pt | 800 | 1.2 | -0.3pt | Screen titles ("Meet Me") |
+| Section Title | Nunito Sans | 22pt | 800 | 1.25 | -0.2pt | "People near you" |
+| Profile Name (detail) | Nunito Sans | 18pt | 800 | 1.3 | -0.1pt | Profile detail name + age |
+| Body | Nunito Sans | 16pt | 400 | 1.5 | 0pt | Bio, message body, descriptions |
+| Card Name | Nunito Sans | 15pt | 700 | 1.3 | 0pt | Name + age on grid card scrim |
+| Button | Nunito Sans | 16pt | 800 | 1.0 | 0pt | Primary / secondary buttons |
+| Meta | Nunito Sans | 14pt | 400 | 1.4 | 0pt | "Active now · 3 miles away" |
+| Card Meta | Nunito Sans | 12pt | 600 | 1.35 | 0pt | Distance/last-active on card scrim |
+| Chip / Status | Nunito Sans | 12pt | 700 | 1.3 | 0.1pt | "Online" pill, interest chips |
+| Tab Label | Nunito Sans | 10pt | 800 | 1.0 | 0.1pt | Bottom tab labels |
+| Badge | Nunito Sans | 9pt | 800 | 1.0 | 0.2pt | Unread count badge |
+| Message Bubble | Nunito Sans | 15pt | 500 | 1.4 | 0pt | Chat bubble text |
+
+### 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.
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Backgrounds, dividers, list rows |
+| Card (Level 1) | `rgba(22,24,28,0.10) 0 4px 14px` (light) | Profile grid cards, Meet Me card on light |
+| Action Glow | `rgba(0,152,219,0.5) 0 6px 16px` | The blue like / Meet Me "yes" button |
+| Sheet (Level 2) | `rgba(22,24,28,0.14) 0 -6px 28px` | Bottom sheets (filters, report, upgrade) |
+| Modal Overlay | `rgba(22,24,28,0.5)` | Dim behind sheets and the photo viewer |
+
+**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
+| Device | Width | Key Changes |
+|--------|-------|-------------|
+| iPhone SE (3rd gen) | 375pt | 2-col grid, 12pt insets; Meet Me buttons 52pt |
+| iPhone 13/14/15 | 390pt | Standard 2-col grid, 14pt insets, 10pt gutter |
+| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated by the top bar |
+| iPhone 15/16 Pro Max | 430pt | 2-col grid larger cards; insets 16pt |
+| iPad (portrait) | 768pt | 3-col grid; Meet Me card centered max ~480pt |
+| iPad (landscape) | 1024pt+ | 4-col grid; profile detail as a centered sheet |
+
+### 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)