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

# Airbnb.org · Design System

> Calm clarity for a mission built around people

**Theme:** light · **Industry:** nonprofit · **Source:** https://www.airbnb.org/ · **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._

Airbnb.org pairs a restrained, high-contrast editorial layout with documentary imagery about emergency housing and the people it supports. Generous white space and concise content keep the nonprofit mission clear, while magenta is reserved for donation actions and key visual accents.

## North star

Keep the page calm and spacious, letting real human stories lead while magenta clearly signals donation actions.

## Overview

The visual strategy is led by a white canvas (#ffffff), near-black headings (#222222), and quiet gray supporting copy (#6a6a6a). Pale gray (#f7f7f7) distinguishes occasional section bands and the footer without disrupting the mostly white page. The concentrated magenta accent (#b30057) marks prominent donation actions and small brand details; it is not a general-purpose highlight color. Airbnb Cereal VF gives large, tightly tracked bold headlines a friendly editorial presence, balanced by readable, relaxed body copy. The page moves from a centered mission statement into full-width video, then alternating centered introductions, image-card grids, a pale promise panel, an impact map, and a final donation banner. Comfortable vertical breathing room lets each story stand apart. Rounded media and cards soften the otherwise clean geometry. Photography and video carry the emotional narrative; illustrations and map graphics support specific content rather than define the palette.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary page canvas and broad text or navigation field; preserves the open, uncluttered feel across most sections. |
| Story Gray | `#6a6a6a` | `--color-story-gray` | semantic | Muted explanatory copy and footer text, providing softer contrast than the main headings. |
| Grounded Ink | `#222222` | `--color-grounded-ink` | brand | Primary headlines, navigation, body text, card treatment, and the outlined active-responses button. |
| Fade Black | `#0e0e0e` | `--color-fade-black` | semantic | Measured only within a media-overlay gradient; use for image shading, not as a defining page color. |
| Quiet Mist | `#f7f7f7` | `--color-quiet-mist` | surface | Soft section and footer backgrounds, including the promise area, creating a subtle break from the white canvas. |
| Mission Magenta | `#b30057` | `--color-mission-magenta` | accent | Primary Donate now buttons and small brand marks; keep it selective and highly noticeable. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f7f7f7` (Quiet Mist) · `--color-surface-2` → `#222222` (Grounded Ink) · `--color-text` → `#222222` (Grounded Ink) · `--color-text-muted` → `#6a6a6a` (Story Gray) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#222222` (Grounded Ink) · `--color-accent` → `#b30057` (Mission Magenta) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#222222` | `#ffffff` | 15.91:1 | AAA |
| `#222222` | `#f7f7f7` | 14.85:1 | AAA |
| `#6a6a6a` | `#ffffff` | 5.41:1 | AA |
| `#6a6a6a` | `#f7f7f7` | 5.05:1 | AA |
| `#6a6a6a` | `#222222` | 2.94:1 | fail |
| `#ffffff` | `#f7f7f7` | 1.07:1 | fail |
| `#ffffff` | `#222222` | 15.91:1 | AAA |
| `#b30057` | `#ffffff` | 6.88:1 | AA |
| `#b30057` | `#f7f7f7` | 6.42:1 | AA |
| `#b30057` | `#222222` | 2.31:1 | fail |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0) 0%, color(srgb 0 0 0 / 0.6) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Airbnb Cereal VF | `--font-body` | webfont | 400, 700, 500 | All page typography, from navigation and body copy to headlines, links, and buttons. | DM Sans |

- **Airbnb Cereal VF:** Use a friendly sans-serif voice; headings are bold with slightly negative tracking, while body and navigation stay regular and sentence case.

