---
title: "Bumble design system"
variant: extended
source: https://bumble.com/
captured_at: 2026-10-12
theme: light
industry: other
generator: Design DNA (https://four.wiralomi.com/style/bumble-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Bumble · Design System

> Bright, human connections with confident simplicity

**Theme:** light · **Industry:** other · **Source:** https://bumble.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Bumble pairs a vivid yellow canvas and oversized dark typography with warm, candid portraits to make its social brand feel confident and approachable. The homepage alternates open white content sections with rounded image cards and clear, compact calls to action.

## North star

Let confident Bumble Yellow and oversized Ink make the first impression, then give human photography and spacious white sections room to connect.

## Overview

The page is anchored by Bumble Yellow (#ffdb5b), which fills the immersive hero and returns on the app callout and dating-category cards. Gallery White (#ffffff) provides a calm field for editorial content, while Ink (#202020) carries oversized hero lettering, headings, navigation and primary buttons. BumbleSans is used consistently, with large, confident headings and readable body copy rather than decorative type or all-caps styling. The layout moves from a full-bleed, image-layered opening into spacious white two-column stories, a pale-gray feature panel and side-by-side yellow service cards. Photography is central: portraits and real-life moments are cropped into rounded vertical panels or broad cards, with the hero images overlapping the brand wordmark. Rounded corners soften the strong color blocks; fine light borders and restrained shadows keep cards distinct without making the page feel dense. The overall effect is energetic but human, with clear contrast between brand moments and quieter reading sections.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Bumble Ink | `#202020` | `--color-bumble-ink` | brand | Primary text, hero wordmark, navigation, headings, and dark filled download and signup buttons. |
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main page canvas and breathing space around editorial sections, stories, and footer content; also used for text on dark buttons. |
| Bumble Yellow | `#ffdb5b` | `--color-bumble-yellow` | brand | Signature hero background and repeated fill for the app-download banner and Bumble Date card. |
| Soft Divider | `#eeeeee` | `--color-soft-divider` | semantic | Subtle borders around cards, navigation, buttons, and footer elements. |
| Cloud Panel | `#f3f3f3` | `--color-cloud-panel` | surface | Quiet section surface, most visible behind the Member Circle feature card. |
| Lemon Tint | `#fff386` | `--color-lemon-tint` | accent | Secondary pale-yellow card detail; appears as a supporting tint rather than the main brand canvas. |
| Charcoal Note | `#343333` | `--color-charcoal-note` | neutral | Minor text shade detected in page content; visually subordinate to the primary Ink text. |
| Footer Slate | `#575656` | `--color-footer-slate` | neutral | Muted footer text and a subdued outlined control; not a primary brand color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f3f3f3` (Cloud Panel) · `--color-text` → `#202020` (Bumble Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-border` → `#eeeeee` (Soft Divider) · `--color-accent` → `#ffdb5b` (Bumble Yellow)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#202020` | `#ffffff` | 16.29:1 | AAA |
| `#202020` | `#f3f3f3` | 14.68:1 | AAA |
| `#ffffff` | `#f3f3f3` | 1.11:1 | fail |
| `#ffdb5b` | `#ffffff` | 1.35:1 | fail |
| `#ffdb5b` | `#f3f3f3` | 1.22:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| BumbleSans | `--font-body` | webfont | 400, 500, 600 | Site-wide typeface for display headlines, section titles, paragraphs, navigation, links, and buttons. | Nunito Sans |

- **BumbleSans:** Use 400–600 weights. Headings are large and direct; body and controls stay comfortably readable. Natural casing, with lightly open tracking.

### Type scale — Major Third (ratio ≈ 1.277, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 68px | 600 | 1.03 | 0.007em | — | BumbleSans | Oversized hero wordmark-style headline over the yellow opening. |
| h1 | 49px | 600 | 1.12 | 0.009em | — | BumbleSans | Primary page or major feature headline. |
| h2 | 40px | 400 | 1 | 0 | — | BumbleSans | Section titles such as the Member Circle feature heading. |
| h3 | 34px | 600 | 1 | 0.012em | — | BumbleSans | Subsection and category-card headings. |
| h4 | 24px | 400 | 1 | 0 | — | BumbleSans | Smaller supporting titles in editorial content. |
| body | 20px | 400 | 1.25 | 0.016em | — | BumbleSans | Descriptive copy in story, feature, and category sections. |
| caption | 16px | 500 | 1.5 | 0 | — | BumbleSans | Image labels and compact explanatory text. |
| button | 17px | 500 | 1.18 | 0.018em | — | BumbleSans | Primary and secondary calls to action. |
| link | 17px | 400 | 1.5 | 0 | — | BumbleSans | Text links such as the service-card discovery links. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 1, 8, 10, 12, 14, 15, 16, 20, 22, 24, 32, 34, 40 px.
- Section rhythm 40px · element gap 16px · card padding 12px · max content width 1360px.

The page uses a wide, centered composition with a measured maximum content width of 1360px. A full-width hero gives way to mostly white sections organized as two-column image-and-copy layouts, followed by paired service cards and a split testimonial. Section spacing feels generous, while text blocks remain compact and left-aligned. The footer resolves into three link columns and a separate social and utility row. Keep the density comfortable and preserve clear visual transitions between yellow brand bands and white editorial space.

## Shape & elevation

- Radius: button `16px` · card `24px` · nav `16px` · xs `9px` · sm `16px` · md `24px` · pill `9999px`
- Shadow `sm` (section, card, footer): `rgba(32, 32, 32, 0.12) 0px 1px 8px 0px`
- Shadow `hairline` (card): `rgba(255, 255, 255, 0) 0px 0px 0px 0px`
- Motion: standard transition `0.2s ease` on interactive elements.

The design is mostly flat: strong color fields, white canvas, and lightly bordered cards do most of the grouping. Rounded panels and overlapping hero portraits create depth without heavy effects. Shadows are subtle and limited; keep separators delicate and avoid dark, dramatic elevation.

## Imagery

Use candid, diverse people and real-life scenes as the core visual content. The hero layers portrait panels across the oversized brand wordmark; later sections pair lifestyle photography with copy, and service cards show app experiences alongside people. Frame images in rounded cards or vertical crops, keeping photography vivid and natural. Product UI appears within imagery rather than as a substitute for human portraits.

## Components

### Hero navigation

Brand mark at the left, centered rounded white navigation capsule, and a compact language control at the right, set over the yellow hero.

### Layered portrait hero

Large dark display lettering sits behind overlapping portrait panels, turning the brand wordmark into a visual backdrop.

### Editorial feature split

Left-aligned heading and short copy share a two-column row with a group of rounded lifestyle images; a dark download button anchors the text.

### Member Circle panel

Pale-gray rounded feature band pairs a large community photo with a heading, supporting copy, and compact dark signup action.

### Service cards

Bumble Date and BFF appear as adjacent yellow-toned rounded cards with app-and-people imagery, concise descriptions, and text links.

### Testimonial feature

A large quote and attribution sit beside a monochrome couple portrait, with a dark story-reading button.

### App download banner

Rounded yellow callout combines a short heading, QR instruction and code with overlapping phone mockups.

### Multi-column footer

The large wordmark balances three compact link groups, followed by a lower row for QR access, social icons, and utility controls.

### Measured component styles

- **Primary button** (“Download Bumble”): background #202020 · text #ffffff · radius 16px · padding 14px 24px · 400 16px BumbleSans
- **Secondary button** (“Date”): transparent background · text #202020 · border 1px solid · radius 0px · padding 14px 22px · 500 17px BumbleSans
- **Link** (“Find your person”): transparent background · text #202020 · radius 0px · padding 0px · 400 17px BumbleSans
- **Card** (“Get the Bumble app”): background #ffdb5b · text #202020 · border 1px solid #eeeeee · radius 16px · padding 12px · 400 16px BumbleSans · shadow rgba(32, 32, 32, 0.12) 0px 1px 8px 0px
- **Navigation item** (“Bumble Date”): transparent background · text #202020 · radius 0px · padding 0px · 500 16px BumbleSans

## Do

- Use Bumble Yellow (#ffdb5b) for distinctive brand moments.
- Set primary copy and high-impact lettering in Bumble Ink (#202020).
- Alternate bright brand panels with open Gallery White (#ffffff) sections.
- Use authentic people-focused photography as the main visual anchor.
- Keep feature stories left-aligned in spacious split layouts.
- Use rounded cards and subtle Soft Divider (#eeeeee) borders.

## Don't

- Don't replace the signature yellow with a gradient.
- Don't make every section a colored card.
- Don't use heavy shadows or thick outlines.
- Don't crowd the page with dense copy or tightly packed controls.
- Don't let app mockups overwhelm the human photography.
- Don't use a decorative typeface or all-caps styling for all headings.

## Agent prompt

Build a new Bumble-style page with Bumble Yellow (#ffdb5b) as a bold, selective brand field and Gallery White (#ffffff) as the main reading canvas. Use Bumble Ink (#202020) for clear headings, navigation and filled CTAs. Set type in BumbleSans, or a close free sans-serif substitute, with confident large headlines and readable, natural-cased body text. Create an image-led hero with overlapping rounded portraits, then use spacious left-aligned split sections, a soft Cloud Panel (#f3f3f3) feature band, and rounded yellow service cards. Favor candid, diverse photography over decorative illustration. Keep borders delicate in Soft Divider (#eeeeee), shadows restrained, and the layout comfortable rather than dense. End with a clear app-download CTA and a structured multi-column footer.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width yellow canvas with top navigation and layered portrait panels over oversized brand lettering. | Primary section navigation, Language selector | Yellow full-bleed background, Oversized dark display type, Overlapping portrait cards, Rounded white nav capsule |
| 2 | feature-split | White two-column story with copy on the left and a cluster of lifestyle images on the right. | Download app CTA, Story-led introduction | Left-aligned headline, Rounded image cluster, Dark button |
| 3 | feature-split | Wide light-gray rounded panel; large photograph on the left, editorial copy and signup action on the right. | Community invitation, Signup CTA | Soft gray surface, Large rounded photo, Compact dark button |
| 4 | feature-grid | Two equal yellow-toned rounded cards arranged side by side, each pairing app imagery with text. | Compare Date and BFF, Follow discovery links | Paired product cards, App imagery, Text links |
| 5 | testimonials | Split white section with large quote on the left and monochrome portrait on the right. | Read more story | Editorial quote, Attribution, Rounded monochrome image, Dark CTA |
| 6 | cta | Wide rounded yellow banner with copy and QR code on the left and overlapping phones on the right. | Scan QR to download, App link | Yellow callout panel, QR code, Phone mockups |
| 7 | footer | White footer with large brand mark beside three compact columns of navigation links. | Browse app and company links, Access legal information | Large footer wordmark, Three link columns, Compact text |
| 8 | footer | Single-row utility footer with QR access, social icons, and a language control. | Scan for app, Open social channels, Choose language | Small QR card, Social icon row, Outlined language control |

## Source CSS custom properties (selected)

```css
--header-actions-gap-horizontal: 12px;
--header-actions-gap-horizotal: 24px;
--token-a11y-focus-ring-inner-color: #ffc629;
--token-a11y-focus-ring-outer-color: #ffc629;
--token-action-cell-border-radius: 16px;
--token-action-cell-border-width: 1px;
--token-action-cell-extra-color-fill: #6b6b6b;
--token-action-cell-hint-space-margin-top: 2px;
--token-action-cell-large-space-gap: 12px;
--token-action-cell-large-space-padding-horizontal: 16px;
--token-action-cell-large-space-padding-vertical: 12px;
--token-action-cell-medium-space-gap: 12px;
--token-action-cell-medium-space-padding-horizontal: 16px;
--token-action-cell-medium-space-padding-vertical: 12px;
--token-action-cell-primary-color-background: #f6f6f6;
--token-action-cell-primary-color-background-selected: #fff7de;
--token-action-cell-primary-hint-color: #6b6b6b;
--token-action-cell-primary-title-color: #141414;
--token-action-cell-secondary-color-background: #fff;
--token-action-cell-secondary-color-background-selected: #fff7de;
--token-action-cell-secondary-color-border: #dcdcdc;
--token-action-cell-secondary-color-border-selected: #fff;
--token-action-cell-secondary-hint-color: #6b6b6b;
--token-action-cell-secondary-title-color: #141414;
--token-actionsheet-header-background-base: #fff;
--token-actionsheet-header-background-primary: #ffc629;
--token-actionsheet-item-border-color: #dcdcdc;
--token-actionsheet-item-border-width: 1px;
--token-actionsheet-item-color-destructive: #cd2e0f;
--token-actionsheet-item-color-generic: #141414;
--token-audiobars-bar-fill-active-on-brand: #141414;
--token-audiobars-bar-fill-inactive-on-brand: #0000003d;
--token-brick-border-radius-circle: 50%;
--token-brick-border-radius-squared: 16%;
--token-button-color-semi-transparent-white-opacity: .3;
--token-button-medium-border-radius: 24px;
--token-button-medium-spacing-icon-text: 8px;
--token-button-primary-background-color-on-brand: #fff;
--token-button-primary-background-color-on-light: #ffc629;
--token-button-primary-text-color-on-brand: #141414;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/bumble-com