A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
24tokens
11type steps
3radius steps
14pxspacing base
Bumble, in one page
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:
#FFFFFFon Bumble Date mode; subtle Cream Tint (#FFFCF2) on BFF mode;#FFFFFFwith 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
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
#1F1F1Fwarm 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
#11AAA8BFF / orange#FF8000Bizz) 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#1F1F1Fis warmer - Don't use cool greys — Bumble's mid-greys are neutral but the deep ones are warm-toned
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Bumble design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Bumble Yellow: #ffc629
- Honey Deep: #f5b616
- Yellow Light: #ffe9a1
- Date Mode: #ffc629
- BFF Mode: #11aaa8
- Bizz Mode: #ff8000
- Canvas White: #ffffff
- BFF Cream: #fffcf2
- Surface 1: #f5f5f5
- Surface 2: #ededed
Type:
- families: Brando, Bricolage Grotesque, Manrope
- scale: 10, 11, 13, 14, 16, 18, 22, 24, 28
- weights: 500, 700, 900
Shape:
- radius: 12, 24, 28
- elevation: Active mode hex: filled with that mode's color, slight inner shadow | 5. Heart button gets a yellow glow shadow: `rgba(255, 198, 41, 0.5) 0 6px 16px`
Spacing: 14, 16, 32
Rules:
- 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
Avoid:
- 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
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
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 (
#FFC629Yellow): The flagship Bumble dating product. - BFF Mode (
#11AAA8Teal): The friend-finding mode — teal hexagon icon, teal CTA on BFF screens. - Bizz Mode (
#FF8000Orange): 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.
Type scaleRead the full spec
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 GrotesqueorManropeHeavy — 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
#000000for 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.
Components and layoutRead the full spec
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,
#FFC629fill, black heart glyph at 28pt,rgba(255, 198, 41, 0.5) 0 6px 16pxglow shadow - X Pass: 56pt circle, white fill, 1.5pt
#1F1F1Fstroke, black X at 22pt - Star SuperSwipe: 56pt circle,
#FFC629fill, black star at 22pt — visually similar to Heart but smaller - Bee Compliment: 56pt circle, white fill with 1.5pt
#FFC629stroke, yellow-and-black bee glyph - Rewind: 48pt circle,
#F5F5F5fill, 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)torgba(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
#FFC629yellow 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
#FFC629fill 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:
#FFFFFFon light,#0F0F0Fon 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:
#FFFFFFwith 0.5pt#E5E5E5top 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#FFC629indicator dot 4pt below the label - Inactive:
#9C9C9C(Mist) - Labels: Brando 10pt weight 700, visible always
- Badge:
#FFC629circle with#000000count text, sits top-right of the icon at 16pt diameter - Tap haptic:
.selectionChanged()on each switch
The Hexagon Hive Logo
Responsive behaviourRead the full spec
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
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-bumble {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #000000;
--heading-color: #000000;
--link-color: #886200;
--link-hover-color: #553d00;
--border-color: #d1d1d1;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(0,0,0,0.06);
--card-hover-shadow: 0 6px 18px rgba(0,0,0,0.12);
--header-bg: #000000;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #595959;
--button-bg: #ffc629;
--button-text-color: #000000;
--button-hover-bg: #f5b400;
--button-border: none;
--button-border-radius: 24px;
--button-secondary-bg: #f0f0f0;
--button-secondary-text-color: #000000;
--button-secondary-hover-bg: #e0e0e0;
--button-secondary-border: 1px solid #d1d1d1;
--prompt-bg: #f2f2f2;
--prompt-text-color: #000000;
--base-font: var(--font-helvetica);
--heading-font: var(--font-helvetica);
--card-border-radius: 24px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- lemon8 80.8%
- plenty of fish 78.1%
- hinge 77.5%
- clubhouse 76.8%
- coffee meets bagel 75.1%
Where this came from
- Source document
ios/design-md/dating/bumble/DESIGN.md· 29.2 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.