# Design System Inspiration of Coffee Meets Bagel (iOS)

## 1. Visual Theme & Atmosphere

Coffee Meets Bagel's iOS app is a *relaxed first date over coffee*, rendered as software. Where swipe-apps are cold and infinite, CMB is warm, curated, and deliberately scarce: you get a small batch of hand-picked "bagels" (matches) once a day. The whole visual language is built from a coffee-house palette — roasted brew-brown (`#A0522D`), a friendly bagel-orange (`#F4623A`), and warm cream (`#F3E4CF`) — over a cozy brown-black canvas (`#14100D` in dark, warm off-white `#FBF6EF` in light). Nothing is stark; even "white" is cream. The atmosphere says *take your time, this is a curated introduction, not a slot machine.*

The signature screen is **Today's Bagels**: a single large profile card at a time, framed in a generous 24pt-radius rounded rectangle with a full-bleed photo, a soft bottom gradient, the person's name + age in Poppins 26pt, a one-line meta row ("Designer · 2 mi away · ☕ Latte person"), and a row of warm interest chips. Below the card sit exactly two primary actions: a roasted-brown circular **Pass** (×) and a noticeably larger bagel-orange circular **Like** (♥). The Like is always the biggest, warmest element on screen — CMB wants you to lean toward connection. A smaller brew-brown **Send a Bagel** (★) action lets you spend beans to stand out. The second core surface is the **curated batch header** ("6 fresh picks · expires in 23h") that frames the day's selection as finite and fresh, and the third is the **profile detail** — a long, scrollable, photo-and-prompt card where the bagel's answers ("My ideal Sunday is…") are rendered as warm cream prompt blocks.

The color system is a tight, food-warm triad. **Bagel-orange** (`#F4623A`, deepening to `#D94E2A`) is the single primary action color: the big Like, the active tab, "fresh" badges, the unread chat dot. **Brew-brown** (`#A0522D`, deep `#7E3F22`) is the secondary brand color: "Send a Bagel", selected interest chips, the beans/currency surfaces. **Cream** (`#F3E4CF` / soft `#E8D4B8`) replaces pure white everywhere — on-photo text, outline buttons, card insets. A muted **like-green** (`#4CC38A`) marks mutual-match confirmations, and **premium gold** (`#E0A82E`) is reserved for the subscription upsell. The discipline keeps the app feeling like one warm, coherent café rather than a loud marketplace.

Typography is rounded and friendly. CMB's product uses a warm geometric sans (Brandon Grotesque / Gotham-family in marketing); **Poppins** is the closest free face and is used here. Hierarchy is people-first: screen title 32pt/800, profile name 26pt/700, section 22pt/700, card title 18pt/600, body 16pt/400, prompt answer 15pt/600, meta 14pt/400, chip 13pt/600, badge 12pt/700 uppercase. Weight concentrates at 400/600/700/800 — regular for prose, semibold for prompts and chips, bold for names and sections, extrabold for screen titles. The rounded letterforms reinforce the cozy, approachable mood.

**Key Characteristics:**
- Coffee-house palette — brew-brown (`#A0522D`) + bagel-orange (`#F4623A`) + cream (`#F3E4CF`) over warm brown-black (`#14100D`)
- Curated, scarce model — a small daily batch of "bagels", framed as fresh and expiring
- Today's Bagels card — one large profile at a time, 24pt-radius, full-bleed photo, bottom gradient
- Two-action commitment — roasted-brown circular Pass + a noticeably larger bagel-orange Like
- Send a Bagel — brew-brown star action, spend beans to stand out
- Warm interest chips — emoji + label, cream on translucent over photo, brown when selected
- Batch header — "6 fresh picks · expires in 23h" — finite, fresh, no infinite feed
- Cream replaces white — on-photo text, outline buttons, prompt blocks; nothing is stark
- Pill buttons & circular actions — fully rounded (999pt) everywhere
- Poppins / Brandon type — rounded, friendly, people-first hierarchy
- Like-green (`#4CC38A`) for mutual match; premium gold (`#E0A82E`) for upsell only
- Mascot warmth — the bagel logomark and gentle copy keep the tone playful, not transactional

