A warm, generous consumer marketplace anchored on a clean white canvas with Airbnb Rausch (#ff385c) as the single brand voltage. Cereal VF runs at modest weights so photography and rounded shapes carry the visual heft. Buttons are softly rounded, the search bar is a full pill, and the search-orb glows in Rausch.
A single accent (Rausch) carries every primary moment. The rest of the palette is white canvas, ink text, and three tiers of grey hairlines. Sub-brand purple and magenta are scoped to Luxe and Plus only.
Display sizes sit at 22–28px in weight 500/600 — the system trusts photography over typographic muscle. Inter is used here as a substitute for Cereal VF.
All buttons are 8px corner radius (`{rounded.sm}`). Pill variants step up to fully-rounded for category strips and featured cells.
Each tab carries a 32px hand-illustrated icon. Active tab uses a 2px ink underline. NEW tag pin is a tiny rounded pill in uppercase 8px / 700.
9999px radius, 64px height, white surface, 1px hairline border with the system's single shadow tier applied. Internally divided into Where / When / Who segments. Right edge terminates in a circular Rausch search orb.
Beneath the search bar on listing pages: a horizontal row of tap-targets in `{typography.button-sm}` muted, with a 2px ink underline marking the active selection.
A 1:1 photo plate with `{rounded.md}` 14px corner clipping, "Guest favorite" floating badge top-left, heart icon top-right, and a four-line meta block beneath: title, location, dates, price.
Taller-aspect than property cards. Single-line title beneath the photo. New experiences carry a tiny NEW pin top-left.
A 64px / 700 rating number flanked by laurel-wreath ornaments. The single typographically loud moment in the entire system. Guest-favorite tagline and stat row beneath.
Two-column amenity list at desktop, 1-column at mobile. Each row pairs a 24×24px icon plate with the amenity label in `{typography.body-md}`.
A quiet villa, garden, and direct beach access. The host was responsive and the kitchen was perfectly equipped for a long stay.
Photos were honest. The neighborhood is walkable in the evening and the host left a hand-drawn map of the local market.
Left column carries amenities, reviews, and host card. Right column is the sticky `{component.reservation-card}` — nightly price, date selector, guest stepper, primary CTA, fee breakdown.
Eylem is a Superhost — Superhosts are experienced, highly rated hosts who are committed to providing great stays.
40×40px circular cells. Selected days get an ink fill with white text; range states sit on a soft-grey lozenge.
56px height, 1px hairline outline that thickens to 2px ink on focus. The label floats to the top inside the input.
Homepage's signature grid. 6-column at desktop, each cell is a city name in `{typography.title-md}` over a category sub-label in `{typography.body-sm}` muted.
4px base with a 2px micro-step. Major sections at 64px.
Soft, generous rounding. Buttons at 8px, cards at 14px, search bar fully pill (9999px).
Essentially one shadow tier. Most surfaces are flat — depth comes from photography and rounded clipping.
Body, hero, footer, all editorial bands — 95% of surfaces.
The single shadow tier — search bar at rest, hovered property cards, dropdown menus.
Photo cards rely on `{rounded.md}` corner clipping for "card" feel without a shadow.
| Name | Width | Key Changes |
|---|---|---|
| Mobile | < 744px | Hamburger nav; product tabs hide behind sheet; search bar collapses to a single tappable pill; property cards 1-up; reservation collapses to sticky bottom bar. |
| Tablet | 744–1128px | Top nav keeps tabs; search bar narrows; property cards 2-up; reservation card stays sticky right-rail. |
| Desktop | 1128–1440px | Full top nav with three tabs centered; full-width search bar; property cards 4-up; city grid 6-column. |
| Wide | > 1440px | Listing/search content caps at 1440px; editorial caps at 1280px. |