# Design System Inspiration of Bumble (iOS)

## 1. Visual Theme & Atmosphere

Bumble's iOS app is unapologetically loud. Where Hinge whispers on cream paper and Tinder neon-flames at you, Bumble paints the screen Bumble Yellow (`#FFC629`) — a saturated, sun-bright honey-yellow — and lets it bake. The yellow is everywhere: the splash, the loading dots, the active tab, the primary CTA, the match badge, the hexagon honeycomb that frames every photo and notification. The brand is a single color used with stadium-rock confidence, paired with a near-black warm canvas to keep contrast brutal. If Hinge is a journal, Bumble is a billboard.

The hexagon is the second piece of the identity — Bumble's spatial signature. Photos are hex-cropped on match notifications and the "people near you" grid. The app icon itself is a yellow hexagon with a bee. Cards in the swipe stack are rectangular for usability, but the chrome around them — the badges, the heart, the match indicator, the message preview avatars — all live inside hexagons or hex-tagged frames. The hexagon means "Bumble" the way the heart means "love"; it's the iconography of the brand.

Typography is dominated by Brando — the proprietary slab-influenced sans Bumble commissioned from Mike Abbink — a face with a soft humanist warmth and big personality at display sizes. Headlines like "It's a Match!" and "Make the first move" are set in Brando Black (900) at 32-44pt, sized to hit. Below display, the app uses a heavier weight ladder than most dating apps — Bold (700) for card names, Medium (500) for body, Regular (400) only for very secondary metadata. The voice the type carries is feminist-direct: Bumble's premise (women message first) shapes the typography too — confident, large, no apologies.

**Key Characteristics:**
- Bumble Yellow (`#FFC629`) as the dominant brand color — splash, primary CTAs, tab indicator, match notification, loading hexagons
- Honey Deep (`#F5B616`) for pressed states and the "send a Compliment" premium moments
- Warm Bumble Black (`#1F1F1F`) — slightly warm near-black for type and dark surfaces, never pure
- Canvas: `#FFFFFF` on Bumble Date mode; subtle Cream Tint (`#FFFCF2`) on BFF mode; `#FFFFFF` with yellow accents on Bizz mode
- Hexagon iconography everywhere — photos hex-cropped on notifications, app icon is a hex with a bee, the loading state is rotating hexes
- Swipe stack with big confident photos, name+age at the bottom, big circular buttons (X / heart / yellow rocket / yellow star)
- The yellow "Make the first move" CTA on the empty-message screen — possibly the most iconic Bumble screen
- 5 bottom tabs: People / Hives / Matches / Chats / Profile — with the Hives icon a literal honeycomb
- Brando at weights 400/500/700/900 — heavy ladder for confidence
- Hard edges and big shadows — Bumble is unafraid of presence

## 2. Color Palette & Roles

### Primary
- **Bumble Yellow** (`#FFC629`): The brand color — splash, primary CTAs ("Send", "Continue", "Make the first move"), active tab indicator, match badge, hexagon loading state, "1" badge counter on chats.
- **Honey Deep** (`#F5B616`): Pressed state on yellow CTAs; the "Send a Compliment" premium accent.
- **Yellow Light** (`#FFE9A1`): Yellow chip backgrounds, "Today's Bee" callout fill, soft yellow gradients on premium sheets.

### Brand Modes
- **Date Mode** (`#FFC629` Yellow): The flagship Bumble dating product.
- **BFF Mode** (`#11AAA8` Teal): The friend-finding mode — teal hexagon icon, teal CTA on BFF screens.
- **Bizz Mode** (`#FF8000` Orange): The professional networking mode — orange hexagon icon, orange CTA on Bizz screens.
- The active mode's color replaces all yellow chrome — but the hexagon shape is constant.

### Canvas, Surfaces & Dividers
- **Canvas White** (`#FFFFFF`): Primary canvas on Date.
- **BFF Cream** (`#FFFCF2`): Subtle warm-tinted canvas on BFF mode.
- **Surface 1** (`#F5F5F5`): Section backgrounds, input fills, settings rows.
- **Surface 2** (`#EDEDED`): Pressed states, chip fills.
- **Divider** (`#E5E5E5`): 0.5pt hairlines, card outlines.
- **Shadow Black** (`rgba(0, 0, 0, 0.12)`): Big confident shadows — Bumble does not whisper.

