screenroveScreenrove / Design references
Airbnb design guide
A search-first marketplace where the photography does the selling.
Typography
Observed family: Airbnb Cereal VF. Font files are not distributed.
marketing: Light editorial
- Canvas:
#ffffff - Section band:
#f7f7f7 - Primary text:
#222222 - Secondary text:
#6a6a6a - Accent gradient start:
#e61e4d - Accent gradient middle:
#e31c5f
Layout and components
- 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.
- 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
- Canvas:
#ffffff - Primary text:
#222222 - Secondary text:
#6a6a6a - Border:
#dddddd - Search button (sampled from screenshot):
#d91249
Layout and components
- 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).
- 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.
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.
Download DESIGN.md