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

# Airbnb · Design System

> A calm, searchable guide to places to stay

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

Airbnb’s homepage pairs a compact travel search header with a large, pale inspiration directory. Restrained neutrals, clear text hierarchy, and dense destination links make browsing feel orderly rather than promotional.

## North star

Keep the search and browsing structure exceptionally clear, using quiet neutrals and strong typographic hierarchy instead of decorative colour.

## Overview

The page uses a near-white canvas and a slightly distinct pale-gray inspiration band to keep attention on navigation and destination names rather than decorative colour. Deep charcoal anchors headings and primary text; softer gray handles secondary labels and links, while thin gray rules divide search fields and category navigation. The visible brand mark and search action supply the strongest colour accents, but the measured page palette is otherwise neutral. Airbnb Cereal VF provides a friendly, rounded sans-serif voice, with bold headings and regular-weight directory text. The header is compact and centered around a pill-shaped search control; below it, a broad, left-aligned inspiration section lays out destination links in evenly spaced columns. Small destination labels form a dense but scannable directory. Images are not prominent in the captured viewport, so the visual identity depends on whitespace, typography, subtle surfaces, and consistent alignment.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Canvas | `#f7f7f7` | `--color-soft-canvas` | surface | Pale page and section background, especially the destination inspiration directory. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Header, search surface, and clean page areas that contrast gently with the gray band. |
| Charcoal Ink | `#222222` | `--color-charcoal-ink` | neutral | Headings, primary labels, navigation text, and destination names. |
| Quiet Gray | `#6c6c6c` | `--color-quiet-gray` | semantic | Secondary destination labels, muted links, and inactive category navigation. |
| Divider Gray | `#dddddd` | `--color-divider-gray` | semantic | Fine separators around navigation and search controls. |
| Footer Line | `#ebebeb` | `--color-footer-line` | neutral | Subtle footer boundary; a supporting hairline rather than a defining brand colour. |

### Semantic aliases

`--color-canvas` → `#f7f7f7` (Soft Canvas) · `--color-surface` → `#ffffff` (Gallery White) · `--color-text` → `#222222` (Charcoal Ink) · `--color-text-muted` → `#6c6c6c` (Quiet Gray) · `--color-border` → `#dddddd` (Divider Gray)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#222222` | `#f7f7f7` | 14.85:1 | AAA |
| `#222222` | `#ffffff` | 15.91:1 | AAA |
| `#6c6c6c` | `#f7f7f7` | 4.9:1 | AA |
| `#6c6c6c` | `#ffffff` | 5.25:1 | AA |

### Gradients