### Text
- **Bumble Black** (`#1F1F1F`): Primary text — name+age, card titles, body, large display.
- **Bumble Slate** (`#5A5A5A`): Secondary text — bios, "x miles away", chat preview.
- **Bumble Mist** (`#9C9C9C`): Tertiary text — placeholders, disabled labels, very-secondary meta.
- **Pure Yellow Black** (`#000000`): Text on Bumble Yellow surfaces — yellow needs full-black contrast.

### Semantic
- **Match Pink** (`#E94B7B`): Reserved for the "It's a Match!" celebration heart; not used in chrome — the match heart is the only place this pink appears.
- **Verified Blue** (`#0066FF`): Verified profile checkmark.
- **Warning Amber** (`#FF9500`): Profile incomplete warnings.
- **Error Red** (`#D72638`): Form validation errors, unmatched-from-chat confirmations.
- **Success Green** (`#00A86B`): Confirmation toasts ("Message sent", "Profile updated").

### Dark Mode
Bumble added dark mode in 2021. The yellow stays yellow — but everything else inverts to a warm OLED dark.
- **Dark Canvas** (`#0F0F0F`): Primary dark background.
- **Dark Surface 1** (`#1A1A1A`): Cards, sheets.
- **Dark Surface 2** (`#2A2A2A`): Pressed states, chip fills.
- **Dark Divider** (`#2F2F2F`): Hairlines.
- **Dark Text Primary** (`#F2F2F2`): Inverted primary text.
- **Dark Text Secondary** (`#9C9C9C`): Inverted secondary.
- **Bumble Yellow (dark)** (`#FFC629`): Unchanged — yellow reads loud on dark canvas, no adjustment needed.
- **Honey Deep (dark)** (`#FFD45C`): Brightened slightly for OLED on dark mode pressed states.

## 3. Typography Rules

### Font Family
- **Primary**: `Brando` — proprietary slab-influenced sans by Mike Abbink, commissioned for Bumble
- **Weights available**: Regular (400), Medium (500), Bold (700), Black (900) — Bumble does not use Light or Thin; the brand is heavy
- **Fallback stack**: `-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', sans-serif`
- **Web/marketing Google Fonts substitute**: `Bricolage Grotesque` or `Manrope` Heavy — both capture Brando's mix of personality and weight
- Use Bumble Bold or Black for almost every headline; reserve Medium and Regular for body and metadata

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Match Hero | Brando | 44pt | 900 (Black) | 1.05 | -0.8pt | "It's a Match!" celebration title |
| Display | Brando | 32pt | 900 | 1.1 | -0.6pt | "Make the first move", "Find your Hive" |
| Screen Title | Brando | 24pt | 900 | 1.15 | -0.4pt | "Matches", "Chats", "Profile" (top header) |
| Card Name+Age | Brando | 28pt | 700 (Bold) | 1.1 | -0.4pt | "Sigrún, 28" on swipe card |
| Section Header | Brando | 18pt | 700 | 1.2 | -0.1pt | "About me", "Looking for" |
| Body | Brando | 16pt | 500 (Medium) | 1.4 | 0pt | Bio text, profile descriptions |
| Body Bold | Brando | 16pt | 700 | 1.4 | 0pt | Emphasis within body |
| Body Small | Brando | 14pt | 500 | 1.4 | 0pt | "x miles away", chat list preview text |
| Button (Primary) | Brando | 16pt | 700 | 1.0 | 0pt | "Send", "Continue", "Make the first move" |
| Button (Large CTA) | Brando | 18pt | 700 | 1.0 | 0pt | "It's a Match — Send a Message" |
| Tab Label | Brando | 10pt | 700 | 1.0 | 0.2pt | Bottom tab labels |
| Chip Label | Brando | 13pt | 500 | 1.0 | 0pt | Attribute pills, filter chips |
| Metadata | Brando | 13pt | 500 | 1.3 | 0pt | Dates, mile counts, chat timestamps |
| Counter Badge | Brando | 11pt | 700 | 1.0 | 0.2pt | The "1" / "5" badges on tab icons — set on yellow background |
| Compliments Hero | Brando | 22pt | 900 | 1.2 | -0.3pt | "She sent you a Compliment" |

