# Airbnb — Marketing site Design Spec

> Source: airbnb.com (live DOM, computed styles + the published **DLS** `--palette-*` / `--elevation-*` token set), 2026-07-19.
> Coverage: signed-out home / search landing (AU locale). Logged-in trips and host surfaces not captured (needs login).
> Note: the brand coral is **Rausch `#FF385C`**, not the older `#FF5A5F` — the queue hint was out of date.

## 1. Visual Theme & Atmosphere

Airbnb's home page is a photography grid with almost invisible chrome. The canvas is white, the ink is a soft `#222222` (never pure black), and the greys run a warm-neutral named ladder — `foggy`, `bobo`, `deco`, `bebe`, `faint` — that gives the interface its characteristically soft, unaggressive feel. Rausch coral `#FF385C` is used with real discipline: the wordmark and the search-submit circle, and essentially nothing else. The signature component is the **search pill** — an 850×66 fully-rounded bar (32px radius) split into Where / When / Who segments with a coral circular button on the end — which floats over a hairline-separated header. Type is Airbnb Cereal VF throughout, and notably *small*: listing titles run at 14/20 regular, so the photographs, not the text, set the hierarchy. Feels: soft, warm, photographic, unfussy.

## 2. Color Palette & Roles

### Named brand palette (DLS)

| Token | Hex | Role / usage |
|---|---|---|
| `palette-rausch` | `#FF385C` | THE brand coral — wordmark, search submit |
| `palette-product-rausch` | `#E00B41` | Product-surface variant |
| `palette-hof` | `#222222` | The ink ("House of Fun") |
| `palette-black` | `#000000` | Hover ink only |
| `palette-foggy` | `#6A6A6A` | Secondary text |
| `palette-bobo` | `#B0B0B0` | Tertiary |
| `palette-deco` | `#DDDDDD` | Hairlines, disabled |
| `palette-bebe` | `#EBEBEB` | Faint fill |
| `palette-faint` | `#F7F7F7` | Hover / secondary background |
| `palette-white` | `#FFFFFF` | Canvas |
| `palette-arches` | `#C13515` | Error |
| `palette-arches2` | `#B32505` | Error deep |
| `palette-arches12` | `#FFF8F6` | Error wash |
| `palette-capiz` | `#F7F6F2` | Warm neutral wash |
| `palette-hapuna` | `#F5F1EA` | Warm sand wash |
| `palette-spruce` | `#008A05` | Success |
| `palette-ondo` | `#E07912` | Warning |
| `palette-mykonou5` | `#428BFF` | Info blue |
| `palette-plus` | `#92174D` | Airbnb Plus sub-brand |
| `palette-luxe` | `#460479` | Luxe sub-brand |

### Text

| Token | Hex |
|---|---|
| `text-primary` | `#222222` |
| `text-primary-hover` | `#000000` |
| `text-primary-inverse` | `#FFFFFF` |
| `text-primary-disabled` | `#DDDDDD` |
| `text-secondary` | `#6C6C6C` |
| `text-secondary-disabled` | `#DDDDDD` |
| `text-fill-disabled` | `#C1C1C1` |
| `text-primary-error` / `secondary-error` | `#C13515` |
| `text-*-error-hover` | `#A3150F` |
| `text-legal` | `#318CF7` |
| `text-link-disabled` | `#929292` |
| `text-focused` | `#3F3F3F` |
| `text-material-disabled` | `rgba(0,0,0,0.24)` |

### Backgrounds

`bg-primary` `#FFFFFF` · `bg-primary-hover` / `-disabled` / `-selected` `#F7F7F7` · `bg-primary-error` `#FFF5F3` · `bg-primary-core` `#FF385C` · `bg-primary-plus` `#92174D` · `bg-primary-luxe` `#460479` · `bg-secondary` `#F7F7F7` · `bg-tertiary` `#8C8C8C` · `bg-tertiary-hover` `#6C6C6C` · `bg-tertiary-disabled` `#EBEBEB` · `bg-tertiary-core` `#DA1249`

### Borders

`border-primary` `#222222` (hover `#000000`, disabled `#DDDDDD`, inverse `#FFFFFF`) · `border-secondary` `#8C8C8C` (hover/selected `#222222`, disabled `#EBEBEB`, error `#C13515`) · `border-tertiary` `#DDDDDD` (hover `#000000`, selected `#222222`, error `#C13515` / hover `#A3150F`) · `border-quarternary` `#8C8C8C`

