BRAND Airbnb 2026 · Page: home

HEADER brand: Airbnb; design_date: 2026-09; page_type: home; variants: none (the Homes / Experiences / Services tabs load the same layout filtered to one kind) example_urls: https://www.airbnb.com/?locale=en&currency=USD evidence: measured on live https://www.airbnb.com/?locale=en&currency=USD 2026-09-25 (1440x900 and 390x844 @2x, IP location Japan so the shelves show Japanese cities) unless marked purpose: get the visitor to start a search or tap into a pre-filtered shelf of homes, experiences or services skeleton: fluid, 48px side margins (24px mobile); header ~200px (96px after scroll); 13-15 content shelves (lazy-loaded, the page grows while scrolling), inspiration block, footer; total ~5400px at 1440, ~4200px+ at 390; sidebar: none overrides: none (the header starts expanded with the search row, Recipe search-bar) SECTIONS S1 header / sticky with category tabs - navigation and brand background: white band fading to #F8F8F8 (linear-gradient(#FFFFFF 39.9%, #F8F8F8 100%)), height 200px at scroll 0 incl. S2, 96px compact layout: logo left (x 48), tabs centered, actions right (Become a host, profile, menu) elements: see Overview GLOBAL CHROME and Recipe category-tabs (4 tabs: All selected, Homes, Experiences, Services) motion: collapses on scroll (Recipe search-bar) responsive: <744 replaced by S2 mobile pill + chips; bottom tab bar appears S2 hero / search-hero - start a search background: part of the S1 band; height 66px pill + 34px below layout: centered 850px pill, top 102px elements: Where (input "Search destinations"), When ("Add dates"), Who ("Add guests"), 48px search circle #DA1249 copy: labels only, no headline (the H1 "Airbnb homepage" is visually hidden) motion: Recipe search-bar responsive: <744: 56px "Start your search" pill, 342px wide at 390, radius 40px, shadow 0 6px 20px rgba(0,0,0,0.10), top 85px below the app banner; category chips row under it (40px chips, Recipe category-tabs) S3-S7 features / horizontal-gallery (home shelves) - pre-filtered homes near the user background: #FFFFFF; padding: title top at 151px (compact) / 256px (expanded); shelves every ~300-330px layout: title row + card strip, 48px margins, 12px gap, exactly 7 cards filling the content width at 1440 (179.5px each), the 8th clipped at the content edge (Recipe listing-shelf) elements: S3 "Popular homes in Osaka" (8 cards + See all), S4 "Great hotels for your next trip" with 14px grey subtitle "Plus, get Airbnb credit when you stay at a featured hotel.", S5 "Available next month in Sapporo", S6 "Stay in Kyoto", S7 "Available next month in Naha"; each card: photo 180x171 radius 20, "Guest favorite" frosted badge on most, heart, 13px title "Apartment in Chuo", 12px grey "$76 for 2 nights · ★ 4.91"; hotels show "Hotel Miss Fuller / $662 for 2 nights · ★ 5.0" copy: titles 3-6 words, always with a place media: listing photos, ~20:19, cover; placeholder: warm interior photos motion: paging via 28px arrows; no entrance animation responsive: <744 title 18px/24px 600, arrows replaced by swipe (the arrow chip beside the title moves to the right edge, 36px est), cards 165x157, 2.3 visible, first card at x 24 S8 features / category tiles "Explore experiences nearby" - browse experience types layout: title row; 10 photo tiles 124px wide at a 134px pitch, image ~124x117 radius 8px, label under 13px/18.6px 500 ("Cultural tours", "Art workshops", "Cooking", "Food tours", "Landmarks", "Tastings", "Outdoors", "Performances", "Workouts", "Dining") media: square-ish candid photos of the activity responsive: horizontal scroll on mobile, tiles ~100px (est) S9 features / horizontal-gallery "Popular experiences in Tokyo" - experiences shelf elements: same cards; badge "Trending"; lines "Ride to Daikoku with Tokyo's Ultimate JDM Fleet" (2-line title) and "From $136 / guest · ★ 4.89" S10 features / category tiles "Find services near you" - browse services layout: 9 tiles 139x139px, bg #F7F7F7, radius 20px, 12px gap (est), 3D object render 91px centered; label below 13px 500 ("Photography", "Chefs", "Massage", "Prepared meals", "Training", "Makeup", "Hair", "Spa treatments", "Catering") media: glossy 3D renders (camera, knife and board, massage table, bento box, kettlebell, lipstick, hair dryer, spa stones, food containers) S11 features / horizontal-gallery "Capture memories nearby" - photography services elements: cards with "Popular" badge, "From $48 / guest", third line "Minimum $69 to book · ★ 5.0" S12-S16 features / horizontal-gallery - more home shelves ("Homes in Shinjuku", "Places to stay in Karuizawacho", "Check out homes in Bangkok", "Popular homes in Lake Kawaguchi", "Stay in Shibuya"); more load as the user scrolls S17 content / tabs + link grid "Inspiration for future getaways" - SEO destinations background: #F7F7F7 (joined to the footer band), padding-top 48px layout: H2 22px/26px 500; text tabs row (Popular, Arts & culture, Beach, Mountains, Outdoors, Things to do, Travel tips & inspiration, Airbnb-friendly apartments) 14px 500, padding 0 16px, inactive #6C6C6C, active #222222 with 2px #222222 underline; 1px #DDDDDD rule under the tabs (est); grid of 6 columns (223px pitch) x 3 rows: city 14px 500 #222222 + type 14px 400 #6C6C6C ("Tokyo / Monthly Rentals"), 24px row gap; last cell "Show more" with chevron responsive: 2 columns on mobile (est) S18 footer - see Overview GLOBAL CHROME (3 columns, bottom row) PAGE COMPONENTS shelf title link with arrow chip, See all tile, experience category tile, service tile: see Recipe listing-shelf fees info dialog (first visit): 393px, radius 32px, shadow-high, 3D pink tag icon 96px (est), title 22px/26px 600 centered, animated per character; full-width dark button "Got it" 48px radius 8px; close × top-left 16px fees toast "Prices include all fees": see Overview COMPONENTS (appears when search opens and on mobile at first load) INTERACTIONS - header morph and search panels: Recipe search-bar - tabs: Recipe category-tabs - shelves: Recipe listing-shelf (paging, heart save) - inspiration tabs: click swaps the link grid instantly (est), underline moves 300ms cubic-bezier(0.2,0,0,1) (inf) - infinite loading: new shelves appear as the viewport nears the bottom (IntersectionObserver), no spinner STATES loading: grey #F2F2F2 image boxes with 20px radius and grey text bars (est) logged in: shelves for recently viewed and wishlists appear first (not measured) error: not seen SCREENSHOTS - file: airbnb_2026_home_d1440_full.jpg shows: full home at 1440, stitched from six 900px viewport shots with the sticky header hidden after the first; seams at 900px steps may repeat or skip a shelf title because lazy rows loaded between shots source: live https://www.airbnb.com/?locale=en&currency=USD 2026-09-25 key values: shelves 20px 600 titles, 7 cards per row, experience tiles radius 8, service tiles #F7F7F7 radius 20, inspiration grid 6 columns, footer #F7F7F7 3 columns do not copy: logo, 3D renders, listing and experience photos - file: airbnb_2026_home_m390_full.jpg shows: mobile home 390 (@2x, downscaled to 1x): first ~3370px in 4 viewport shots, then a grey separator and the end of the page with the footer; fixed bottom tab bar hidden after the first shot key values: 56px search pill, 40px chips, 18px shelf titles, 165px cards, stacked footer - see also Overview files airbnb_2026_home_d1440_top.jpg and airbnb_2026_home_m390_top.jpg, and Recipe search-bar files for the open search panel (the only overlay on this page besides the menu and fees dialog)