Design teardown
Airbnb
A white catalog page led by large rounded photos, a pill search, and very short labels. Coral is limited to the mark and the round search control; everything else is black, gray, and soft shadow.
airbnb.com
Design character
Photo-led marketplace
The page is a white browsing surface. A thin header holds a centered pill search, then horizontal rows of large photos with a short name and a smaller gray price line. Section titles are brief and left aligned, sometimes with one supporting sentence. Footer groups pair a medium-weight place name with a gray category. The writing is concrete and clipped, with almost no paragraphs.
Typography
One variable sans, Airbnb Cereal VF, carries the whole page. Section titles are 20–22px and slightly tight. Interface text is 14px. Listing names drop to 13px medium, and price, rating, and field hints sit at 12px in gray.
Color system
The page is white with near-black text. Secondary facts are gray. Borders are a light gray. Coral appears on the mark and, slightly deeper, on the search button. Footer and service tiles use a faint gray wash.
Spacing and geometry
Spacing is loose and based on an 8px rhythm, with 12px between cards and large side margins. Controls use generous horizontal padding. Photos and the search field share a large corner radius.
Layout
A sticky header sits over a centered content column of horizontal carousels. Scrolling collapses the wide three-part search into a small pill in the top bar. The lower page switches to a gray band with a link grid and three footer columns.
Motion
Motion is short and physical. Scrolling collapses the large search into a compact pill. Dialogs fade and slide. Controls ease over about a quarter to a third of a second, with spring timings near half a second.
UI fingerprint
- Pill search A white, fully rounded search bar with three labeled segments and a coral circle at the end.
- 20px photos Listing images and service tiles share one large corner radius and sit directly on white or faint gray.
- Coral only once The mark is #ff385c and the search control is #da1249. The rest of the UI stays black, gray, and white.
- Two-line facts A medium name, then a single gray line for price and rating. Section titles rarely get more than one supporting sentence.