### Type scale — Augmented Fourth (ratio ≈ 1.414, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 700 | 1.14 | -0.02em | — | Airbnb Cereal VF | Large, prominent mission or section display headlines. |
| h1 | 48px | 700 | 1.13 | -0.02em | — | Airbnb Cereal VF | Primary hero headline introducing free emergency housing. |
| h2 | 40px | 700 | 1.1 | -0.03em | — | Airbnb Cereal VF | Major section headings such as stories and global impact. |
| h3 | 26px | 500 | 1.15 | 0 | — | Airbnb Cereal VF | Card titles and secondary feature headings. |
| body | 18px | 400 | 1.56 | 0 | — | Airbnb Cereal VF | Introductory paragraphs and explanatory section copy. |
| caption | 14px | 400 | 1.29 | 0 | — | Airbnb Cereal VF | Compact supporting copy and image-card descriptions. |
| button | 14px | 500 | 1.29 | 0 | — | Airbnb Cereal VF | Donation and active-response action labels. |
| nav | 14px | 400 | 1.29 | 0 | — | Airbnb Cereal VF | Header and footer navigation links. |
| link | 18px | 500 | 1.33 | 0 | — | Airbnb Cereal VF | Story names and inline calls to action. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 4, 7, 8, 12, 14, 15, 16, 24, 32, 40, 48, 64, 80, 96 px.
- Section rhythm 80px · element gap 12px · card padding — · max content width —.

The page is a long, vertically paced homepage with a slim horizontal navigation and a centered hero. Content alternates between centered introductions, four-column card rows, split feature panels, and broad full-bleed media. Use a responsive grid: preserve generous side margins on desktop, then collapse cards into fewer columns on narrow screens. Section spacing feels comfortable rather than dense; align section headings consistently and let the video and impact map span wide. Exact maximum widths are not established by the measurements.

## Shape & elevation

- Radius: button `12px` · card `12px` · media `12px` · link `12px` · xs `8px` · sm `12px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s cubic-bezier(0.2, 0, 0, 1)` on interactive elements.

The interface is predominantly flat: no measured shadows define the page. Separate content through white space and occasional pale-gray bands rather than layered panels. Cards and media rely on rounded corners, while the active-responses control uses a thin dark outline; avoid adding decorative elevation.

## Imagery

Documentary-style photography and video show guests, hosts, disasters, and emergency stays. The hero media runs nearly full width and uses a dark gradient overlay for legible controls or captions. Story and category cards use rounded image crops with restrained text overlays. A world map and pink-tinted feature illustrations explain impact and service qualities; treat their colors as content-specific artwork, not the core brand palette.

## Components

### Header navigation

Airbnb.org wordmark sits at the left, with Give, Responses, and About links aligned right before the prominent magenta Donate now button.

### Mission hero

Centered bold headline and muted explanatory paragraph sit above wide video; preserve a large calm white field around the message.

### Category cards

Three rounded image cards introduce disaster, medical, and resettlement stays, each followed by a compact title and explanatory copy.

### Guest story cards

A four-card image row presents people helped; use photographic crops with legible white names and location details over darker image areas.

### Promise feature

A pale-gray split panel pairs a concise 100% promise message and donation action with a rounded illustrative image.

### Impact section

A two-column introduction pairs the global-impact heading with supporting statistics and an outlined View active responses button, followed by a wide map graphic.

### Donation CTA and footer

A vivid magenta donation banner uses white copy and a white action button; the footer returns to pale gray with simple grouped text links.

### Measured component styles

- **Primary button** (“Donate now”): background #b30057 · text #ffffff · radius 12px · padding 14px 24px · 500 16px Airbnb Cereal VF
- **Secondary button** (“View active responses”): transparent background · text #222222 · border 1px solid #222222 · radius 8px · padding 13px 23px · 500 16px Airbnb Cereal VF
- **Link** (“The Benn Family”): transparent background · text #ffffff · radius 0px · padding 0px · 500 18px Airbnb Cereal VF
- **Card** (“LA wildfires, US The Benn Family”): background #222222 · text #222222 · radius 12px · padding 0px · 400 14px Airbnb Cereal VF
- **Navigation item** (“Give Responses About Donate now”): transparent background · text #222222 · radius 0px · padding 0px · 400 14px Airbnb Cereal VF

## Do

- Use white space to give each mission story a clear pause.
- Set primary headlines in bold, near-black Cereal-style sans serif.
- Keep supporting copy muted and comfortably readable.
- Reserve magenta for donation actions and carefully chosen brand details.
- Use real human-centered photography and documentary video.
- Round image cards and media consistently with the measured treatment.

## Don't

