packages/shared-skills/skills/frontend/references/design/airbnb.md
Airbnb's 2026 design feels like a travel magazine that happens to be an app — pristine white canvases give way to full-bleed photography, and the interface itself disappears so the listings can breathe. The signature Rausch coral-pink (#ff385c) is used sparingly but unmistakably: search CTA, active tab indicator, primary action button, the occasional price or wishlist heart. Everything else is a disciplined grayscale, with #222222 carrying almost every line of text.
What makes the system unmistakably Airbnb is how much faith it places in content. Property photos are displayed at hero scale, 4:3 with edge-to-edge radius treatment. Category switching happens through a tri-tab picker (Homes / Experiences / Services) that uses 3D rendered illustrated icons (a pitched-roof house, a hot-air balloon, a service bell) — physical, tactile, almost toy-like — paired with crisp Airbnb Cereal VF labels. This is the rare consumer product where 3D renders and purely typographic UI coexist without tension.
The newest surface is the Experiences product line — same chrome, but richer card density, more photography, and a center-anchored booking panel with sticky right-rail pricing. Listing detail pages (both rooms and experiences) follow a tight template: full-bleed hero image grid → overlapping rounded booking card (sticky on scroll) → amenities → reviews (Guest Favorite awards use a big centered 4.81 rating with a laurel-wreath lockup) → map → host profile → disclosures. The rhythm is consistent whether you're booking a room or a yacht tour.
Key Characteristics:
#ff385c) as a single-accent brand color, used only for primary CTAs and the search button50% icon buttons (back arrow, share, favorite, carousel arrows) scattered throughoutAirbnb Cereal VF carries every label, from 8px legal footnote to 28px section heading — a single-family system#92174d), Airbnb Luxe (deep purple #460479), Airbnb (Rausch coral)#ff385c): The brand's signature coral-pink. CSS variable --palette-bg-primary-core. Used for: primary "Reserve" button, search submit button, active tab underline, wishlist heart fill, pricing emphasis. The single highest-visibility color on every page.#e00b41): A more saturated variant. CSS variable --palette-bg-tertiary-core. Used for pressed/active button states and gradient terminal stops.#92174d): CSS variable --palette-bg-primary-plus. The brand color for the Airbnb Plus product tier — a higher-end curated-listing offering.#460479): CSS variable --palette-bg-primary-luxe. The brand color for the Airbnb Luxe product tier — villa/estate-level rentals.#428bff): CSS variable --palette-text-legal. Used for legal/informational links (terms, privacy, disclosures) — the only non-monochrome link color in the system.#ffffff): The default page background. Every card, every container, every detail page starts here.#f7f7f7): Subtle subsurface tint used on footer backgrounds, map-view wrappers, and "everything else" sections that want to step back from the primary white.#dddddd): Ubiquitous 1px border color — separates cards, amenity rows, review panels, footer columns. The workhorse of the layout system.#222222): CSS variable --palette-text-primary. The system's near-black. Every heading, every body paragraph, every nav label, every price. Used for ~90% of all text on a page.#3f3f3f): CSS variable --palette-text-focused. Used in focused-state input text and one-step-down emphasis copy.#6a6a6a): CSS variable --palette-bg-tertiary-hover. Secondary labels, "Cottage rentals" subtitle-style copy under city names, muted footer links.#929292): CSS variable --palette-text-link-disabled. Disabled buttons and low-priority metadata.#c1c1c1): Tertiary dividers, icon strokes, placeholder avatars.#c13515): CSS variable --palette-text-primary-error. Form validation errors, destructive-action warnings.#b32505): CSS variable --palette-text-secondary-error-hover. Pressed/active variants of error states.rgba(0, 0, 0, 0.24)): CSS variable --palette-text-material-disabled. Disabled material-style labels.Airbnb's brand gradient appears sparingly, typically only on the wordmark and the search-button branded moment:
linear-gradient(90deg, #ff385c 0%, #e00b41 50%, #92174d 100%)
This coral → magenta sweep is the "branded moment" — never used as a full surface, only as a narrow pill fill or logo treatment.
Circular, -apple-system, system-ui, Roboto, Helvetica Neue, sans-serif.Weights observed in the extracted tokens: 500, 600, 700. No 400-regular — the system's "body" weight is 500, which gives every block of text a subtle extra density that reads as confident and deliberate.
OpenType features: salt (stylistic alternates) is used on the compact 11px and 14px 600-weight labels — likely for tighter numerals and special-character shaping. No ligature or fractional-numeral features observed.
| Role | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|
| Section Heading | 28px / 1.75rem | 700 | 1.43 | 0 | "Inspiration for future getaways" — page-level headings |
| Subsection Heading | 22px / 1.38rem | 500 | 1.18 | -0.44px | "What this place offers", "Meet the hosts" — content dividers |
| Card Title | 21px / 1.31rem | 700 | 1.43 | 0 | Review panel headings, card lead titles |
| Listing Title | 20px / 1.25rem | 600 | 1.20 | -0.18px | "Small Group Yacht Tour, Unlimited Wine & Fruits" — listing headlines on detail pages |
| Subtitle Bold | 16px / 1.00rem | 600 | 1.25 | 0 | Host name, city name |
| Body Medium | 16px / 1.00rem | 500 | 1.25 | 0 | Primary body copy on detail pages |
| Button Large | 16px / 1.00rem | 500 | 1.25 | 0 | "Reserve", "Become a host" |
| Button Default | 14px / 0.88rem | 500 | 1.29 | 0 | Standard button labels |
| Link | 14px / 0.88rem | 500 | 1.43 | 0 | Nav links, footer links |
| Caption Medium | 14px / 0.88rem | 500 | 1.29 | 0 | Metadata, subtitle lines ("Cottage rentals", "Villa rentals") |
| Caption Bold | 14px / 0.88rem | 600 | 1.43 | 0 | salt feature enabled — numeric stats, small-text emphasis |
| Caption Small | 13px / 0.81rem | 400 | 1.23 | 0 | Review dates, micro-metadata |
| Micro Default | 12px / 0.75rem | 400 | 1.33 | 0 | Footer disclaimers, legal micro-copy |
| Micro Bold | 12px / 0.75rem | 700 | 1.33 | 0 | "NEW" pill labels |
| Badge Uppercase | 11px / 0.69rem | 600 | 1.18 | 0 | salt feature — compact category/status badges |
| Superscript | 8px / 0.50rem | 700 | 1.25 | 0.32px | Uppercase — price footnotes, decimal tails |
Airbnb Cereal VF is proprietary. The closest open-source substitute is Circular Std (still commercial) or Inter (free, Google Fonts) with letter-spacing reduced by -0.01em at display sizes. For strict brand fidelity, the documented fallback chain (Circular, -apple-system, system-ui) renders acceptably on macOS/iOS where system-ui resolves to San Francisco, which has similar proportions.
Primary CTA ("Reserve", "Search", "Add dates")
#ff385c#ffffff, Airbnb Cereal 500, 16pxtransform: scale(0.92) plus a 2px #222222 focus ring at 0 0 0 2pxSecondary Button ("Become a host", outlined tertiary actions)
#ffffff#222222, Airbnb Cereal 500, 14–16px#ddddddIcon-Only Circular Button (back arrow, share, favorite, carousel controls)
#f2f2f2 (slightly off-white) or white with 1px translucent black border#222222 outline stroke, 16–20pxtransform: scale(0.92); subtle 4px white ring 0 0 0 4px rgb(255,255,255) to separate from colorful photography backgroundsDisabled Button
#f2f2f2#c1c1c1Pill Tab Button (category selector "Homes / Experiences / Services")
#222222, Airbnb Cereal 500, 16pxListing Card (homepage grid, search results)
#ffffffDetail Page Booking Panel (sticky right rail on room/experience pages)
#ffffff#ddddddrgba(0, 0, 0, 0.02) 0 0 0 1px, rgba(0, 0, 0, 0.04) 0 2px 6px 0, rgba(0, 0, 0, 0.1) 0 4px 8px 0 — a stacked three-layer subtle elevationAmenity Grid Card (on listing detail pages)
#ffffff#dddddd at the row level (not per item)Review Card (individual review on detail pages)
#ffffff, no borderSearch Bar (primary home page)
#ffffff#dddddd wrapping all three segments (Where / When / Who)rgba(0, 0, 0, 0.04) 0 2px 6px 0 — subtle floating feelText Input (generic forms)
#ffffff#dddddd0 0 0 2px black outer ring#c13515 (Error Red), helper text uses same colorDate Picker
50% day cells 40–44px wide#222222 background with white numerals#f7f7f7 tintTop Nav (Desktop)
#ffffff#ddddddTop Nav (Mobile)
Listing Detail Secondary Nav
50% on avatarsloading="lazy" with blurred placeholder previewsGuest Favorite Award Lockup (featured prominently on high-rated listing detail pages)
0.32px tracking, and a short sub-label at 14px 500 Ash GrayTri-Tab Category Picker (appears at the top of every browse surface)
Inspiration City Grid (homepage "Inspiration for future getaways")
Reserve Sticky Card (listing detail pages)
Experience Host Card (experience detail pages)
"Things to know" Strip (listing detail pages)
Airbnb is densely informative but never cramped. Whitespace is used to group — listing cards have 24px of gutter so each photograph reads as a distinct object, but the metadata under each card uses 4–8px gaps so the price/city/date feels like a single unit. The detail-page booking panel has 24px internal padding, but rows within (date picker, guest selector, CTA) are stacked at 12px — the boundary between the card and the page does more separation work than the content within.
| Radius | Use |
|---|---|
| 4px | Inline anchor tags, tag chips |
| 8px | Text buttons, dropdowns, small utility buttons |
| 14px | Listing card photography, generic content containers, badges |
| 20px | Primary rounded buttons (pill shape), large images, booking panel |
| 32px | Search bar pill, extra-large containers |
| 50% | All circular icon buttons, all avatars, wishlist hearts — the system's signature round geometry |
| Level | Treatment | Use |
|---|---|---|
| 0 | No shadow | Listing cards, body content, text-only sections |
| 1 | rgba(0, 0, 0, 0.08) 0 4px 12px | Active/pressed icon buttons (e.g., back, share, favorite) — subtle lift to indicate interaction |
| 2 | rgba(0, 0, 0, 0.02) 0 0 0 1px, rgba(0, 0, 0, 0.04) 0 2px 6px 0, rgba(0, 0, 0, 0.1) 0 4px 8px 0 | Booking panel sticky card, modals, dropdown menus — the system's signature three-layer elevation |
| Focus Ring | 0 0 0 2px #222222 | Active-state buttons, focused search input |
| White Separator Ring | rgb(255, 255, 255) 0 0 0 4px | Circular buttons overlaid on photographs — a 4px white ring cleanly separates the button from colorful image backgrounds |
Shadow philosophy: Airbnb uses stacked layered shadows rather than a single drop. The three-layer booking-panel shadow reads as one cohesive lift but is actually three separate shadows at different opacity/blur values — creating subtle anti-aliasing at the shadow's perimeter that feels premium without being heavy.
#ff385c for primary actions and the active-tab indicator — never dilute it with decorative uses.#222222 for every text layer below Rausch — this is the system's near-black, never true #000000.#dddddd 1px borders for every card-to-card and row-to-row divider.Airbnb declares ~60 breakpoints (design-time artifact from their component library), but the meaningful layout shifts happen at a much smaller set:
| Name | Width | Key Changes |
|---|---|---|
| Ultra-wide | ≥1760px | 6-column listing grid, 1760–1920px max content width |
| Desktop XL | 1440–1759px | 5-column grid, full nav visible, sticky right-rail booking panel |
| Desktop | 1128–1439px | 4-column grid, sticky booking panel persists |
| Laptop | 1024–1127px | 3–4 column grid, category nav remains horizontal |
| Tablet | 800–1023px | 3-column grid, global search may collapse to a single-row pill |
| Small tablet | 550–799px | 2-column grid, booking panel drops to full-width inline block |
| Mobile | 375–549px | 1-column stacked layout, bottom-fixed tab bar appears (Explore / Wishlists / Log in) |
| Small mobile | <375px | Edge padding tightens to 16px; category-picker icons shrink to ~28px |
All interactive elements meet or exceed 44×44px. The circular icon button family is specifically sized 32–44px with 8–12px extended hit-area padding. The Rausch primary Reserve button is ~48px tall. The tri-tab category picker's hit area is the full label-plus-icon rectangle (typically ~64×80px per tab).
loading="lazy" universal, with blurred im_w= URL-parameterized preview thumbs served firstmuscache.com CDN with im_w query parameter for width-based delivery (im_w=240, im_w=720, im_w=1200, im_w=2400)transform: scale(0.92) with a 2px Ink Black focus ring (0 0 0 2px #222222)."per night suffix."rgba(0,0,0,0.02) 0 0 0 1px, rgba(0,0,0,0.04) 0 2px 6px 0, rgba(0,0,0,0.1) 0 4px 8px 0), 24px padding, 370px width, pinned 120px below viewport top on desktop. Contents: price headline, date picker, guest dropdown, Rausch primary CTA, and a 12px Ash Gray You won't be charged yet disclaimer."NEW pill on a dark navy background to the top-right of the Experiences and Services icons."GUEST FAVORITE label with 0.32px tracking; sub-label at 14px 500 Ash Gray; full-width block sitting directly on white canvas with no container border."When refining existing screens generated with this design system: