# Airbnb · Design system migration spec

> Source: https://www.airbnb.com  ·  Curated by OpenDesign  ·  en

> A classic example of a modern, consumer-focused SaaS interface that balances high-quality imagery with a clean, trust-building design system.

## 1. Identity DNA

The identity is that of a global, peer-to-peer marketplace, a digital commons for accommodation. It functions as a welcoming intermediary, a system built on trust where the interface itself recedes to foreground the unique character of each listing. This is a marketplace whose architecture prioritizes the clarity of its transactions and the warmth of its connections.

**One-liner:** A clean, trust-forward travel marketplace UI with a photographic focus.
**Keywords:** travel · accommodation · marketplace · community
**Analogy:** A global community marketplace for unique stays and experiences.

## 2. Color

The color system is built on a foundation of high-contrast neutrals—a clean white canvas with light gray surfaces. A single, vibrant pink is reserved as the primary action color, used with disciplined restraint to guide attention without visual competition.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F2F2F2` | card background |
| `--bg-quiet` | `#DDDDDD` | quiet area |
| `--ink` | `#222222` | body text |
| `--ink-soft` | `#6A6A6A` | secondary text |
| `--muted` | `#C1C1C1` | placeholder |
| `--accent` | `#FF385C` | single accent |
| `--line` | `rgba(34, 34, 34, 0.02)` | divider |

**Color principle:** High-contrast neutral base with a single vibrant brand accent.

The governing principle is that color serves function; it is a signal, not decoration.

## 3. Typography

The typographic voice is clean and neutral, employing a modern sans-serif that prioritizes legibility at every scale. Its category is purely functional, supporting the system's role as a scalable information platform rather than an expressive editorial one.

- **Display:** humanist-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 28px | 1.2 | 700 | 0px | Section headers |
| heading | 16px | 1.2 | 700 | 0px | Card titles and labels |
| body | 14px | 1.43 | 400 | 0px | Primary text and navigation |
| caption | 12px | 1.33 | 400 | 0px | Metadata and descriptions |

## 4. Spacing

The interface breathes according to a standard 4px grid, establishing a consistent and predictable spatial rhythm throughout.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 8px vertical rhythm with generous padding.

## 5. Surfaces

Depth is conveyed through extreme subtlety, using a single, soft shadow value to lift components just above the base surface. Borders are equally minimal, defined by a near-invisible line that separates rather than divides.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - rgba(0, 0, 0, 0.04) 0px 2px 6px 0px
  - rgba(0, 0, 0, 0.1) 0px 4px 8px 0px
  - rgba(0, 0, 0, 0.1) 0px 8px 24px 0px
- **Borders:** 1px solid rgba(0, 0, 0, 0.08)

## 6. Layout

The skeletal structure is a responsive, card-based grid designed for high-density information. It is anchored by a prominent, floating search component at the top, with content organized into horizontally scrollable carousels that prioritize image-forward discovery.

- **Container max:** 1120px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-width header with a central search bar and a multi-column card grid.

## 7. Motion & Interaction

Motion is strictly functional, serving to smooth content transitions rather than to decorate. Its philosophy is to create a sense of physical continuity—horizontal scrolls for carousels and subtle fades for lazy-loaded images—that reinforces the interface's material logic.

- **Durations:** micro 100ms · small 250ms · medium 400ms
- **Easing:** `cubic-bezier(0.2, 0, 0, 1)`
- **Patterns:**
  - Transform and box-shadow transitions on hover.
  - Smooth slide transitions for carousels.

- **Hover:** Subtle elevation change via box-shadow or opacity.
- **Click:** Scale transform on primary buttons and cards.
- **Transition:** All properties over 250ms.
- **Keyboard:** Standard tab focus with visible outlines.

## 8. Voice & Don'ts

The editorial voice is inviting, trustworthy, and direct. It favors clear, descriptive nouns for headlines and action-oriented yet friendly calls-to-action, speaking plainly to facilitate a global audience.

- **Tone:** Friendly, inviting, and professional.
- **Headline style:** Direct, clear, and conversational.
- **CTA style:** Action-oriented and concise (e.g., 'Start your search').
- **Avoid:** Technical jargon / Overly formal language / Aggressive sales tactics

### Don'ts
- ❌ Don't use a dark background — screenshot shows a predominantly white and light gray layout.
- ❌ Don't use a serif font — screenshot shows a clean, modern sans-serif typeface throughout.
- ❌ Don't use a complex, multi-colored palette — screenshot shows a mostly monochromatic palette with a single pink accent.
- ❌ Don't use sharp, square corners on cards — screenshot shows generously rounded corners on images and buttons.
- ❌ Don't use heavy, solid borders — screenshot shows very light, subtle borders or box shadows.
- ❌ Don't use large, dense blocks of text — screenshot shows ample white space and short, scannable text elements.

The system deliberately avoids heavy shadows, multiple accent colors, decorative typography, and complex grid overlays, maintaining a disciplined focus on clarity and trust.

## System Prompt (paste into AI tool)

```
This is a refined, clean travel marketplace UI with a focus on photography. The palette is dominated by white (#FFFFFF) and light grays (#F2F2F2, #DDDDDD) with a single high-chroma pink accent (#FF385C). The typography is a friendly humanist-sans-serif (Airbnb Cereal). Critical donts: don't use dark backgrounds, don't use serif fonts, and don't clutter the interface with heavy borders or dense text blocks. The layout uses generous spacing and rounded corners to create a welcoming, premium feel.
```
