Airbnb
Search-first layout with photo cards; search results with map split view; host landing page with an earnings estimator.
Summary
Search-first layout with photo cards; search results with map split view; host landing page with an earnings estimator.
What it is
A well-designed public website, captured by us (hero, key pages and a public flow) as a reference.
Who it’s for
Designers and front-end developers studying landing pages, pricing pages and sign-up entry points.
Key takeaways
- Captured airbnb.com: search bar on top and a grid of photo cards; search results split with a map; host page with an earnings estimator and map.
- Color: monochrome light theme; dominant colors #FFFFFF, #999999, #4A3E3D (ESTIMATED from our capture).
- Layout: card grid pattern, warm, photographic, search-first mood.
Best practices to borrow
- Keep chrome neutral and let content carry color.
- Use a uniform card grid with consistent thumbnails and minimal text per card; put filters above.
- Borrow structure and hierarchy, not brand assets; check contrast on any accent you take.
Palette preview
Quick links
Screenshots and the step-by-step flow are in the Flow tab.
Dominant palette from our captures
Measured by us from our screenshot(s) of https://www.airbnb.com (median-cut quantization; share = % of pixels). Approximate and not official.
Layout pattern: Card grid
Observed by us on the captured page(s). See all entries by layout.
How to apply it: Use a uniform card grid with consistent thumbnails and minimal text per card; put filters above.
Other entries with this layout: Fontshare, Logobook, Dribbble · logo tag, Behance · logo projects, Simple Icons, Boring Avatars, Storyset.
Components
Observed on the captured pages.
- Search bar
- Photo cards
- Map split view
- Estimator
Landing → Search results → Host entry
Captured with a headless browser. The capture stopped at the sign-up or entry page: no forms were submitted and no login walls were passed. These screenshots are fair-use reference captures; the sites, content and marks belong to their owners.
Mermaid source
flowchart LR
S1["Landing"] --> S2
S2["Search results"] --> S3
S3["Host entry"]
Our analysis
Captured airbnb.com: search bar on top and a grid of photo cards; search results split with a map; host page with an earnings estimator and map.
Similar to this
Ranked by shared color theme, layout, category, type and mood tags.
Downloads
PDF: research notes made for this library; third-party images inside follow the credits in their captions. Screenshots are fair-use reference captures; the sites and their content belong to their owners. License / terms of the source: Screenshots: fair-use reference captures; site content © Airbnb
DESIGN.md for AI coding agents
Copy this into your repo or agent context. OFFICIAL and ESTIMATED values are labelled.
# DESIGN.md · Airbnb (WR-009) > Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens. ## Overview - Type: Website Reference · Category: I. Website References - Platforms: Web, iOS, Android - Color theme: Monochrome light · Layout pattern: Card grid · Mood: Warm, photographic, search-first - License / terms: Screenshots: fair-use reference captures; site content © Airbnb Search-first layout with photo cards; search results with map split view; host landing page with an earnings estimator. ### Analysis (ours) Captured airbnb.com: search bar on top and a grid of photo cards; search results split with a map; host page with an earnings estimator and map. ## Color tokens No official color tokens documented for this entry. ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official: - `#FFFFFF` ~29% - `#999999` ~17% - `#4A3E3D` ~9% - `#E2E8E2` ~6% - `#BEBBB7` ~4% ## Typography No official type scale documented for this entry; use the product’s own typography guidance. ## Spacing, radii, shadows Not documented for this entry. Do not invent values; derive from your own design system. ## Components - Search bar - Photo cards - Map split view - Estimator ## Layout rules - Observed layout pattern: **Card grid** (from our captures). - Public flow (captured, stopped before any form submission): Landing (https://www.airbnb.com/) → Search results (https://www.airbnb.com/s/Tokyo/homes) → Host entry (https://www.airbnb.com/host/homes) ## Do’s and don’ts - Do: Keep chrome neutral and let content (images, icons, type) carry color. - Don’t: Don’t introduce decorative color that competes with content. - Do: follow the source’s license/terms listed above. - Don’t: present ESTIMATED colors as official tokens. ## Sources - https://www.airbnb.com - Capture: https://www.airbnb.com/ - Capture: https://www.airbnb.com/s/Tokyo/homes - Capture: https://www.airbnb.com/host/homes - Library entry: https://design-library-byt.pages.dev/entry/WR-009