# 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
- Industry: Travel marketplace
- Patterns: Search-first gallery, Map + list, Sign-up entry

Search-first layout with photo cards; search results with map split view; host landing page with an earnings estimator.

### Analysis (ours)
Airbnb’s homepage (our capture) is search-first: category tabs with small 3D illustrated icons (All, Homes, Experiences, Services) sit above a pill search bar split into Where / When / Who segments with a round coral-red search button, and the rest of the page is horizontal rows of rounded photo cards grouped by destination. Cards are image-led with a heart to save, a ‘Guest favorite’ badge and two short lines (title, then total price and rating); at capture time a modal announcing all-fees-included pricing covered the first view. Search results split the screen into a two-column card list and a map with price pins, under a row of filter chips (Washer, Wifi, Self check-in…), with ‘Prices include all fees’ repeating the pricing promise. The host entry page leads with a personalized earnings estimate (‘Your home could make $…’) driven by a nights slider and a location field, beside a map of nearby rates. Lesson: put the primary task (search, or estimate) in the first viewport and keep the brand color for the button that runs it. Pitfall: announcement modals on first load block the very grid the page is built around.

### Best practices (ours)
- Make the primary task (search) the first thing on the page, and give it the only brand-colored button.
- Keep cards image-first with two short text lines and one save action.
- Pair list results with a map and put price on the map pins.
- Turn a sign-up pitch into an interactive estimate with the user’s own numbers.

## 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