## 2. Color Palette & Roles

### Primary (Interactive)
- **Bagel Orange** (`#F4623A`): The single primary action color — the big Like button, active tab, "fresh"/"active" badges, unread chat dot, primary CTAs.
- **Bagel Deep** (`#D94E2A`): Pressed state of the Like / primary buttons, gradient end.
- **Bagel Tint** (`#F4623A1F`): 12% wash behind a just-liked card and the match-confirm flash.

### Secondary (Brand)
- **Brew Brown** (`#A0522D`): Secondary brand color — "Send a Bagel", selected interest chips, beans/currency surfaces, the roasted-brown Pass ring.
- **Brew Deep** (`#7E3F22`): Pressed state of brown buttons, deep accents.
- **Brew Pressed** (`#693318`): Active-press of brown circular actions.

### Cream (replaces white)
- **Cream** (`#F3E4CF`): On-photo text, outline-button text/border, prompt-block background — the app's "white".
- **Cream Soft** (`#E8D4B8`): Secondary on-photo text, dividers over photos.

### Canvas & Surfaces (Light Mode)
- **Canvas Warm** (`#FBF6EF`): Primary light canvas — warm off-white, NOT pure white.
- **Surface 1** (`#FFFFFF`): Cards on light, elevated panels.
- **Surface 2** (`#F3ECE1`): Pressed rows, chip backgrounds, secondary fills.
- **Divider** (`#E8DECF`): Hairline separators.

### Canvas & Surfaces (Dark Mode)
- **Coffee Canvas** (`#14100D`): Primary dark canvas — deep roasted brown-black, NOT neutral grey.
- **Surface 1** (`#1F1813`): Cards, settings rows.
- **Surface 2** (`#2A2017`): Pressed rows, chip backgrounds.
- **Divider** (`#33281D`): Hairline separators (warm brown, not grey).

### Text
- **Text Primary Light** (`#3A2A18`): Body, names — warm dark brown, NOT pure black.
- **Text Secondary Light** (`#8A7458`): Meta, secondary copy.
- **Text Tertiary Light** (`#B0A088`): Placeholders, disabled.
- **Text Primary Dark** (`#EFE6DA`): Body, names on dark — warm cream-white.
- **Text Secondary Dark** (`#B7A48E`): Meta, secondary copy on dark.
- **Text Tertiary Dark** (`#7C6B57`): Placeholders, disabled on dark.

### Action / Status Roles

| Role | Light Mode | Dark Mode | Treatment |
|------|-----------|-----------|-----------|
| Like (primary action) | `#F4623A` | `#F4623A` | Large filled circle, white heart |
| Pass | `#8A7458` on `#F3ECE1` | `#B7A48E` on `#2A2017` | Outline/soft circle, × glyph |
| Send a Bagel | `#A0522D` | `#A0522D` | Brew circle, cream star |
| Mutual match | `#4CC38A` | `#4CC38A` | Match-confirm banner + check |
| Just-liked flash | `#F4623A1F` | `#F4623A24` | 12% orange wash, 500ms fade |

### Semantic
- **Like / Match Green** (`#4CC38A`): "It's a match!" confirmation, mutual-like banner.
- **Error Red** (`#D94E2A`): Destructive confirm, failed-send (shares Bagel Deep family).
- **Warning Gold** (`#E0A82E`): Out-of-beans notice, premium-locked feature.
- **Premium Gold** (`#E0A82E`): CMB Premium upsell, "Boost", subscription surfaces.

## 3. Typography Rules

