Airbnb
www.airbnb.comThe reference for a near-white, photo-forward marketplace where a single coral-red (#ff385c) is rationed to brand touchpoints and a heavy black Cereal headline carries the whole hero.
Hospitality flagship
Design tokens
background
surface
text
textMuted
accent
border
tone1
tone2
- display
- Airbnb Cereal VF
- body
- Airbnb Cereal VF
- mono
Do / Don't
Reference it for
- Restrained accent strategy: keep #ff385c (Rausch Coral) for the logo and one or two brand moments only, render every CTA in carbon-black (#222222) so the colour reads as signature not system
- Centred hero formula: tight black geometric-sans headline at ~64px with negative letter-spacing over a muted grey (#6a6a6a) two-to-three-line sub, then one solid black pill button
- Paper-on-paper depth: #f7f7f7 page canvas with #ffffff card surfaces, almost no visible elevation, photography supplies the contrast
- Airbnb Cereal VF style display: a humanist geometric sans run heavy (700) for headlines, 400 for body, on a compact scale (11/14/20/22/28px)
- 20px rounded corners as the one generous radius: bleed images edge-to-edge inside a 20px frame while everything else stays compact (4/8px)
- Hairline header on white: thin #ebebeb bottom border, left wordmark, right-aligned text nav plus one filled dark CTA
- Soft layered popover shadow recipe: rgba(0,0,0,0.02) 0 0 0 1px, rgba(0,0,0,0.04) 0 2px 6px, rgba(0,0,0,0.1) 0 4px 8px for search bars and floating panels
- Muted-grey supporting copy (#6a6a6a) against carbon headlines for a quiet two-tone text hierarchy
Do not copy
- The Rausch Coral #ff385c itself and the Rausch Deep #e00b41 gradient pair, both are unmistakably Airbnb
- The airbnb.org / airbnb wordmark and the Belo loop logomark
- Airbnb Cereal VF, a proprietary licensed typeface, substitute a comparable geometric humanist sans
- The exact search-bar pill module (segmented where/when/who control) which is an Airbnb signature
- The literal emergency-housing nonprofit framing and donation flow specific to airbnb.org