### Principles
- **Heavy ladder for confidence**: Brando Bold (700) and Black (900) carry almost all headlines; the brand is loud.
- **Big display sizes**: 32-44pt headlines are common — Bumble wants you to read the words from across a room.
- **Tight tracking at display**: -0.8pt at 44pt falling to 0pt at body — pulls letters together for editorial impact.
- **Pure black on yellow**: When text sits on Bumble Yellow, use pure `#000000` for maximum contrast; everywhere else use Bumble Black (`#1F1F1F`).
- **Dynamic Type respected on body, bio, section headers**: Tab labels, badge counters, and chip labels are fixed (layout-sensitive).
- **Yellow CTAs use black text, always**: Never white text on yellow — contrast ratio drops below WCAG AA.

## 4. Component Stylings

### Buttons

**Primary CTA (Send / Continue / Make the first move)**
- Background: `#FFC629` (Bumble Yellow)
- Text: `#000000` (pure black, for WCAG AA on yellow)
- Padding: 16pt vertical, 32pt horizontal
- Corner radius: 28pt (capsule)
- Height: 56pt fixed
- Pressed: background `#F5B616` (Honey Deep), scale 0.97
- Shadow on hero CTAs: `rgba(255, 198, 41, 0.4) 0 8px 24px` — yellow glow shadow for the "Make the first move" hero
- Haptic: `.impactOccurred(.medium)` on Send; `.notificationOccurred(.success)` on match-completion

**Secondary Outline CTA**
- Background: transparent
- Border: 1.5pt `#1F1F1F`
- Text: `#1F1F1F`, Brando 16pt weight 700
- Padding: 14pt vertical, 28pt horizontal
- Corner radius: 28pt
- Pressed: background `#F5F5F5`

**Swipe Action Buttons (under the swipe card)**
- 5 circular buttons in a row: Rewind (small) / X Pass (medium) / Heart Yes (large, centered) / Star SuperSwipe (medium) / Bee (Compliment, small)
- Heart Yes is the hero: 64pt circle, `#FFC629` fill, black heart glyph at 28pt, `rgba(255, 198, 41, 0.5) 0 6px 16px` glow shadow
- X Pass: 56pt circle, white fill, 1.5pt `#1F1F1F` stroke, black X at 22pt
- Star SuperSwipe: 56pt circle, `#FFC629` fill, black star at 22pt — visually similar to Heart but smaller
- Bee Compliment: 56pt circle, white fill with 1.5pt `#FFC629` stroke, yellow-and-black bee glyph
- Rewind: 48pt circle, `#F5F5F5` fill, gray rewind icon
- Press animation: scale 0.9 on press; haptic varies by button (Heart = medium, Star = heavy, Bee = soft)

**The Honeycomb / Hive Button (BFF/Bizz mode toggle)**
- A hexagonal button — literally hex-shaped, not rectangular — used to switch between Date / BFF / Bizz modes
- Active mode hex: filled with that mode's color, slight inner shadow
- Inactive mode hexes: outlined only, mode glyph in muted color

### Cards & Containers

