A photography grid with almost invisible chrome, driven by the published DLS palette of warm named greys over a soft #222222 ink that is never pure black; the Rausch coral (now #FF385C, not the retired #FF5A5F) is disciplined to the wordmark and the search submit while the primary button stays near-black, the type scale is deliberately flat and small so photographs set the hierarchy, and the signature 32px segmented search pill sits on an elevation system where hairline and shadow are the same token.
Browse Airbnb in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
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.
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.
| 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 |
| 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) |
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
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.
"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.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.