Airbnb
airbnb.comWarm, photo-led marketplace UI with rounded cards, a coral accent and friendly, rounded type.
An independent summary of Airbnb's public design language, written by UI Skillbook for coding agents. Not affiliated with or endorsed by Airbnb. Color values are approximate.
Overview
Airbnb's system is about trust and warmth: big listing photos, soft radii, plain-language copy, and one bright accent reserved for the actions that matter.
Color
| Role | Value | Use |
|---|---|---|
| Rausch (accent) | #FF385C | Primary CTA, brand moments |
| Text | #222222 | Headings and body |
| Secondary | #717171 | Metadata |
| Border | #DDDDDD | Dividers, inputs |
Typography
Airbnb Cereal, a geometric sans with rounded details. Medium weight for headings, regular for body around 16px; prices in semibold.
Spacing and layout
8px grid. Listing grids keep consistent gutters and square-ish photos with 12px radii.
Components
- Segmented search bar with where / when / who fields.
- Listing cards: photo carousel, title, distance, dates, price.
- Category icon row that scrolls horizontally.
- Gradient coral primary button for booking.
Do
- Lead with photography and real details.
- Keep copy conversational and short.
Don't
- Don't overuse the coral accent.
- Don't crop listing photos to inconsistent ratios.
Prompt for your agent
Style this interface in the spirit of Airbnb's design language, without copying its logo or brand assets.
Warm, photo-led marketplace UI with rounded cards, a coral accent and friendly, rounded type.
Follow the color roles, type and component notes in this DESIGN.md.