**Swipe Card (The Hero Component)**
- Width: full content width minus 24pt margins
- Aspect: 3:4 (slightly more portrait than square)
- Corner radius: 12pt (less rounded than Hinge — Bumble's photos are stronger-edged)
- Photo: full-bleed cover, with a 4-segment progress bar pinned at the top (each photo segment lights up in white as it advances; Stories-style)
- Bottom overlay: dark gradient from `rgba(0, 0, 0, 0)` to `rgba(0, 0, 0, 0.7)` over the bottom 30% of the card
- Name + age: pinned at the bottom-left over the gradient — "Sigrún, 28" in Brando 28pt Bold white
- Verified blue check: 18pt to the right of the name if verified
- Bio preview: 1 line of 16pt Medium white below the name; tap to expand into full vertical-scroll profile
- "i" info button: bottom-right 32pt circle, semi-transparent black fill, white "i" glyph

**Photo Progress Bar**
- 4 segments at the top of the photo, each 3pt tall, 4pt gap between segments
- Active segment: white `#FFFFFF`
- Inactive segment: `rgba(255, 255, 255, 0.4)`
- The bar is the Bumble photo navigation primitive — taps on left/right halves of the photo advance through

**Match Notification (the hexagon moment)**
- When two people match, a hex-cropped photo of the match appears at the top of the chat list with a yellow border ring
- Hex shape: a regular hexagon with 6:5 vertical-flat orientation (point-up)
- Border: 2pt `#FFC629` yellow stroke on the hex
- Subtle pulse on entry: scale 1.0 → 1.05 → 1.0 over 600ms
- Tap target: 64pt outer hex; the photo crops to fit inside

**Bee Tag / Verified Badge**
- A tiny hex-tag, ~20pt across, with a yellow `#FFC629` fill and a small bee glyph inside
- Sits on the top-right of profile photos in the chat list to indicate "Today's Bee" — the daily curated match
- Verified profiles get a blue circular check (not hex) — verified is distinct from "Today's Bee"

**Compliments Sheet (premium)**
- A bottom sheet with 24pt top corners
- Top strip: yellow honeycomb pattern background, 80pt tall, with three bee glyphs hovering
- "She sent you a Compliment" in Brando 22pt Black `#1F1F1F`
- The compliment text below in Brando 18pt Medium quoted in italic style
- Primary CTA: "Reply" pill (full yellow CTA spec)
- Compliments cost in-app currency (Beeline credits)

**Beeline (people who liked you, premium grid)**
- 2-col grid of profile thumbnails
- Each thumbnail: 4:5 aspect, 8pt corner radius, blurred preview if not subscribed
- Subscribed users see clear photos with a small yellow heart badge top-right
- Tap opens full profile; subscribers can see who liked them

### Navigation

**Top Header**
- Height: 56pt (slim header, no large-title pattern)
- Background: `#FFFFFF` on light, `#0F0F0F` on dark
- Title: Brando 24pt Black `#1F1F1F`, left-aligned, 20pt leading margin
- Trailing icons: Filters (3-slider glyph) on People, Pinned filter on Chats, Settings on Profile

**Bottom Tab Bar**
- Height: 56pt + safe area
- Background: `#FFFFFF` with 0.5pt `#E5E5E5` top divider; opaque (no blur — Bumble likes hard surfaces)
- Tabs: People (silhouettes), Hives (honeycomb), Matches (yellow heart), Chats (chat-bubble), Profile (person)
- Icon size: 24pt, outlined default / filled when active
- Active color: `#1F1F1F` (Bumble Black) — the active state is bold black, with a 4pt `#FFC629` indicator dot 4pt below the label
- Inactive: `#9C9C9C` (Mist)
- Labels: Brando 10pt weight 700, visible always
- Badge: `#FFC629` circle with `#000000` count text, sits top-right of the icon at 16pt diameter
- Tap haptic: `.selectionChanged()` on each switch

**The Hexagon Hive Logo**
- Bumble's hexagonal "B" logomark — a yellow hex with a stylized "B" bee inside
- Used on splash, the loading state (rotating hex animation), and as a watermark on the empty-states ("No matches yet — go make the first move!")
- Never rendered in any color other than `#FFC629` on white/dark or `#1F1F1F` outline on yellow

### Input Fields

**Chat Input ("Type a message" — the women-message-first input)**
- Background: `#F5F5F5`
- Border: none (focused state: 1.5pt `#1F1F1F`)
- Corner radius: 24pt (capsule)
- Padding: 14pt vertical, 20pt horizontal
- Placeholder: "Type your message…" in Brando 16pt Medium `#9C9C9C`
- Trailing send button: 40pt circle in `#FFC629` (Bumble Yellow), black arrow glyph at 18pt
- Disabled state (empty input): send circle drops to `#F5F5F5` with `#9C9C9C` arrow
- A small countdown timer chip sits above the input on new matches: "Your time to reply: 23h 14m" in Brando 13pt Bold `#1F1F1F` with a yellow accent border — Bumble's signature 24-hour expiry mechanic

**Text Field (Profile editing, Filters)**
- Background: `#FFFFFF`
- Border: 1pt `#E5E5E5` default, 1.5pt `#1F1F1F` focused
- Corner radius: 12pt
- Height: 52pt
- Label: floating — sits as placeholder at 16pt Medium `#9C9C9C` when empty; animates to 12pt Bold `#1F1F1F` at the top-left when focused or filled
- Text: Brando 16pt Medium `#1F1F1F`

**Filter Sliders (Distance, Age range)**
- Track: 4pt tall, `#E5E5E5` fill, rounded
- Active range: `#FFC629` Bumble Yellow fill
- Thumb: 24pt circle, white fill with `rgba(0,0,0,0.15) 0 2px 6px` shadow, 2pt `#FFC629` inner stroke
- Value labels: floating above the thumb in Brando 14pt Bold

### Distinctive Components

**It's a Match! Celebration**
- Full-screen takeover, `#FFC629` yellow canvas
- Two photos hex-cropped, side-by-side at the vertical center, 32pt apart, each ~120pt across, with 4pt white border on each hex
- A `#E94B7B` (Match Pink) heart icon centered between them, scale-bounces in
- "It's a Match!" in Brando 44pt Black `#1F1F1F` centered (-0.8pt tracking)
- Subline: "You and Sigrún want to chat" in Brando 16pt Medium `#1F1F1F`
- Primary CTA: "Send a Message" pill — pure `#FFFFFF` background, `#1F1F1F` text in Brando 18pt Bold, 56pt height
- Secondary action: "Keep Swiping" text button in `#1F1F1F` below
- Reminder banner: "She has 24 hours to make the first move" in Brando 13pt Medium centered

**Make the First Move (empty chat / opening screen)**
- The most iconic Bumble screen — an empty-state instructional moment
- Yellow `#FFC629` background, with the hex Bumble logo at the top
- Hero text: "Make the first move" in Brando 32pt Black `#1F1F1F` centered
- Subtitle: "She has 24 hours to start the conversation" in Brando 16pt Medium `#1F1F1F`
- 24-hour countdown timer in Brando 28pt Bold below
- Primary CTA: "Send a Move" — large pill, pure white with black text

**SuperSwipe / Star Send Animation**
- Single tap on the yellow star → entire screen flashes yellow `#FFC629` for 200ms then fades, with a star icon scale-bouncing from 1.0 → 1.4 → 1.0
- Haptic: `.notificationOccurred(.success)`
- The SuperSwipe banner appears on the recipient's view: "Sigrún SuperSwiped you" in yellow header

**24-Hour Countdown Chip**
- Sits at the top of new matched-but-unmessaged chats
- Pill: yellow `#FFC629` fill, black text "Your turn: 23h 14m" in Brando 13pt Bold
- 1pt inner stroke darker (`#F5B616`) for definition
- Counts down in real-time; when expired, the chip turns red `#D72638` and reads "Time's up — extend?"

## 5. Layout Principles

### Spacing System
- Base unit: 4pt
- Scale: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80
- Standard horizontal margin: 16pt on lists; 24pt on swipe stack and hero screens
- Section vertical gap: 32pt between hero sections; 16pt between profile blocks

### Grid & Container
- Content width: full device width minus 16-24pt horizontal margins
- Swipe card: full-width minus 24pt margins, one card at a time stacked behind
- Profile detail: single column, full-bleed photo at top with overlay text
- Chats list: vertical list with hex-cropped avatar leading each row
- Beeline grid (premium): 2-col with 8pt gap

### Whitespace Philosophy
- **Yellow is the whitespace**: Where other apps use light grey breathing room, Bumble uses big blocks of yellow that themselves serve as visual rest
- **Big margins on hero screens**: 32pt vertical padding around "Make the first move" and "It's a Match!" — the screens are statements
- **Tight chat list**: 64pt rows with 16pt internal padding — Bumble wants you to see many conversations at once

### Border Radius Scale
- Square (0pt): rarely used
- Small (4pt): toast notifications
- Standard (8pt): Beeline grid photos, small chips
- Medium (12pt): swipe cards, text fields, settings rows
- Large (20pt): modal sheets, premium hero modules
- Capsule (28pt): primary CTAs
- Full Pill (500pt): chips, chat input, attribute tags
- Circle (50%): swipe action buttons, avatar circles, badges, indicator dots
- **Hexagon**: literal hex shape for the brand mark, match notification photo crops, mode toggle buttons — clip-path or SVG mask

## 6. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Yellow surfaces, chat backgrounds |
| Card (Level 1) | `rgba(0, 0, 0, 0.08) 0 2px 8px` | Profile cards, chat list rows on press |
| Floating (Level 2) | `rgba(0, 0, 0, 0.12) 0 4px 16px` | Swipe card top of stack, secondary modals |
| Hero CTA Glow | `rgba(255, 198, 41, 0.4) 0 8px 24px` | The yellow primary CTA on hero screens — the brand's signature glow |
| Heart Button Glow | `rgba(255, 198, 41, 0.5) 0 6px 16px` | The big yellow heart action button — yellow halo |
| Overlay (Level 3) | `rgba(0, 0, 0, 0.16) 0 8px 32px` | Compliments sheet, premium modals |
| Sheet (Level 4) | `rgba(0, 0, 0, 0.24) 0 -12px 32px` | Bottom sheets, "It's a Match" entry |

**Shadow Philosophy**: Bumble is not subtle. The yellow glow shadow on the heart button and on hero CTAs is a brand signature — a soft yellow halo that says "this is the action". Shadows in chrome are larger and slightly more opaque than Hinge or Airbnb (0.12-0.16 max, 8-32pt blur). Hard surfaces, big confidence.

### Motion
- **Swipe gesture**: spring-tracked drag with rubber-band; commit-threshold ~30% of width; on commit, the card spins slightly (rotation 8°) and slides off-screen in 350ms
- **Yes/No commit animation**: confetti-like burst of small yellow hexagons fall from the top of the screen for 800ms
- **Heart button tap**: scale 1.0 → 1.2 → 1.0 over 250ms spring (damping 0.6); the yellow glow halo intensifies, then the card commits
- **Star (SuperSwipe) tap**: full-screen yellow flash for 200ms, paired with `.notificationOccurred(.success)`
- **Bee (Compliment) tap**: scale-up the bee glyph 1.0 → 1.3 → 1.0 over 400ms with a wing-flap rotation, opens the Compliment composer
- **Match celebration entry**: photos slide in from offscreen left/right to center, the pink heart pops in via scale-bounce, "It's a Match!" type animates up from below with letter-by-letter cascade
- **24-hour timer pulse**: subtle 1500ms opacity 0.95 → 1.0 → 0.95 pulse on the countdown chip
- **Hex loading state**: 6 yellow hexes arranged in a honeycomb pattern, rotating around the center at 1200ms per cycle
- **Tab switch**: 200ms ease; indicator dot fades in 4pt below the label; `.selectionChanged()` haptic

## 7. Do's and Don'ts

### Do
- Use Bumble Yellow (`#FFC629`) as the dominant action color — it's the brand
- Pair yellow with pure black (`#000000`) for text on yellow surfaces — WCAG AA requires it
- Use Brando weights 500/700/900 — the brand is heavy and confident
- Render the heart action button with a yellow glow shadow — `rgba(255, 198, 41, 0.5) 0 6px 16px`
- Use the hexagon shape for the brand mark, match notification photo crops, and mode toggle buttons
- Use the 24-hour countdown chip on new matches — it's the core mechanic of the app
- Use the photo progress bar at the top of the swipe card (4 segments, Stories-style)
- Make the "It's a Match!" celebration yellow-canvas full-screen with hex-cropped photos
- Use `#1F1F1F` warm Bumble Black for primary text on white surfaces, not pure black
- Add big confident shadows on hero CTAs — the yellow glow is intentional
- Use Match Pink (`#E94B7B`) only on the It's a Match heart — nowhere else
- Switch all yellow chrome to the mode color (teal `#11AAA8` BFF / orange `#FF8000` Bizz) when in those modes

### Don't
- Don't use white text on Bumble Yellow — contrast fails WCAG; always pure black
- Don't use Bumble Yellow for body text — yellow is a verb, never type
- Don't soften the photo aspect to 4:5 portrait (that's Hinge) — Bumble uses 3:4
- Don't replace the hexagon with a circle on match notifications — the hex is the brand spatial signature
- Don't use Brando Light or Thin — the brand doesn't have light weights
- Don't blur the heart-button glow into nothing — the yellow halo is a key visual; keep it visible
- Don't put yellow chrome on BFF mode (use teal) or Bizz mode (use orange) — the mode color is sacred to that product
- Don't render the bee glyph anywhere except the Compliments button and the "Today's Bee" badge
- Don't use rounded card photos with radius > 12pt — Bumble's cards have firmer edges than Hinge/Tinder
- Don't skip the 24-hour countdown on new chats — it's the core mechanic; design must surface it
- Don't use pure black (`#000000`) for body text on white — Bumble Black `#1F1F1F` is warmer
- Don't use cool greys — Bumble's mid-greys are neutral but the deep ones are warm-toned

