# Airbnb — DESIGN.md

A search-first marketplace where the photography does the selling.

Independent reference guide from browser captures and computed styles. Not an official brand guide. Values describe the captured desktop states; responsive rules below are implementation recommendations.

Captured: 2026-09-21

## Agent task
Build an original interface using this visual language. Inspect the existing stack and conventions first. Use the included screenshots to understand hierarchy, composition and density. Keep your own branding and content.

## Font
Observed family: **Airbnb Cereal VF**. A family name is not a bundled font licence. Use an available, licensed installation or a system sans-serif fallback.

## Marketing — Light editorial

### Observed palette
- Canvas: `#ffffff`
- Section band: `#f7f7f7`
- Primary text: `#222222`
- Secondary text: `#6a6a6a`
- Accent gradient start: `#e61e4d`
- Accent gradient middle: `#e31c5f`

### Observed typography
| Role | Size / line height | Weight | Tracking |
|---|---|---|---|
| Hero and section heading | 60px / 64px | 700 | −1.8px |
| Feature title | 28px / 32px | 700 | not measured |
| Lead paragraph | 24px / 36px | 400 | not measured |
| Body | 18px / 28px | 400 | not measured |
| Sub-heading | 22px / 26px | 600 | −0.44px |
| Button label | 16px / not measured | 500 | not measured |

### Layout & hierarchy
- Centred single-column sections on white; each block is a heading, one supporting sentence, then the proof (cards, phone mockups or a list).
- Fixed 80px header with only the mark on the left and one primary Get started action on the right; no navigation links.
- A grey band (#f7f7f7) closes the page with the FAQ, followed by the footer link columns.

### Components & behavior
- Primary action: 48px high, 40px radius, red gradient fill, white 16px / 500 label.
- Secondary action: 48px high, fully rounded, #222222 fill with a white label.
- Cards: #f7f7f7 fill, 30px radius, layered soft shadow (co-host cards). Phone mockups sit on rounded #f7f7f7 tiles.
- FAQ rows are disclosure lists with chevrons; the first group is open by default on the experiences page.

## Product — Light, image-led marketplace

### Observed palette
- Canvas: `#ffffff`
- Primary text: `#222222`
- Secondary text: `#6a6a6a`
- Border: `#dddddd`
- Search button (sampled from screenshot): `#d91249`

### Observed typography
| Role | Size / line height | Weight | Tracking |
|---|---|---|---|
| Base | 14px / 20px | 400 | normal |
| Section heading | 20px / 24px | 600 | −0.18px |
| Listing card title | 15px / 19px | 500 | not measured |
| Struck-through price | 15px / not measured | 400 | not measured |
| Category tab | 14px / not measured | 500 | not measured |
| Search field label | 12px / not measured | 500 | not measured |
| Filter chip | 12px / not measured | 400 | not measured |

### Layout & hierarchy
- Search is a three-part pill 66px high with a 32px radius, centred in the header; it collapses to a compact pill on scroll.
- The results header is 152px high and sticky, with an amenity chip row under the pill.
- Results split into a listing grid and a live map. Card images use a 20 / 19 ratio (321 × 305 px at a 1496px viewport).

### Components & behavior
- Filter chip: 34px high, 24px radius, 1px #dddddd border, 8px / 12px padding.
- Listing card image wrapper: 20px radius; the heart and Guest favourite badge sit on the image.
- Search, dates, guests, filters, photo tour and log-in are overlays over a dimmed page; the log-in modal has one field, a red Continue button and Google / Apple icon buttons.
- Tabs (All, Homes, Experiences, Services) use illustrated icons and an underline for the active tab; the search fields change per tab.

## Implementation recommendations
- Use your own name, logo, copy and sample data. Recreate the visual principles and interaction structure.
- Use semantic HTML, visible focus states, labelled controls and accessible contrast.
- Recommended: use a 4px spacing base, collapse rails on small screens, stack grids and allow tables to scroll.
- Recommended: implement loading, validation, error, success, empty and disabled states; do not infer unobserved backend behavior.
- Use the supplied font only when available and appropriately licensed; otherwise use a system sans-serif fallback.
- Treat desktop measurements as reference values, not a complete responsive specification.

## Interaction inventory
- Home search: The logged-out home. Category tabs switch between homes, experiences and services; the three-part search pill starts a destination search. Same capture as the first flow step. Screenshot: `captures/airbnb-product-home.jpg`.
- Experiences tab: The Where field becomes "Search by city or landmark". Rows such as "Experiences this weekend" show time badges (for example Fri · 11:00) and per-guest prices, with an "Airbnb Originals" row below. Screenshot: `captures/airbnb-product-experiences.jpg`.
- Services tab: The last search field becomes "Type of service". A row of illustrated category tiles (Car hire, Photography, Chefs, Massage, Prepared meals, Training, Make-up, Spa treatments, Catering) sits above provider carousels. Screenshot: `captures/airbnb-product-services.jpg`.
- Search results with map: Listing grid on the left, live map with price pins on the right, an amenity chip row under the compact search pill. Same capture as the flow results step. Screenshot: `captures/airbnb-product-results.jpg`.
- Filters overlay: A centred sheet over the dimmed results: Recommended-for-you tiles, a Type of place segmented control (Any, Home, Room, Hotel), Price range, and a footer with Clear all and "Show 1,000+ places". No filter was applied. Screenshot: `captures/airbnb-product-filters.jpg`.
- Listing detail: Title, a one-large-plus-four photo grid, facts line, Guest favourite card and a sticky booking card. Same capture as the flow listing step; only the top viewport was captured. Screenshot: `captures/airbnb-product-listing.jpg`.
- Photo tour overlay: A full-screen photo tour: back arrow, Share and Save, a row of room thumbnails (Living room, Kitchenette, Bedroom, Full bathroom, Exterior, Additional photos) and room-grouped photo grids with amenity captions. Screenshot: `captures/airbnb-product-photos.jpg`.

## Avoid
- Do not apply the marketing headline scale to the dense search and results screens.
- Do not present sampled or unmeasured values as exact; the search-button colour is sampled from a screenshot and several type roles have no measured line height or tracking.
- Do not treat screenshots as editable components or original source code.
- Do not assume uncaptured hover states, mobile layouts, signed-in behavior or booking flows.

## Reference pages
- Homepage: https://www.airbnb.co.uk/
- Host your home: https://www.airbnb.co.uk/host/homes
- Host an experience: https://www.airbnb.co.uk/host/experiences

## Capture scope
Logged-out desktop journey: home, destination search, dates, guests, results, listing, header menu and the log-in / sign-up modal. No account was created and nothing was entered, so sign-up, onboarding and every signed-in screen (trips, wishlists, messages, booking) are not captured. Locations, prices and listings are personalised to the visitor and change over time. Filters and the photo tour were opened but nothing was applied or booked.

## Format inspiration
- https://github.com/voltagent/awesome-design-md
- https://getdesign.md/

The structure is inspired by these resources. The guide text and values come from this independent capture pass. No proprietary source code or font files are included.