**Rules.** Rausch is for the wordmark and the search submit — it is not a general CTA colour, and the primary button is `#222222`. Every neutral is warm; `#000000` appears only as a hover ink. The sub-brand colours (Plus, Luxe) never mix with the core surface.

## 3. Typography Rules

- One family: `"Airbnb Cereal VF", Circular, sans-serif` — a soft geometric variable face, no serif, no mono.

| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Page h1 | 28/40.04 | 700 | normal |
| Section h2 (feature) | 22/26 | 500 | -0.44px |
| Footer h2 | 21/30.03 | 700 | normal |
| Section h2 / listing title | 14/20.02 | 400 | normal |
| UI label / h3 | 14/18 | 500 | normal |
| Secondary meta | 14/20.02 | 400 | normal (`#6C6C6C`) |

Patterns: the scale is unusually **flat and small** — most of the page runs at 14px, and the largest routine role is 28px. Weight does the work instead: 400 for listing copy, 500 for UI labels, 700 for the few true headings. Tracking is normal everywhere except the one 22px feature heading (-0.44px). Sentence case throughout; no uppercase eyebrows.

## 4. Component Stylings

**Nav** — 96px, transparent over white, separated by a hairline rather than a shadow. Coral wordmark, a centered All / Homes / Experiences / Services tab set with emoji-style icons and a `#222222` underline on the active tab, then "Become a host" plus globe and menu icon buttons (50% radius).

**Signature search pill** — 850×66, **32px radius**, white, divided into Where / When / Who segments by hairlines, each with a 14/18 500 label above a 14/20 400 `#6C6C6C` placeholder, closed by a **Rausch `#FF385C` circular submit** button. It carries `elevation2`-class shadow and expands on focus.

**Buttons** — no filled button appeared in the signed-out landing chrome (the page is navigational), so heights and padding for the standard variants are **not captured**. Token-level recipes are published:

| Variant | Fill | Text | Border |
|---|---|---|---|
| Primary | `#222222` | `#FFFFFF` | `border-primary #222222` (hover `#000000`) |
| Primary core | `#FF385C` | `#FFFFFF` | — |
| Secondary | `#FFFFFF` | `#222222` | `border-secondary #8C8C8C` (hover `#222222`) |
| Disabled | `#F7F7F7` | `#DDDDDD` | `#DDDDDD` |

**Listing card** — a rounded photograph (large radius) carrying a `#FFFFFF`-on-dark "Guest favourite" badge pill top-left and a heart icon top-right, with 14/20 title, 14/20 `#6C6C6C` dates, and a price + star rating line. No card border, no card shadow — the photo *is* the card.

**Icon buttons** — 50% radius; carousel arrows are circular with a hairline.

## 5. Layout Principles

A header band (nav + search pill) over a hairline, then a stack of horizontally-scrolling carousels, each titled at 14/20 with an inline arrow link and prev/next circular controls at the right. Cards sit in a 7-across grid at desktop width with generous gutters. Published corner-radius scale: `4 / 8 / 12 / 16 / 20 / 24 / 28px` and larger; observed radii include `8`, `20`, `32` (search pill), `50`, `100px`, `50%`, and asymmetric `1.5px` segment caps.

## 6. Depth & Elevation

Radius scale (published): `tiny 4px` / `small 8px` / `medium 12px` / `large 16px` / `xlarge 20px` / `xxlarge 24px` / `xxlarge 28px` (and above).

Published elevation set — note it is a *named* system plus a numbered one:

- `elevation-tertiary` — `0 2px 4px rgba(0,0,0,0.18)`, border `1px solid rgba(0,0,0,0.08)`
- `elevation-secondary` — `0 6px 16px rgba(0,0,0,0.12)`, border `1px solid rgba(0,0,0,0.04)`
- `elevation-primary` — `0 6px 20px rgba(0,0,0,0.2)`, border `1px solid rgba(0,0,0,0.04)`
- `elevation-high` — `0 8px 28px rgba(0,0,0,0.28)`, border `1px solid rgba(0,0,0,0.04)`
- `elevation-sharp-edge-background` — `rgba(0,0,0,0.08)`
- `elevation0` — `0 0 0 1px #DDDDDD inset` (a hairline drawn as an inset ring)
- `elevation1` — `0 0 0 1px rgba(0,0,0,0.02), 0 2px 4px rgba(0,0,0,0.16)`
- `elevation2` — `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.10)`
- `elevation3` — `0 0 0 1px rgba(0,0,0,0.02), 0 8px 24px rgba(0,0,0,0.10)`

Every numbered step begins with a `0 0 0 1px rgba(0,0,0,0.02)` ring, so elevation and hairline are the same token.

## 7. Motion

