Airbnb
A warm, travel-marketplace interface built on a white canvas with near-black ink text and a single signature coral-pink accent (Rausch, #ff385c) reserved almost entirely for the search-submit button. The system reads as friendly, spacious, and utilitarian — a pill-shaped multi-segment search bar as the hero interactive element, custom Airbnb Cereal typography, generous city-link directories, and fully rounded (pill/circle) interactive shapes. Brand voltage comes from the coral search button and the pill search geometry rather than from decorative color.
Works with
Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit
Color Palette
Accent
Neutrals
Typography
h1
28px · 700 · 1.43
The quick brown fox jumps
h2
22px · 500 · 1.182
The quick brown fox jumps
h3
14px · 500 · 1.286
The quick brown fox jumps
button
14px · 400 · 1.43
The quick brown fox jumps
Spacing & Shape
Spacing
| Name | Value | Preview |
|---|---|---|
| xxs | 4px | |
| xs | 8px | |
| sm | 11px | |
| md | 16px | |
| lg | 24px | |
| xl | 32px | |
| xxl | 48px |
Border Radius
| Name | Value | Preview |
|---|---|---|
| xs | 3px | |
| sm | 4px | |
| md | 8px | |
| lg | 10px | |
| xl | 20px | |
| pill | 32px | |
| round | 50px | |
| full | 100px |
FAQ
- What colors does Airbnb use?
- Airbnb's core palette includes #ff385c, #e61e4d, #222222, #1b1b1b, #000000. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the Airbnb DESIGN.md.
- What font does Airbnb use?
- Airbnb's primary typeface is Airbnb Cereal VF. The complete type scale (sizes, weights, line-height and letter-spacing per role), with an open substitute where the original is licensed, is documented in the DESIGN.md.
- What is the Airbnb design system?
- A warm, travel-marketplace interface built on a white canvas with near-black ink text and a single signature coral-pink accent (Rausch, #ff385c) reserved almost entirely for the search-submit button.…