## 8. Responsive Behavior

### Device Sizes
| Device | Width | Key Changes |
|--------|-------|-------------|
| iPhone SE (3rd gen) | 375pt | Swipe card aspect shifts 3:4 → 1:1.2 for compactness; action buttons drop from 64pt to 56pt diameter |
| iPhone 13/14/15 | 390pt | Standard 3:4 card, 24pt margins, 64pt heart button |
| iPhone 15/16 Pro | 393pt | Dynamic Island respected; header drops to 52pt to make room |
| iPhone 15/16 Pro Max | 430pt | Larger cards, action button row gains slight extra spacing |
| iPad | 768pt+ | 2-col swipe view with side stack browser; chat list moves to a sidebar; main view becomes the conversation |

### Dynamic Type
- Match Hero, Display, Screen Title, Body, Bio: full scale
- Tab labels, badge counters, chip labels: fixed (layout-sensitive)
- The 24-hour countdown chip: fixed (tabular numerals)

### Orientation
- All swipe surfaces: portrait-locked
- Photo lightbox on profile: rotates to landscape full-bleed
- Match celebration: portrait only — confetti choreography is portrait-tuned

### Touch Targets
- Heart action button: 64pt diameter, 80pt full hit area
- Other swipe action buttons: 56pt
- Tab bar icons: 24pt icon, 56pt full row
- CTAs: 56pt height, full width minus 24pt margins
- 24-hour chip: 32pt tall, full-width minus 32pt margins

