# Airbnb — Design Reference

> Photos first, one coral button to search

**Theme:** light · **Measured from:** airbnb.com (English, 1440 px)

Airbnb is a white shop window for photographs. The interface steps back: charcoal `#222222` text in a rounded geometric sans (Airbnb Cereal), gray `#6c6c6c` metadata, hairline `#dddddd` dividers and almost no chrome. Everything soft is round — listing photos at 20px, a floating pill search bar, circular icon buttons, pill badges. The only saturated control on the screen is the circular raspberry-red search button (`#da1249`), echoed by the coral Rausch logo (`#ff385c`). Small 3D illustrated icons (globe, house, bell, balloon) give the category tabs personality. The rest of the page is a grid of horizontal carousels of listing cards.

## Colors

| Name | Hex | Role |
|------|-----|------|
| Search Red | `#da1249` | Circular search button — the only colored control |
| Rausch | `#ff385c` | Logo and brand accent |
| Hof | `#222222` | Headings, listing titles, nav, icons — never pure black |
| Foggy | `#6c6c6c` | Subtitles, dates, prices, placeholders |
| Bobo | `#b0b0b0` | Disabled arrows, inactive controls |
| Deco | `#dddddd` | Header border, search-field dividers, photo placeholders |
| Interactive Gray | `#f2f2f2` | Circular icon buttons |
| Faint | `#f7f7f7` | Bottom of the header gradient, hover fills |
| White | `#ffffff` | Canvas, search bar, badges, carousel arrows |

**Header gradient:** the top band fades from white to a barely gray `#f8f8f8` (`linear-gradient(#fff 39.9%, #f8f8f8 100%)`), then ends on a 1px Deco line. It is the only gradient.

## Typography

**Airbnb Cereal VF** is the only family. Substitute: **DM Sans** (400/500/600) from Google Fonts.

- Hierarchy is small and dense: the largest text on the home page is a 20px section title.
- **600** for section titles and badges, **500** for listing titles, nav and field labels, **400** for metadata.
- Section titles track slightly tight (`-0.18px`); everything else is normal.

| Role | Size | Weight | Line height | Letter spacing |
|------|------|--------|-------------|----------------|
| Section title | 20px | 600 | 1.2 | -0.18px |
| Body | 14px | 400 | 1.29 | 0 |
| Nav | 14px | 500 | 1.29 | 0 |
| Card title | 13px | 500 | 1.23 | 0 |
| Meta | 12px | 400 | 1.33 | 0 |
| Field label | 12px | 500 | 1.33 | 0 |
| Badge | 11px | 600 | 1.18 | 0 |

## Shape and spacing

- **Listing photos:** 20px radius.
- **Search bar:** full pill (32px radius on a ~64px bar).
- **Badges:** 14px radius pills.
- **Icon buttons and search button:** circles (50%).
- **Base unit:** 8px. Scale: 4, 8, 12, 16, 24, 32, 48, 80.
- **Content width:** about 1328px, with ~48px side gutters at 1440.
- **Section gap:** about 48px between carousels.

## Components

### Search button (primary)
Circle, Search Red `#da1249` fill, white magnifier icon, about 48px across, sitting inside the right end of the search bar. No text label.

### Icon button (secondary)
Circle, Interactive Gray `#f2f2f2` fill, Hof icon, about 40px across: account and menu buttons in the header. Carousel arrows are smaller white circles with a hairline ring; the disabled one fades to Bobo.

### Navigation
Logo (Rausch mark + "airbnb" wordmark) left. Centered category tabs, each a small 3D illustrated icon plus a 14px label (All, Homes, Hotels, Activities, Services); the active tab is Hof with a 2px Hof underline, inactive tabs are Foggy. Right: "Become a host" as plain text and two circular icon buttons.

### Search bar
White pill, ~64px tall, shadow `0 0 0 1px rgba(0,0,0,.02), 0 2px 6px rgba(0,0,0,.04), 0 4px 8px rgba(0,0,0,.1)`. Three segments (Where / When / Who) split by 1px Deco dividers; each has a 12px 500 Hof label above a 14px Foggy placeholder. Search button at the right end.

### Listing card
No container — just a ~180×170 photo with 20px radius, then text below. Top-left of the photo: a white "Guest favorite" pill badge (11px 600 Hof). Top-right: a heart outline in white over a translucent dark fill. Below: title in 13px 500 Hof, dates and "R$700 total · ★ 5.0" in 12px Foggy.

### Carousel row
20px 600 section title followed by a small circular "→" button, a 14px Foggy subtitle beneath, prev/next arrow circles at the right edge, then seven listing cards in a row with ~12px gaps.

## Do

- Let photos carry the page; keep the UI around them charcoal, gray and white.
- Round everything soft: 20px photos, pill search, circle buttons.
- Keep the search button the only saturated control.
- Use 500/600 weights at small sizes instead of large headings.
- Show prices and ratings in one gray meta line with "·" separators.
- Use subtle multi-layer shadows only on floating elements (search bar, badges).

## Don't

- Don't use Rausch or Search Red for text or large backgrounds.
- Don't add borders or backgrounds around listing cards.
- Don't use square corners on photos.
- Don't use oversized display headlines on browsing pages.
- Don't use pure black text; use Hof `#222222`.
- Don't add heavy drop shadows to cards.

## Layout

A full-width header band (white fading to faint gray) holds the nav row and the centered floating search bar, closed by a 1px Deco line. Below, stacked carousel rows — "Check out homes in Maceio", "Homes in Porto de Galinhas", "Places to stay in Fortaleza" — each a title, subtitle and a row of seven listing cards. The page is a browse grid, not a marketing narrative.