### Font Family
- **Product**: `Brandon Grotesque` / `Gotham`-family (CMB's warm geometric brand sans) in marketing; rounded geometric sans on app.
- **Closest Free Face**: `Poppins` (by Indian Type Foundry, SIL OFL) — geometric sans with friendly rounded terminals, near-identical warmth.
- **Numeric / Mono (rare)**: `SF Mono` for the beans balance and timers.
- **Fallback Stack**: `-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Screen Title | Poppins | 32pt | 800 | 1.15 | -0.6pt | "Today's Bagels", "Discover" |
| Profile Name | Poppins | 26pt | 700 | 1.2 | -0.3pt | "Maya, 28" on the card |
| Section | Poppins | 22pt | 700 | 1.25 | -0.2pt | "A little about Maya" |
| Card Title | Poppins | 18pt | 600 | 1.3 | -0.1pt | "Why you matched" |
| Body | Poppins | 16pt | 400 | 1.5 | 0pt | Bio prose, descriptions |
| Prompt Answer | Poppins | 15pt | 600 | 1.4 | 0pt | "My ideal Sunday is…" answer |
| Meta | Poppins | 14pt | 400 | 1.4 | 0pt | "Designer · 2 mi away · ☕ Latte person" |
| Chip | Poppins | 13pt | 600 | 1.0 | 0pt | Interest chips "🥾 Hiking" |
| Badge | Poppins | 12pt | 700 | 1.0 | 0.4pt | "ACTIVE TODAY" uppercase |
| Beans / Number | Poppins | 16pt | 700 | 1.0 | 0pt | Bean balance, batch count |
| Tab Label | Poppins | 11pt | 600 | 1.0 | 0.1pt | Bottom tab labels |
| Button | Poppins | 16pt | 700 | 1.0 | 0pt | Primary pill label |

### Principles
- **People-first hierarchy**: The profile name is the loudest text on the card; sizes serve the person, not the chrome.
- **Rounded warmth**: The geometric-rounded face (Poppins / Brandon) is intentional — it reinforces the cozy café tone; never substitute a cold grotesque.
- **Weight discipline**: 400 (prose), 600 (chips/prompts/card titles), 700 (names/sections/numbers), 800 (screen titles). No thin, no black, no light.
- **Badges are uppercase 12pt/700**: "ACTIVE TODAY", "NEW" — the only consistently uppercased text, a small confident label.
- **Dynamic Type first-class**: Profile name, section, body, prompt answer scale; chips, badges, bean numbers, tab labels stay fixed.

## 4. Component Stylings

### Buttons

**Primary Button (Like / Continue / Match)**
- Shape: Fully rounded pill, 999pt corner radius (or large circle for the card Like action)
- Background: `#F4623A` (Bagel Orange)
- Text/Glyph: `#FFFFFF` — Poppins 16pt weight 700
- Padding: 14pt vertical, 28pt horizontal (circle: 72pt diameter for card Like)
- Pressed: background `#D94E2A` + scale 0.98
- Disabled: background `#F4623A` at 40% opacity

**Secondary Button (Send a Bagel / brand)**
- Background: `#A0522D` (Brew Brown)
- Text: `#F3E4CF` (Cream) Poppins 15pt weight 600
- Corner radius: 999pt
- Padding: 13pt vertical, 24pt horizontal
- Pressed: background `#7E3F22` + scale 0.98

**Outline Button (Pass / Skip)**
- Background: transparent
- Text/Border: `#F3E4CF` (cream) on photos / `#8A7458` on surfaces
- Border: 1.5pt cream / divider
- Corner radius: 999pt
- Padding: 12pt vertical, 22pt horizontal
- Pressed: background `#F3E4CF14` (8% cream)

**Circular Action Buttons (card Pass / Like / Send a Bagel)**
- Pass: 56-60pt circle, `Surface 2` fill, 1.5pt divider border, `×` glyph in Text Secondary
- Like: 68-72pt circle (always the largest), `#F4623A` fill, white `♥` — the visual center of gravity
- Send a Bagel: 56pt circle, `#A0522D` fill, cream `★`
- Shadow: `0 8px 20px -8px rgba(0,0,0,0.4)` light / `rgba(0,0,0,0.6)` dark
- Press: scale 0.92 + soft haptic; Like also triggers a 1.0→1.15→1.0 heart pop

**Text Button (See full profile / Learn more)**
- Font: Poppins 14pt weight 600
- Color: `#F4623A`
- No underline; 12pt vertical hit padding
- Pressed: 60% opacity

### Today's Bagel Card (the core atom)

The defining component — one curated profile at a time.

- Container: 24pt corner radius, full-bleed photo, `overflow: hidden`, shadow `0 16px 40px -16px rgba(0,0,0,0.7)`
- Photo: 3:4 aspect ratio, full-bleed
- Bottom gradient: transparent → `rgba(20,16,13,0.95)` over the lower 55% so text is legible
- Top-left badge: translucent blurred pill (`rgba(20,16,13,0.55)` + blur), cream text 12pt 700, leading icon (e.g., clock for "Active today")
- Info block (bottom-left, 20pt inset): name+age Poppins 26pt 700 (age weight 500) in white, meta row 14pt cream, then interest chips
- Interest chip (on photo): `rgba(243,228,207,0.18)` fill, 1pt `rgba(243,228,207,0.28)` border, cream 13pt 600, 999pt radius, 5×12 padding
- Tap card → expands to full scrollable profile detail (push transition)

### Profile Detail (scrollable)

- Stacked full-width photos (24pt radius, 12pt gap) interleaved with prompt blocks
- Prompt block: cream-tinted card (`#F3E4CF` light / `#2A2017` dark), 16pt radius, prompt label 13pt 600 secondary, answer 15pt 600 primary, 16pt padding
- Sticky bottom action bar with the same Pass / Like / Send-a-Bagel circular trio

### Curated Batch Header

- Title "Today's Bagels" Poppins 19pt 700; subtitle "6 fresh picks · expires in 23h" 12pt secondary
- Trailing 38pt circular icon button (beans / info) `Surface 2` fill
- The "expires in" timer counts down live; at expiry the batch animates out and "Come back tomorrow" empty state appears

### Match Confirmation ("It's a match!")

- Full-screen takeover: warm gradient (`#F4623A` → `#A0522D`), two circular avatars overlapping, "It's a match!" Poppins 32pt 800 white, like-green check accent, "Say hi" primary pill + "Keep browsing" text button
- Confetti of small bagel glyphs, gentle scale-in

### Navigation

**Top Bar**
- Height: 44pt + safe area; leading screen/section title, trailing circular icon (beans balance / filter)
- On profile detail: leading back chevron, trailing report/overflow

**Bottom Tab Bar**
- Height: 56pt + safe area, `#FBF6EF` / `#14100D`, 0.5pt top border
- 4 tabs: Suggested (bagel logomark), Discover (`magnifyingglass`), Chats (`message`, with orange unread dot), Profile (`person`)
- Active color: `#F4623A`; inactive `#B0A088` / `#7C6B57`
- Labels: Poppins 11pt 600, always shown; active icon fills + label goes orange; no tint pill
- Unread badge: 8pt `#F4623A` dot, top-right of the Chats icon, 1.5pt canvas-colored ring

### Input Fields

**Chat Composer**
- Height: 44pt, `Surface 2` fill, no border, 999pt radius
- Placeholder: "Message Maya…" Poppins 15pt secondary
- Trailing send: 36pt `#F4623A` circle with white arrow when text present

**Search (Discover)**
- Height: 40pt, `Surface 2` fill, 999pt radius
- Leading `magnifyingglass` 16pt secondary, placeholder "Search by name or interest" 14pt secondary

### Distinctive Components

**Today's Bagel Card** — see core atom; the defining one-at-a-time curated profile.

**Pass / Like / Send-a-Bagel Trio** — the three circular actions, with Like always the largest, warmest element.

**Curated Batch Header** — finite, fresh, expiring daily selection — the anti-infinite-feed signature.

**Interest Chips** — emoji + label warm pills; cream-on-translucent over photos, brew-brown when selected.

**Beans Currency** — the brew-brown bean economy: a coffee-bean glyph + balance, spent on "Send a Bagel" / Discover likes; surfaces are always brown-toned.

**Match Confirmation Takeover** — warm orange→brown gradient celebration with bagel confetti.

**Couples / Success Stories Strip** — a warm testimonial carousel on the discover/onboarding surface reinforcing the "real relationships" brand.

## 5. Layout Principles

### Spacing System
- Base unit: 4pt
- Scale: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64
- Screen horizontal inset: 20pt
- Card internal inset (over photo): 20pt
- Action-row gap: 28pt between circular actions
- Prompt-block padding: 16pt

### Grid & Container
- iPhone: card at 20pt horizontal insets, 3:4 photo, single column
- iPad: card max-width 480pt centered; profile detail max 600pt; chat list as 360pt left rail + thread
- Chats list: single-column rows, 72pt tall, 20pt insets

### Whitespace Philosophy
- **Scarcity has room**: one bagel card fills the screen with generous margins — the curated model is reflected in the calm, uncrowded layout
- **The person is the hero**: photo is full-bleed; chrome (badges, chips) floats translucently so it never competes with the face
- **Two clear choices**: Pass and Like get their own breathing room and unequal weight — the bigger Like nudges toward connection
- **Warm, never clinical**: generous radii (24pt cards), soft shadows, cream insets — the layout feels like a cozy café table

### Border Radius Scale
- Square (0pt): full-bleed photo edges that meet card edges, dividers
- Subtle (6pt): small inline chips, timers
- Standard (10pt): list rows, small media
- Comfortable (16pt): prompt blocks, settings cards, sheets
- Card (20pt): chat cards, modal sheets
- Hero (24pt): the Today's Bagel card, profile photos
- Pill (999pt): all buttons, interest chips, badges
- Circle (50%): Pass/Like/Send actions, avatars, icon buttons

## 6. Depth & Elevation

CMB uses soft, warm elevation — shadows are brown-tinted and gentle, like lamplight in a café.

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Canvas, list rows, prompt blocks |
| Card (Level 1) | `rgba(0,0,0,0.7) 0 16px 40px -16px` (dark) / `rgba(58,42,24,0.16) 0 12px 32px -12px` (light) | Today's Bagel card, profile photos |
| Action (Level 2) | `rgba(0,0,0,0.6) 0 8px 20px -8px` | Circular Pass/Like/Send buttons |
| Sheet (Level 3) | `rgba(0,0,0,0.5) 0 -8px 32px` | Bottom sheets (filters, beans store, premium) |
| Modal Scrim | `rgba(20,16,13,0.6)` | Dim behind match takeover & confirm modals |

**Shadow Philosophy**: Elevation makes the bagel card feel like a physical photo resting on a warm table, and the Like button feel like a tactile button you press. Shadows are intentionally brown-warm, never neutral grey. On dark mode shadows deepen to `0.6–0.7` opacity and cards add a subtle 1pt `#33281D` warm border as a secondary lift cue.

### Motion
- **Card advance (Pass/Like)**: liked card scales 1.0→1.04 then flies up-right with a slight rotate over 320ms ease-in; passed card slides down-left over 280ms; next card cross-fades + scales 0.96→1.0 over 260ms ease-out
- **Like heart pop**: the heart glyph scales 1.0→1.15→1.0 over 280ms spring (response 0.3, damping 0.6) + soft success haptic; a 12% orange wash flashes over the card and fades over 500ms
- **Match takeover**: full-screen gradient scales in from 0.9→1.0 + fades over 400ms; bagel confetti falls over 1.2s; avatars settle with a gentle spring
- **Batch expiry**: at 00:00 the timer pulses, the last card fades out, the "Come back tomorrow" empty state cross-fades in over 400ms
- **Chip select**: scale 0.95 tap-down, fill animates `Surface 2` → `#A0522D` over 180ms
- **Tab switch**: cross-dissolve 200ms; active icon does a gentle 1.0→1.1→1.0 pop; unread dot pulses once on new message
- **Profile open**: card expands into the full profile via an iOS push (300ms) with the hero photo shared-element matched
- **Haptic feedback**: soft success on Like, light tick on Pass, medium impact on match takeover, light tap on chip select

## 7. Do's and Don'ts

### Do
- Use a warm coffee-house palette — brew-brown (`#A0522D`) + bagel-orange (`#F4623A`) + cream (`#F3E4CF`) over warm brown-black (`#14100D`)
- Make Bagel Orange the single primary action color — the Like, active tab, fresh badges
- Make the Like button the largest, warmest element on the card — nudge toward connection
- Use Brew Brown as the secondary brand color — Send a Bagel, selected chips, the beans economy
- Replace pure white with cream (`#F3E4CF`) everywhere — on-photo text, outlines, prompt blocks
- Present one curated bagel card at a time with generous margins and a 24pt radius
- Frame the batch as finite and fresh ("6 fresh picks · expires in 23h")
- Use warm interest chips (emoji + label) — translucent cream over photos, brown when selected
- Pop the Like heart (1.0→1.15→1.0) with a soft haptic and a fading orange card wash
- Celebrate a mutual match with a warm orange→brown takeover and bagel confetti
- Keep shadows brown-warm and soft — like café lamplight, never neutral grey

### Don't
- Don't use a cold neutral-grey dark mode — the canvas is roasted brown-black `#14100D`
- Don't make Pass and Like the same size — the Like is intentionally bigger
- Don't build an infinite swipe feed — CMB is curated and scarce by design
- Don't use pure white — cream `#F3E4CF` is the app's "white"
- Don't use pure black text — warm dark brown `#3A2A18` light / cream `#EFE6DA` dark
- Don't use a cold grotesque typeface — the rounded geometric warmth (Poppins/Brandon) is the tone
- Don't use sharp rectangular cards or buttons — generous radii (24pt cards, pill/circle actions)
- Don't let chrome compete with the photo — badges and chips float translucently
- Don't reserve premium gold for anything but the subscription upsell
- Don't animate aggressively — motion is warm and gentle, 180–400ms ease-out with soft haptics
- Don't add a Material-style tint pill to the active tab — icon fills + label goes orange only

## 8. Responsive Behavior

### Device Sizes
| Device | Width | Key Changes |
|--------|-------|-------------|
| iPhone SE (3rd gen) | 375pt | Card 16pt insets; 2 interest chips max on card; action circles 56/68 |
| iPhone 13/14/15 | 390pt | Standard layout, 20pt insets, 60/72 action circles |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated in top bar |
| iPhone 15/16 Pro Max | 430pt | Taller photo; up to 3 chips; slightly larger action circles |
| iPad (portrait) | 768pt | Card max 480pt centered; profile detail max 600pt |
| iPad (landscape) | 1024pt+ | 2-pane: chats list (360pt) + thread; bagel card stays centered max 480pt |

### Dynamic Type
- Profile name, section, body, prompt answer: full scale
- Interest chips, badges, bean numbers, tab labels: FIXED (layout-sensitive)
- Timers / numeric: scale to L but stay tabular

### Orientation
- Portrait-primary (dating context); iPad supports landscape with chats-list + thread split
- The bagel card stays portrait-proportioned (3:4 photo) regardless of orientation; it never stretches wide

### Touch Targets
- Like circle: 68–72pt
- Pass / Send circle: 56–60pt
- Chip: min 32pt tall, full-chip tap
- Tab bar icons: 22pt glyph, 56pt hit
- Card tap (open profile): full card

### Safe Area Handling
- Top: top bar respects safe area and Dynamic Island
- Bottom: action row + tab bar respect home indicator; profile-detail action bar floats above the home indicator
- Keyboard: chat composer lifts above the keyboard; profile editing scrolls above it
- Sides: 20pt screen inset (16pt on SE)

## 9. Agent Prompt Guide

### Quick Color Reference
- Canvas (light): `#FBF6EF`  ·  Canvas (dark): `#14100D`
- Surface 1: `#FFFFFF` light / `#1F1813` dark
- Surface 2: `#F3ECE1` light / `#2A2017` dark
- Divider: `#E8DECF` light / `#33281D` dark
- Text primary: `#3A2A18` light / `#EFE6DA` dark
- Text secondary: `#8A7458` light / `#B7A48E` dark
- Bagel Orange (primary action): `#F4623A` → deep `#D94E2A`
- Brew Brown (secondary brand): `#A0522D` → deep `#7E3F22`
- Cream (replaces white): `#F3E4CF` / soft `#E8D4B8`
- Match green: `#4CC38A`
- Premium gold: `#E0A82E`
- Just-liked flash: `#F4623A1F`

### Example Component Prompts
- "Build the Coffee Meets Bagel Today's Bagel card in SwiftUI: 24pt corner radius, full-bleed 3:4 photo, `overflow: hidden`, shadow `rgba(0,0,0,0.7) 0 16px 40px -16px`. Top-left translucent badge: `rgba(20,16,13,0.55)` + blur, cream text Poppins 12pt w700, leading clock icon, '·ACTIVE TODAY·'. Bottom gradient transparent → `rgba(20,16,13,0.95)` over lower 55%. Bottom-left 20pt inset: 'Maya' + ' 28' (Poppins 26pt w700, age w500) white; meta 'Designer · 2 mi away · ☕ Latte person' Poppins 14pt cream; then 3 interest chips (`rgba(243,228,207,0.18)` fill, 1pt `rgba(243,228,207,0.28)` border, cream 13pt w600, 999pt radius)."

- "Create the CMB action trio: a centered row, 28pt gap. Pass = 60pt circle, `#2A2017` fill, 1.5pt `#33281D` border, × glyph `#B7A48E`. Like = 72pt circle (the largest), `#F4623A` fill, white ♥ 32pt. Send a Bagel = 56pt circle, `#A0522D` fill, cream ★. On Like tap: heart scales 1.0→1.15→1.0 over 280ms spring, soft success haptic, a 12% `#F4623A` wash flashes over the card fading over 500ms; the liked card scales 1.04 then flies up-right with slight rotate over 320ms, next card cross-fades + scales 0.96→1.0."

- "Render the CMB curated batch header: title 'Today's Bagels' Poppins 19pt w700 `#EFE6DA`, subtitle '6 fresh picks · expires in 23h' Poppins 12pt `#B7A48E` with a live countdown; trailing 38pt circular beans button `#2A2017` fill. At expiry, pulse the timer, fade the last card out, cross-fade a 'Come back tomorrow' empty state in over 400ms."

- "Build the CMB match takeover: full-screen warm gradient `#F4623A` → `#A0522D`, two overlapping 96pt circular avatars, 'It's a match!' Poppins 32pt w800 white with a `#4CC38A` check accent, 'Say hi' primary orange pill + 'Keep browsing' cream text button. Scale in 0.9→1.0 + fade over 400ms; bagel-glyph confetti falls over 1.2s; medium impact haptic."

- "Create CMB interest chips: emoji + label, Poppins 13pt w600, 999pt radius, 8×14 padding. Default `#2A2017` fill, 1pt `#33281D` border, text `#EFE6DA`. Selected `#A0522D` fill + border, text `#F3E4CF`. On tap: scale 0.95 down, fill animates over 180ms, light haptic."

- "Build the CMB profile detail: stacked full-width photos (24pt radius, 12pt gap) interleaved with prompt blocks. Prompt block: `#2A2017` card, 16pt radius, 16pt padding — label Poppins 13pt w600 `#B7A48E`, answer Poppins 15pt w600 `#EFE6DA`. Sticky bottom bar repeats the Pass/Like/Send circular trio. Open via iOS push with the hero photo as a shared element."

### Iteration Guide
1. Canvas is warm brown-black `#14100D` dark / warm off-white `#FBF6EF` light — NOT neutral grey, NOT pure white/black
2. Bagel Orange `#F4623A` is the single primary action color; Brew Brown `#A0522D` is the secondary brand
3. The Like button is always the largest, warmest element — nudge toward connection
4. Cream `#F3E4CF` replaces pure white everywhere (on-photo text, outlines, prompt blocks)
5. Show ONE curated bagel card at a time with generous margins and a 24pt radius — no infinite feed
6. Frame the batch as finite and fresh ("X fresh picks · expires in Yh")
7. Interest chips are warm pills: cream-on-translucent over photos, brew-brown when selected
8. The Like pops the heart (1.0→1.15→1.0) with a soft haptic and a fading orange card wash
9. A mutual match is a warm orange→brown takeover with bagel confetti
10. Motion is gentle: 180–400ms ease-out, soft/medium haptics, brown-warm soft shadows