### Safe Area Handling
- Top: safe area honored — the 56pt header sits below the status bar/dynamic island
- Bottom: chat input pins above home indicator; tab bar pins above home indicator on other screens
- Sides: 16-24pt content insets depending on screen

## 9. Quick Reference Cheat Sheet

### Quick Color Reference
- Canvas: `#FFFFFF`
- Surface 1: `#F5F5F5`
- Divider: `#E5E5E5`
- Bumble Yellow (primary): `#FFC629`
- Honey Deep (pressed): `#F5B616`
- Yellow Light (soft chips): `#FFE9A1`
- Bumble Black (primary text): `#1F1F1F`
- Bumble Slate (secondary text): `#5A5A5A`
- Bumble Mist (tertiary): `#9C9C9C`
- Pure Black (on yellow): `#000000`
- Match Pink (Match heart only): `#E94B7B`
- BFF Teal: `#11AAA8`
- Bizz Orange: `#FF8000`
- Verified Blue: `#0066FF`
- Error Red: `#D72638`
- Success Green: `#00A86B`
- Dark canvas: `#0F0F0F`

### Example Component Prompts
- "Create a SwiftUI Bumble swipe card: full-width minus 24pt margins, 3:4 aspect, 12pt corner radius. Full-bleed cover photo with a 4-segment progress bar pinned at the top in 3pt height, 4pt gap, active segment white and inactive `rgba(255,255,255,0.4)`. Bottom dark gradient overlay from transparent to `rgba(0,0,0,0.7)` over the bottom 30%. 'Sigrún, 28' in Brando 28pt Bold white pinned bottom-left, with a small Verified Blue check trailing the name if verified. An 'i' info button bottom-right — 32pt circle, semi-transparent black, white 'i'. The card is swipeable: drag past 30% of width to commit, then it rotates 8° and slides off in 350ms."
- "Build the Bumble swipe action row: 5 circular buttons in a horizontal row below the card. From left: Rewind (48pt, `#F5F5F5` fill, gray glyph), X Pass (56pt, white fill with 1.5pt `#1F1F1F` stroke, black X), Heart Yes (64pt, `#FFC629` Bumble Yellow fill, 28pt black heart glyph, with a `rgba(255,198,41,0.5) 0 6px 16px` yellow glow shadow), Star SuperSwipe (56pt, `#FFC629` fill, black star), Bee Compliment (56pt, white fill with 1.5pt `#FFC629` stroke, yellow-and-black bee glyph). Press animation: scale 0.9 on press. Heart triggers `.impactOccurred(.medium)`; SuperSwipe `.notificationOccurred(.success)`; Bee `.impactOccurred(.soft)`."
- "Design the Bumble 'It's a Match!' celebration: full-screen `#FFC629` yellow canvas. Two photos hex-cropped (regular hexagon, point-up orientation) side-by-side at the vertical center, 32pt apart, each 120pt across with a 4pt white border on the hex. A 48pt Match Pink (`#E94B7B`) heart icon centered between them, scale-bounces in 1.0 → 1.4 → 1.0 over 400ms. Below the hexes: 'It's a Match!' in Brando 44pt Black `#1F1F1F` with -0.8pt letter spacing, centered. Subline: 'You and Sigrún want to chat' in Brando 16pt Medium `#1F1F1F`. A reminder banner below: 'She has 24 hours to make the first move' in Brando 13pt Medium centered. Primary CTA 'Send a Message' pinned at the bottom — white background, `#1F1F1F` text in Brando 18pt Bold, 56pt tall pill. Tertiary 'Keep Swiping' text button below in `#1F1F1F`. Entry haptic: `.notificationOccurred(.success)` with a `.impactOccurred(.medium)` 200ms later."
- "Create the Bumble 24-hour countdown chip: full-width capsule sitting at the top of new matched-but-unmessaged chats. Background `#FFC629` Bumble Yellow with a 1pt `#F5B616` inner stroke for definition. Text 'Your turn: 23h 14m' in Brando 13pt Bold `#000000` (pure black for WCAG on yellow). 32pt tall, 16pt horizontal padding. A subtle 1500ms opacity 0.95 → 1.0 → 0.95 pulse animation. When expired, the chip transitions to `#D72638` Error Red and reads 'Time's up — extend?' with the same Brando 13pt Bold."
- "Build the Bumble chat input bar: pinned above the keyboard. `#F5F5F5` Surface 1 background capsule with 24pt radius, 14pt vertical / 20pt horizontal padding. Placeholder 'Type your message…' in Brando 16pt Medium `#9C9C9C`. Trailing send button — 40pt circle in `#FFC629` Bumble Yellow with a black arrow glyph at 18pt. Disabled state when input is empty: send circle drops to `#F5F5F5` with `#9C9C9C` arrow. Send haptic: `.impactOccurred(.medium)`. The countdown chip from above sits 8pt above this input for new matches."

### Iteration Guide
1. Bumble Yellow `#FFC629` is the dominant brand color — splash, CTAs, tab indicator, match notification, heart button
2. Pair yellow with pure black (`#000000`) for text — WCAG AA requires it
3. Brando weights 500/700/900 only — the brand is heavy and confident
4. Body text on white: Bumble Black `#1F1F1F` (warm), not `#000000`
5. Heart button gets a yellow glow shadow: `rgba(255, 198, 41, 0.5) 0 6px 16px`
6. Hexagon for the brand mark, match notification photos, mode toggles — never replace with circle
7. The 24-hour countdown chip is core mechanic — surface it prominently on new matches
8. Mode switching (Date/BFF/Bizz) replaces all yellow chrome with the mode color, keeping hex shape constant
9. Match celebration: yellow full-screen with hex-cropped photos and a pink heart between
10. Dark mode: warm `#0F0F0F` canvas with `#F2F2F2` text; Bumble Yellow stays identical for OLED contrast