## Agent prompt guide

- Text: `#222222` · Secondary: `#6c6c6c` · Disabled: `#b0b0b0`
- Canvas: `#ffffff` · Icon buttons: `#f2f2f2` · Dividers: `#dddddd`
- Action: `#da1249` · Logo: `#ff385c`

Example prompts:

1. "Search bar: white pill, height 64px, radius 32px, shadow 0 0 0 1px rgba(0,0,0,.02), 0 2px 6px rgba(0,0,0,.04), 0 4px 8px rgba(0,0,0,.1); three segments Where/When/Who with 12px DM Sans 500 #222222 labels over 14px #6c6c6c placeholders, 1px #dddddd dividers, and a 48px #da1249 circular search button with a white magnifier at the right."
2. "Listing card: photo 180x170 with 20px radius, white 'Guest favorite' pill badge (11px 600 #222222) top-left, heart outline top-right; below, title 13px 500 #222222, then dates and '$700 total · ★ 5.0' in 12px #6c6c6c."
3. "Carousel header: 'Homes in Porto de Galinhas' in DM Sans 600 20px, letter-spacing -0.18px, #222222, followed by a small circular → button; 14px #6c6c6c subtitle below; prev/next white circle arrows aligned right."

## Quick start

### CSS variables

```css
:root {
  /* Colors */
  --color-search-red: #da1249;
  --color-rausch: #ff385c;
  --color-hof: #222222;
  --color-foggy: #6c6c6c;
  --color-bobo: #b0b0b0;
  --color-deco: #dddddd;
  --color-interactive-gray: #f2f2f2;
  --color-faint: #f7f7f7;
  --color-white: #ffffff;

  /* Fonts */
  --font-sans: 'Airbnb Cereal VF', 'DM Sans', ui-sans-serif, system-ui, sans-serif;

  /* Type scale */
  --text-section-title: 20px;
  --text-section-title--line-height: 1.2;
  --text-section-title--letter-spacing: -0.18px;
  --text-section-title--font-weight: 600;
  --text-body: 14px;
  --text-body--line-height: 1.29;
  --text-body--font-weight: 400;
  --text-nav: 14px;
  --text-nav--line-height: 1.29;
  --text-nav--font-weight: 500;
  --text-card-title: 13px;
  --text-card-title--line-height: 1.23;
  --text-card-title--font-weight: 500;
  --text-meta: 12px;
  --text-meta--line-height: 1.33;
  --text-meta--font-weight: 400;
  --text-field-label: 12px;
  --text-field-label--line-height: 1.33;
  --text-field-label--font-weight: 500;
  --text-badge: 11px;
  --text-badge--line-height: 1.18;
  --text-badge--font-weight: 600;

  /* Radius */
  --radius-buttons: 50%;
  --radius-inputs: 32px;
  --radius-cards: 20px;
  --radius-tags: 14px;

  /* Spacing */
  --spacing: 8px;

  /* Shadows */
  --shadow-search: 0 0 0 1px rgba(0, 0, 0, 0.02), 0 2px 6px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.1);
  --shadow-elevated: 0 0 0 1px rgba(0, 0, 0, 0.02), 0 8px 24px rgba(0, 0, 0, 0.1);

  /* Layout */
  --container-page: 1328px;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-search-red: #da1249;
  --color-rausch: #ff385c;
  --color-hof: #222222;
  --color-foggy: #6c6c6c;
  --color-bobo: #b0b0b0;
  --color-deco: #dddddd;
  --color-interactive-gray: #f2f2f2;
  --color-faint: #f7f7f7;
  --color-white: #ffffff;

  /* Fonts */
  --font-sans: 'Airbnb Cereal VF', 'DM Sans', ui-sans-serif, system-ui, sans-serif;

  /* Type scale */
  --text-section-title: 20px;
  --text-section-title--line-height: 1.2;
  --text-section-title--letter-spacing: -0.18px;
  --text-section-title--font-weight: 600;
  --text-body: 14px;
  --text-body--line-height: 1.29;
  --text-body--font-weight: 400;
  --text-nav: 14px;
  --text-nav--line-height: 1.29;
  --text-nav--font-weight: 500;
  --text-card-title: 13px;
  --text-card-title--line-height: 1.23;
  --text-card-title--font-weight: 500;
  --text-meta: 12px;
  --text-meta--line-height: 1.33;
  --text-meta--font-weight: 400;
  --text-field-label: 12px;
  --text-field-label--line-height: 1.33;
  --text-field-label--font-weight: 500;
  --text-badge: 11px;
  --text-badge--line-height: 1.18;
  --text-badge--font-weight: 600;

  /* Radius */
  --radius-buttons: 50%;
  --radius-inputs: 32px;
  --radius-cards: 20px;
  --radius-tags: 14px;

  /* Spacing */
  --spacing: 8px;

  /* Shadows */
  --shadow-search: 0 0 0 1px rgba(0, 0, 0, 0.02), 0 2px 6px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.1);
  --shadow-elevated: 0 0 0 1px rgba(0, 0, 0, 0.02), 0 8px 24px rgba(0, 0, 0, 0.1);

  /* Layout */
  --container-page: 1328px;
}
```

---

*Measured from https://www.airbnb.com/ on 2026-10-28 by Faundr. Inspired by Airbnb; not its official design system and not affiliated with Airbnb.*