Observed transitions use a custom sharp-out curve:

- `color 0.25s cubic-bezier(0.2, 0, 0, 1)`
- `opacity 0.3s cubic-bezier(0.2, 0, 0, 1)`
- `opacity 0.175s cubic-bezier(0, 0, 1, 1)` (linear)

`cubic-bezier(0.2, 0, 0, 1)` is the house curve — a fast, decisive ease-out.

## 8. Backgrounds, Effects & WebGL

Photography-first and otherwise flat: no WebGL, no canvas, no backdrop-filter, no grain, no decorative gradients. The warm washes (`capiz #F7F6F2`, `hapuna #F5F1EA`) are the only non-white grounds. Image slots use rounded photographs directly with no overlay treatment except the badge pill.

## 9. Do's and Don'ts

### Do
- Use `#222222` as the ink and reserve `#000000` for hover.
- Keep Rausch `#FF385C` to the wordmark and the search submit; make the primary button `#222222`.
- Set everything in Airbnb Cereal and keep the scale small and flat — 14px carries most of the page.
- Use weight (400 / 500 / 700) rather than size to build hierarchy.
- Make the search a fully-rounded 32px pill split into labelled segments.
- Let rounded photographs be the cards — no border, no card shadow.
- Draw hairlines with the `0 0 0 1px` inset ring that begins every elevation step.

### Don't
- Don't use `#FF5A5F` — that is the retired coral; the current brand colour is `#FF385C`.
- Don't make Rausch a general CTA fill.
- Don't use pure black for text.
- Don't add uppercase tracked eyebrows or a serif.
- Don't inflate the type scale; listing titles stay at 14/20 regular.
- Don't mix the Plus `#92174D` or Luxe `#460479` sub-brand colours into the core surface.

## 10. Responsive Behavior

Not captured — no media-query census was resolved from the accessible stylesheets. The card grid is a horizontally-scrolling carousel at all captured widths, which is itself the primary responsive strategy.

## 11. Agent Prompt Guide

- Canvas `#FFFFFF` · Ink `#222222` · Secondary `#6C6C6C` · Hairline `#DDDDDD` · Fill `#F7F7F7` · Brand `#FF385C` · Error `#C13515` · Success `#008A05`
- Font: Airbnb Cereal VF only · Body: 14/20.02 at 400, labels 14/18 at 500 · Radius: 32px search pill / 8-28px surfaces / 50% icon · Search bar: 850×66
- Focus: text `#3F3F3F` · Hover: ink `#222222` → `#000000`, fill → `#F7F7F7` · Motion `0.25s cubic-bezier(0.2, 0, 0, 1)`

<airbnb_design_language>
A photography grid with almost invisible chrome, driven by the published DLS palette. White canvas, a soft #222222 ink (never pure black — #000000 is the hover ink only), and a warm named grey ladder: foggy #6A6A6A, bobo #B0B0B0, deco #DDDDDD, bebe #EBEBEB, faint #F7F7F7, plus warm washes capiz #F7F6F2 and hapuna #F5F1EA. Rausch coral #FF385C (NOT the retired #FF5A5F) is disciplined to the wordmark and the search submit; the primary button is #222222, and sub-brands Plus #92174D and Luxe #460479 stay off the core surface. Semantics are arches #C13515 error, spruce #008A05 success, ondo #E07912 warning, mykonou5 #428BFF info. One family, Airbnb Cereal VF, on a deliberately flat and small scale — most of the page is 14px, listing titles 14/20.02 at 400, UI labels 14/18 at 500, the h1 only 28/40.04 at 700 — so hierarchy comes from weight and from the photographs, not from type size; tracking is normal everywhere except a single 22/26 feature heading at -0.44px. The signature component is the search pill: 850x66 at a 32px radius, split into Where/When/Who segments by hairlines, each a 14/18 500 label over a 14/20 400 #6C6C6C placeholder, closed by a circular Rausch submit. Listing cards are rounded photographs with no border and no card shadow, carrying a badge pill and a heart. Depth is a published elevation set where every numbered step opens with a 0 0 0 1px rgba(0,0,0,.02) ring, so hairline and elevation are the same token, over radii of 4/8/12/16/20/24/28px. Motion runs on the house curve cubic-bezier(0.2, 0, 0, 1) at 0.25-0.3s. Feels: soft, warm, photographic, unfussy. Avoid: the retired #FF5A5F coral, Rausch as a general CTA fill, pure-black text, uppercase tracked eyebrows or a serif, an inflated type scale, and mixing sub-brand colours into the core surface.
</airbnb_design_language>