- `linear-gradient(in srgb, rgb(255, 255, 255) 39.9%, color(srgb 0.972471 0.972471 0.972471) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Airbnb Cereal VF | `--font-body` | webfont | 400, 500, 700 | Used throughout navigation, search fields, headings, destination listings, links, and buttons. | Nunito Sans |

- **Airbnb Cereal VF:** Friendly sans-serif; use measured regular, medium, and bold weights. Keep casing natural and tracking neutral.

### Type scale — Major Third (ratio ≈ 1.26, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 28px | 700 | 1.43 | 0 | — | Airbnb Cereal VF | Primary page heading, when present. |
| h2 | 22px | 500 | 1.18 | -0.02em | — | Airbnb Cereal VF | Inspiration section heading. |
| h3 | 21px | 700 | 1.43 | 0 | — | Airbnb Cereal VF | Subsection or grouped content heading. |
| body | 14px | 400 | 1.29 | 0 | — | Airbnb Cereal VF | Destination labels and supporting page text. |
| caption | 12px | 500 | 1.33 | 0 | — | Airbnb Cereal VF | Compact search labels and small supporting metadata. |
| button | 14px | 500 | 1.29 | 0 | — | Airbnb Cereal VF | Search action and interactive controls. |
| nav | 14px | 500 | 1.29 | 0 | — | Airbnb Cereal VF | Top navigation and category tabs. |
| link | 14px | 400 | 1.43 | 0 | — | Airbnb Cereal VF | Destination directory links and secondary navigation. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 4, 5, 6, 8, 10, 11, 12, 15, 16, 18, 20, 24, 32, 35, 48 px.
- Section rhythm 48px · element gap 16px · card padding — · max content width —.

Use a compact full-width header with the brand at left, category navigation centered, and account actions at right; center the search control beneath it. The inspiration band spans the available page width, with its heading and category tabs aligned to the left. Organize destination links into several evenly spaced columns, each with a city label above a muted rental-type label. Preserve comfortable gaps between section elements while keeping the directory itself information-dense. Do not invent a fixed maximum width; match the screenshot’s broad, fluid composition.

## Shape & elevation

- Radius: button `8px` · nav `32px` · xs `4px` · sm `8px` · md `12px` · lg `32px` · pill `9999px`
- Shadow `md` (nav): `color(srgb 0 0 0 / 0.02) 0px 0px 0px 1px, color(srgb 0 0 0 / 0.1) 0px 8px 24px 0px`
- Motion: standard transition `0.2s cubic-bezier(0.2, 0, 0, 1)` on interactive elements.

Keep most surfaces visually flat, separated by white and pale-gray backgrounds or fine borders. The search bar is the main layered element, with a subtle shadow that lifts it from the header. Use restrained rounding on controls and avoid strong card shadows or stacked panels.

## Imagery

Imagery is not a defining feature of the captured viewport: the inspiration directory is text-led, and destination links carry the content. Small illustrated category icons appear in the top navigation, while the brand mark and search icon provide compact visual signals. If adding imagery to a related page, keep it subordinate to browsing structure and avoid letting decorative visuals disrupt the calm, neutral composition.

## Components

### Top navigation

White header with brand mark at left, illustrated category icons and labels centered, and host/account/menu actions at right.

### Pill search bar

Centered rounded search surface split into Where, When, and Who fields, with thin separators and a circular search action.

### Inspiration section

Wide pale-gray band with a bold section heading, horizontal category tabs, and a fine rule under the tab row.

### Category tabs

Compact text labels; the selected category uses darker text and a short underline, while inactive choices use muted gray.

### Destination directory

Multiple aligned columns of city links, each pairing a darker destination name with a muted accommodation type.

### Utility actions

Small host, profile, and menu controls sit apart from the main browsing navigation and remain visually quiet.

### Measured component styles

- **Primary button**: background #f2f2f2 · text #222222 · radius 50% · padding 0px · 400 14px Airbnb Cereal VF
- **Link** (“Dallas Monthly Rentals”): transparent background · text #6c6c6c · radius 0px · padding 0px · 400 14px Airbnb Cereal VF
- **Input**: transparent background · text #222222 · radius 0px · padding 0px · 500 14px Airbnb Cereal VF
- **Navigation item** (“All All Homes Homes Experiences Experien”): transparent background · text #222222 · radius 0px · padding 0px · 400 14px Airbnb Cereal VF

## Do

- Use white and pale gray to distinguish adjacent page regions.
- Set primary text in #222222 and secondary labels in #6c6c6c.
- Keep destination names and rental types on separate lines.
- Align directory columns and category tabs consistently.
- Make the search bar the header’s clearest interactive surface.
- Use fine separators instead of heavy outlines.

## Don't

- Do not introduce unmeasured palette colours as broad page surfaces.
- Do not turn the destination directory into image-heavy cards.
- Avoid oversized display typography or decorative tracking.
- Do not use high-contrast shadows across every component.
- Do not crowd search fields together or remove their labels.
- Avoid bright, filled backgrounds for inactive navigation.

## Agent prompt

Build a new travel browsing page in Airbnb’s calm, text-led visual style. Use #ffffff for the header and clean surfaces, #f7f7f7 for a softly differentiated content band, #222222 for headings and primary labels, and #6c6c6c for secondary text; reserve #dddddd and #ebebeb for subtle dividers. Set all text in a friendly sans-serif close to Airbnb Cereal VF, with clear regular, medium, and bold hierarchy. Create a compact top navigation and a centered, pill-shaped search control with labeled fields and separators. Below, use a broad left-aligned section heading, category tabs with a simple active underline, and an evenly aligned multi-column directory. Keep the page airy around section boundaries but dense and scannable within link lists. Use restrained borders, gentle rounding, and only subtle elevation on the search surface.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | category-nav | Compact header and centered search above a wide inspiration band with tabs and multi-column destination links. | destination search, category selection, browse by destination | pill search bar, active-tab underline, muted link labels, multi-column directory |

## 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;
--edge-effects-brand-sharp-after-box-shadow: inset 1px 1px 3px 0 rgba(255,255,255,0.12),inset -1px 1px 3px 0 rgba(255,255,255,0.16);
--edge-effects-brand-sharp-after-mix-blend-mode: plus-lighter;
--edge-effects-brand-sharp-before-mix-blend-mode: normal;
--edge-effects-brand-soft-after-box-shadow: inset 1px 2px 4px 0 rgba(255,255,255,0.12);
--edge-effects-brand-soft-after-mix-blend-mode: plus-lighter;
--edge-effects-brand-soft-before-box-shadow: inset -1px 2px 4px 0 rgba(255,255,255,0.12),inset 0 -1px 4px 0 rgba(0,0,0,0.24),0 2px 2px 0 rgba(205,13,75,0.20);
--edge-effects-brand-soft-before-mix-blend-mode: normal;
--edge-effects-sharp-after-box-shadow: inset -0.5px 0.5px 2px rgba(255,255,255,0.04),inset 0.5px 0.5px 2px rgba(255,255,255,0.04);
--edge-effects-sharp-before-box-shadow: inset 0 -1px 1px rgba(0,0,0,0.06);
--edge-effects-soft-after-box-shadow: inset -1px 1px 3px rgba(255,255,255,0.04),inset 1px 1.25px 3px rgba(255,255,255,0.04);
--edge-effects-soft-before-box-shadow: inset 0 -1.25px 3px rgba(0,0,0,0.14);
--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;
```

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