- Do not make magenta a large, repeated background color throughout the page.
- Do not crowd sections together or compress the editorial rhythm.
- Do not replace documentary imagery with glossy product renders.
- Do not add shadows as a default card treatment.
- Do not use bright colors from illustrations as global interface colors.
- Do not make navigation or supporting copy compete with the mission headline.

## Agent prompt

Build a nonprofit page in the Airbnb.org visual style. Start with a clean Gallery White (#ffffff) canvas, Grounded Ink (#222222) headings and navigation, and Story Gray (#6a6a6a) supporting copy. Use Mission Magenta (#b30057) selectively for the main donation action; keep Quiet Mist (#f7f7f7) for subtle section or footer bands. Use a friendly sans-serif close to Airbnb Cereal VF, with bold, slightly tightly tracked headlines and regular, readable paragraph text. Structure the page as a spacious editorial sequence: centered mission hero, documentary media, image-led story or feature cards, impact content, clear donation banner, and grouped footer links. Keep media prominent, corners rounded, and surfaces mostly flat without decorative shadows. Adapt the grid responsively without losing generous breathing room.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | other | Long single-page flow: header, centered hero, full-width video, card grids, split feature panels, impact map, donation banner, and grouped footer. | mission-first introduction, story discovery, repeated donation actions, impact information | white editorial canvas, magenta primary CTA, rounded photo cards, alternating soft-gray bands |

## Source CSS custom properties (selected)

```css
--corner-radius-tiny4px-border-radius: 4px;
--corner-radius-small8px-border-radius: 8px;
--corner-radius-medium12px-border-radius: 12px;
--corner-radius-large16px-border-radius: 16px;
--corner-radius-xlarge20px-border-radius: 20px;
--corner-radius-xxlarge24px-border-radius: 24px;
--corner-radius-xxlarge28px-border-radius: 28px;
--corner-radius-xxxlarge32px-border-radius: 32px;
--elevation-high-box-shadow: 0 8px 28px rgba(0,0,0,0.28);
--elevation-high-border: 1px solid rgba(0,0,0,0.04);
--elevation-primary-box-shadow: 0 6px 20px rgba(0,0,0,0.2);
--elevation-primary-border: 1px solid rgba(0,0,0,0.04);
--elevation-secondary-box-shadow: 0 6px 16px rgba(0,0,0,0.12);
--elevation-secondary-border: 1px solid rgba(0,0,0,0.04);
--elevation-sharp-edge-background: rgba(0,0,0,0.08);
--elevation-tertiary-box-shadow: 0 2px 4px rgba(0,0,0,0.18);
--elevation-tertiary-border: 1px solid rgba(0,0,0,0.08);
--elevation-elevation0-box-shadow: 0px 0px 0px 1px #DDDDDD inset;
--elevation-elevation1-box-shadow: 0px 0px 0px 1px color-mix(in srgb,#000000 2%,transparent),0px 2px 4px 0px color-mix(in srgb,#000000 16%,transparent);
--elevation-elevation3-box-shadow: 0px 0px 0px 1px color-mix(in srgb,#000000 2%,transparent),0px 8px 24px 0px color-mix(in srgb,#000000 10%,transparent);
--motion-springs-fast-duration: 451.75438596491193ms;
--motion-springs-standard-duration: 583.7719298245607ms;
--motion-springs-medium-bounce-duration: 574.1228070175433ms;
--motion-springs-fast-bounce-duration: 449.12280701754327ms;
--motion-springs-slow-duration: 745.6140350877179ms;
--motion-springs-slow-bounce-duration: 762.2807017543847ms;
--palette-bg-primary: #FFFFFF;
--palette-bg-primary-disabled: #F2F2F2;
--palette-bg-primary-hover: #F7F7F7;
--palette-bg-primary-selected: #F7F7F7;
--palette-bg-primary-error: #FFF5F3;
--palette-bg-primary-core: #FF385C;
--palette-bg-primary-luxe: #222222;
--palette-bg-primary-plus: #92174D;
--palette-bg-primary-inverse: #222222;
--palette-bg-primary-inverse-hover: #3F3F3F;
--palette-bg-primary-inverse-disabled: #DDDDDD;
--palette-bg-primary-inverse-error: #C13515;
--palette-bg-primary-inverse-error-hover: #A3150F;
--palette-bg-secondary: #F7F7F7;
```

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