# Airbnb design system

> Captured from https://www.airbnb.com/ on 2026-10-05 by Brooks New Media (https://design.brooksnewmedia.com/styles/airbnb/). An independent analysis for reference: Airbnb and its marks belong to their owner. Learn from the system; don't copy the brand.

## Overview

Airbnb's homepage is a listing grid more than a brochure: a white ground, #222222 ink, #6c6c6c supporting text, and photos with generous rounded corners. The one strong brand moment is the red search button inside a floating, softly shadowed search bar. Type is compact, with 28px section titles and 13px card text in its own rounded sans.

- Theme: light
- Mood: light, warm, marketplace
- Category: Marketplace

## Colors

| Role | Hex | Use |
|---|---|---|
| Background | `#ffffff` | The page ground |
| Surface | `#dddddd` | Raised panels, bands and cards |
| Text | `#222222` | Primary ink, 15.9:1 on the background |
| Muted text | `#6c6c6c` | Supporting copy, 5.3:1 on the background |
| Accent | `#da1249` | Primary actions |
| Border | `#dddddd` | Hairlines and dividers |

Full palette, most used first: `#ffffff`, `#dddddd`, `#6c6c6c`, `#222222`, `#da1249`, `#c1c1c1`, `#f2f2f2`.

## Typography

- **Airbnb Cereal VF**: display and body, 100% of the text. Use Figtree. Cereal is Airbnb's proprietary typeface. Figtree is a friendly free alternative, not a match.

| Role | Family | Size | Weight | Line height | Tracking |
|---|---|---|---|---|---|
| Display | Airbnb Cereal VF | 28px | 700 | 1.43 | 0 |
| Heading | Airbnb Cereal VF | 20px | 600 | 1.2 | -0.009em |
| Body | Airbnb Cereal VF | 13px | 500 | 1.23 | 0 |
| Small | Airbnb Cereal VF | 12px | 400 | 1.33 | 0 |

Sizes in use, largest first: 28px, 20px, 18px, 14px, 13px, 12px, 11px.

## Spacing

No single base unit: the values below are what the page repeats.
Values in use: 2px, 6px, 8px, 10px, 12px, 15px, 24px, 44px, 48px.

## Shape

Corner radii, smallest first: 8px, 20px, 32px, pill (9999px).

Shadows, most used first:

- `color(srgb 0 0 0 / 0.02) 0px 0px 0px 1px, color(srgb 0 0 0 / 0.04) 0px 2px 6px 0px, color(srgb 0 0 0 / 0.1) 0px 4px 8px 0px`
- `rgba(0, 0, 0, 0.5) 0px -6px 15px 0px, rgba(0, 0, 0, 0.08) 0px 4px 4px 0px, rgba(0, 0, 0, 0.18) 0px 12px 15px 0px`
- `rgba(218, 218, 218, 0.6) 0px 0.5px 1px 0px, rgba(0, 0, 0, 0.12) 0px -0.502px 1.004px 0px, rgba(0, 0, 0, 0.04) 0px -1.5px 3.5px 0px, rgba(0, 0, 0, 0.05) 0px 3px 5px 0px, rgba(0, 0, 0, 0.2) 0px 0.75px 1px 0px inset, rgba(34, 34, 34, 0.6) 0px -0.5px 5px 1px inset, rgba(0, 0, 0, 0.16) 0.502px 0.5px 2px 0px inset, rgba(0, 0, 0, 0.12) 0px -3px 7px 0px inset, rgba(0, 0, 0, 0.05) 0.502px 2px 4px 0px inset, rgba(0, 0, 0, 0.04) 1.004px 4px 4px 0px inset, rgba(184, 72, 155, 0.2) 0px -3px 7px 0px inset`
- `rgba(0, 0, 0, 0.16) 0px 2px 2px 0px, rgba(255, 255, 255, 0.04) 1px 1.5px 3px 0px inset, rgba(255, 255, 255, 0.04) -1px 1.25px 3px 0px inset, rgba(255, 56, 92, 0.3) 0px -1px 3px 0px inset, rgba(0, 0, 0, 0.16) 0px -1px 2px 0px inset`

## Components

No repeated button or card treatment was found above the fold.

## Do

- Round photos generously, around 20px.
- Keep text small and dark grey so the photos carry the page.
- Spend the brand red on the single most important action.

## Don't

- Use the red for links or headings.
- Crop photos with square corners.
- Lead with a large marketing headline above the grid.

## CSS variables

```css
:root {
  --color-background: #ffffff;
  --color-surface: #dddddd;
  --color-text: #222222;
  --color-text-muted: #6c6c6c;
  --color-accent: #da1249;
  --color-border: #dddddd;
  --font-display: "Airbnb Cereal VF", "Figtree", system-ui, sans-serif;
  --text-display: 28px;
  --weight-display: 700;
  --font-heading: "Airbnb Cereal VF", "Figtree", system-ui, sans-serif;
  --text-heading: 20px;
  --weight-heading: 600;
  --font-body: "Airbnb Cereal VF", "Figtree", system-ui, sans-serif;
  --text-body: 13px;
  --weight-body: 500;
  --font-small: "Airbnb Cereal VF", "Figtree", system-ui, sans-serif;
  --text-small: 12px;
  --weight-small: 400;
  --space-1: 2px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 15px;
  --space-7: 24px;
  --space-8: 44px;
  --space-9: 48px;
  --radius-1: 8px;
  --radius-2: 20px;
  --radius-3: 32px;
  --radius-4: 9999px;
}
```

## Notes for AI coding tools

- Start from the CSS variables above and build components from them, not from new values.
- Use the font substitutes listed. Never embed a commercial or platform-only typeface without a license.
- Keep body text at 4.5:1 contrast or better against its ground.
- These values were measured from the live page at 1440x900; the site may have changed since 2026-10-05.