BRAND Airbnb 2026 · Overview

HEADER brand: Airbnb; domain: airbnb.com; industry: travel marketplace (homes, experiences, services); design_date: 2026-09 (the 2025 "Homes / Experiences / Services" redesign with 3D icons, refined through the 2026 Summer Release) captured: live https://www.airbnb.com/?locale=en&currency=USD (visitors from other regions are redirected to a local subdomain such as ru.airbnb.com; the locale and currency query params select en-US / USD on www), /rooms/12855489, /s/Osaka/homes, 2026-09-25; content (cities, listings) is personalised by IP location (Japan here), the design is not evidence: measured from the :root custom properties of the core-guest-spa client stylesheet (a0.muscache.com/.../core-guest-spa/entrypoints/client.37c1c188d0.css) and the inline Linaria styles, the --dls-button / --dls-icon-button variables and :hover / :focus-visible / :active rules found for each element, and computed styles on the live pages, unless marked style_tags: card-ui, soft-3d, bento-grid (light) viewports: desktop 1440, mobile 390; breakpoints: 550, 744 (main mobile/tablet switch), 880, 950 (header layout), 1060, 1128 (desktop), 1360, 1440 pages: BRAND Airbnb 2026 · Page: home; BRAND Airbnb 2026 · Page: product-detail; BRAND Airbnb 2026 · Page: search-results recipes: BRAND Airbnb 2026 · Recipe: search-bar; BRAND Airbnb 2026 · Recipe: category-tabs; BRAND Airbnb 2026 · Recipe: listing-shelf rebuild check: passed 2026-09-25 at 1440 (home header, search pill and two shelves, built from the memos only with Plus Jakarta Sans and placeholders; fixes applied: exactly 7 cards per shelf clipped at the content edge, weight 550 for the 500 roles in the substitute font, bold arrow icons); 390 not done RECOGNITION KEYS 1 Near-black #222222 text on white, with one warm pink-red: Rausch #FF385C in the logo, #DA1249 for the search button and the brand pink, and the primary CTA as a horizontal gradient #E61E4D -> #E31C5F -> #D70466 on a full pill. 2 One rounded grotesk family, Airbnb Cereal VF (variable), mostly at 500 and 600; titles are small and tight (20px/600 section titles, 22px/500 page section heads, 26px/500 page H1), no display type except the huge 100px rating number. 3 Photography-first grids and horizontal shelves of listing cards with 20px image radius, a frosted white badge top-left and a translucent heart top-right, with two small text lines under each photo; on desktop a shelf shows a whole number of cards (7 at 1440) flush with the content edges. 4 The header search pill: a white 850x66px capsule with Where / When / Who segments, 1px #DDDDDD dividers and a magenta circle button, shrinking to a 46px "Anywhere | Anytime | Add guests" pill on scroll. 5 Glossy 3D-rendered object icons (globe, house, hot-air balloon, service bell, pink price tag, gold laurels) instead of flat icons for categories and feature moments. 6 Soft neutral shadows only (0 6px 16px rgba(0,0,0,0.12) for cards, 0 8px 28px rgba(0,0,0,0.28) for dialogs); grey #F2F2F2 filled secondary buttons and round icon buttons. 7 Generous radii everywhere: 8px chips and tiles, 12px buttons, menus and galleries, 20px cards and maps, 24px host card, 32px dialogs and the search panel, full pills for the search bar and primary CTA. 8 Springy UI: presses shrink controls by 2px, icon buttons grow 7% on hover, and headers and panels move with spring curves. GUARDRAILS no dark mode on web (a dark token set exists in CSS but is not applied); no coloured backgrounds or dark bands on content pages (the only greys are #F7F7F7 footer, #F2F2F2 fills and the header's white-to-#F8F8F8 fade); no pure black text (#222222; #000000 only on hover of some icons); no bold 700 headings except the host name card; no serif; no uppercase except 10px 700 field labels in the booking card; no hard or coloured shadows; no square images (minimum radius 8px); no borders thicker than 1px except selection (2px) and focus rings; no gradients except the Rausch CTA gradients and the header fade; no underline on navigation links (only on text links such as "Show original", "Share", "Report this listing"); no flat line icons for categories; no peeking partial card at the right end of desktop shelves. Older Airbnb elements not in this design: the 2019-2024 row of 60+ small category icons with the Filters button under the header, the "Airbnb Cereal" static cuts with 800 weight headings, the red "Search" pill with the 2016 Rausch #FF5A5F, square listing photos with 12px radius and the grey "Superhost" ribbon. TOKENS /* color: palette (names as in the DLS) */ --palette-black: #000000; --palette-hof: #222222; --palette-foggy: #6A6A6A; --palette-bobo: #B0B0B0; --palette-deco: #DDDDDD; --palette-bebe: #EBEBEB; --palette-faint: #F7F7F7; --palette-white: #FFFFFF; --palette-rausch: #FF385C; --palette-product-rausch: #E00B41; --palette-arches: #C13515; --palette-arches12: #FFF8F6; --palette-ondo: #E07912; --palette-spruce: #008A05; --palette-plus: #92174D; --palette-luxe: #460479; --grey: 100 #F7F7F7, 200 #F2F2F2, 300 #EBEBEB, 400 #DDDDDD, 500 #C1C1C1, 600 #8C8C8C, 700 #6C6C6C, 800 #515151, 900 #3F3F3F, 1000 #222222; --rausch: 100 #FFF5F6, 200 #FFEEF0, 300 #FEE5E7, 400 #FFD2D7, 500 #FFABB6, 600 #FF385C, 700 #DA1249, 800 #A21039, 900 #732139, 1000 #361A21; --red: 100 #FFF5F3 ... 600 #F84A43, 700 #D7251C, 800 #A3150F; --green: 200 #E6F6E9, 300 #DCF1E1, 700 #038026, 800 #015F1A; --blue: 100 #F0F8FF, 600 #318CF7, 700 #166BD8, 800 #0D4DAA; --orange: 600 #EB6100; --purple: 700 #6E57E4; --magenta: 700 #BD31A1; --beige: 100 #F7F6F2, 200 #F4F2EC, 400 #DFDCD6, 1000 #232221; /* color roles */ --color-primary: linear-gradient(to right, #E61E4D 0%, #E31C5F 50%, #D70466 100%); /* primary CTA fill */ --color-primary-hover: radial-gradient(circle at center, #FF385C 0%, #E61E4D 27.5%, #E31C5F 40%, #D70466 57.5%, #BD1E59 75%, #BD1E59 100%); /* overlay, 200% size, follows the cursor */ --color-on-primary: #FFFFFF; --color-brand: #FF385C; /* logo, selected icons */ --color-brand-strong: #DA1249; /* search button, active bottom-tab label, brand text */ --color-ink: #222222; --color-text: #222222; --color-text-hover: #000000; --color-text-muted: #6C6C6C; --color-text-tertiary: #8C8C8C; --color-text-disabled: #C1C1C1; --color-text-quaternary: #515151; --color-surface: #FFFFFF; --color-surface-alt: #F7F7F7; --color-surface-hover: #F7F7F7; --color-fill: #F2F2F2; /* secondary button, icon button, arrow chip */ --color-fill-hover: #EBEBEB; --color-surface-dark: #222222; /* inverse button, tooltips #111111 */ --color-surface-dark-hover: #3F3F3F; --color-on-dark: #FFFFFF; --color-border: #DDDDDD; --color-divider: #EBEBEB; --color-border-strong: #222222; --color-border-hover: #222222; --color-link: #222222; /* underlined */ --color-link-legal: #0D4DAA; --color-focus: #222222; --color-success: #038026; --color-success-bg: #E6F6E9; --color-error: #C13515; /* text */ --color-error-strong: #D7251C; --color-error-bg: #FFF5F3; --color-warning: #EB6100; --color-info: #318CF7; --scrim-primary: rgba(26,26,26,0.40); --scrim-secondary: rgba(26,26,26,0.60); --scrim-search: rgba(0,0,0,0.25); --gradient-plus: linear-gradient(to right, #BD1E59 0%, #92174D 50%, #861453 100%); --gradient-luxe: linear-gradient(to right, #59086E 0%, #460479 50%, #440589 100%); --gradient-header: linear-gradient(#FFFFFF 39.9%, #F8F8F8 100%); /* font */ --font-display: "Airbnb Cereal VF", "Circular", -apple-system, "BlinkMacSystemFont", "Roboto", "Helvetica Neue", sans-serif; --font-text: same stack; --font-mono: not used /* type scale: size/line-height/weight/tracking; mobile values in comments */ --type-display-rating: 100px/100px/500/-2px; /* review score on product page */ --type-special-display: 40/44, 48/54, 60/68, 72/74 all 600 (tokens; not seen on the described pages) --type-h1: 26px/30px/500/normal; /* product page title; mobile 22px/26px (est) */ --type-h2-page: 22px/26px/500/normal; /* product page section heads; mobile 22px */ --type-h2-shelf: 20px/24px/600/-0.18px; /* home shelf titles; mobile 18px/24px/600 */ --type-title-16: 16px/20px/600; --type-title-18: 18px/24px/500; /* host details, card titles in panels */ --type-lead: 18px/28px/400; --type-body: 16px/24px/400; /* descriptions, reviews */ --type-body-tight: 16px/20px/400; --type-body-14: 14px/20px/400; --type-ui-14: 14px/18px/500; /* nav, buttons small, footer headings */ --type-card-title: 13px/16px/500; --type-card-meta: 12px/16px/400; /* home cards */ --type-card-15: 15px/19px/500 and 400; /* search cards */ --type-label: 12px/16px/500; /* search segment labels */ --type-caption: 12px/16px/400; --type-micro: 11px/13px/600; /* badges */ --type-field-label: 10px/12px/700 (text written in caps: CHECK-IN); --type-tab-bar: 10px/12px/500; --type-button: 16px/20px/500; --type-button-small: 14px/18px/500; --type-chip: 12px/16px/400; /* space */ --space: 2 4 8 12 16 24 32 40 48 64 80; --container: fluid with 48px side margins on home and search (>=1128), 1120px max centered on product pages (x 152 at 1440); --margin-tablet: 40px (est); --margin-mobile: 24px; --gutter: 12px (card shelves), 24px (search grid), ~93px between the product content column and the booking card --section-pad: product page sections 48px top/bottom separated by 1px #DDDDDD rules; home shelves ~48px apart /* shape */ --radius-tiny: 4px; --radius-chip: 8px; --radius-button: 12px; /* secondary; header text button 20px pill */ --radius-menu: 12px; --radius-gallery: 12px; --radius-card-image: 20px; --radius-tile: 20px; --radius-map: 20px; --radius-host-card: 24px; --radius-dialog: 32px; --radius-cta: 999px; --radius-pill: 100px; --radius-input-group: 8px (est); --border: 0.67px solid #DDDDDD; /* rendered hairline 1px at 1x */ --divider: 1px solid #DDDDDD (product page), #EBEBEB (footer, search); /* depth (DLS elevation) */ --shadow-tertiary: 0 2px 4px rgba(0,0,0,0.18); /* photo arrows */ --shadow-secondary: 0 6px 16px rgba(0,0,0,0.12); /* booking card */ --shadow-primary: 0 6px 20px rgba(0,0,0,0.20); /* mobile search pill uses 0 6px 20px rgba(0,0,0,0.10) */ --shadow-high: 0 8px 28px rgba(0,0,0,0.28); /* dialogs */ --shadow-menu: 0 2px 16px rgba(0,0,0,0.12); --shadow-e1: 0 0 0 1px rgba(0,0,0,0.02), 0 2px 4px rgba(0,0,0,0.16); --shadow-e2: 0 0 0 1px rgba(0,0,0,0.02), 0 2px 6px rgba(0,0,0,0.04), 0 4px 8px rgba(0,0,0,0.10); /* badges */ --shadow-e3: 0 0 0 1px rgba(0,0,0,0.02), 0 8px 24px rgba(0,0,0,0.10); /* search pill, host card, toasts */ --shadow-e4: 0 0 0 1px rgba(0,0,0,0.02), 0 4px 8px rgba(0,0,0,0.08), 0 12px 30px rgba(0,0,0,0.18); --shadow-e5: 0 0 0 1px rgba(0,0,0,0.02), 0 6px 8px rgba(0,0,0,0.08), 0 16px 56px rgba(0,0,0,0.18); --blur-glass: regular rgba(250,250,250,0.72) + blur(24px) saturate(1.6); thick rgba(240,240,240,0.86) + blur(12px) saturate(3); extra-thick rgba(255,255,255,0.925) + blur(16px) saturate(1.6); /* tokens; the badges use plain rgba(255,255,255,0.8) */ /* motion */ --ease-standard: cubic-bezier(0.2,0,0,1); --ease-enter: cubic-bezier(0.1,0.9,0.2,1); --ease-exit: cubic-bezier(0.4,0,1,1); --ease-linear: cubic-bezier(0,0,1,1); --spring-fast: stiffness 300, damping 35, mass 1 -> 452ms, linear(0, 0.186 10%, 0.465 20%, 0.682 30%, 0.822 40%, 0.905 50%, 0.951 60%, 0.976 70%, 0.990 80%, 0.996 90%, 1); --spring-standard: stiffness 175, damping 26 -> 584ms; --spring-slow: stiffness 100, damping 20 -> 746ms; --spring-fast-bounce: stiffness 250, damping 22 -> 449ms (overshoot to 1.044); --spring-medium-bounce: stiffness 175, damping 18.5 -> 574ms (overshoot 1.044); --spring-slow-bounce: stiffness 100, damping 14 -> 762ms; --dur-fast: 100ms (press); --dur-base: 200-250ms (hover, focus); --dur-slow: 300ms (colour, indicator); /* focus */ --focus-ring: box-shadow 0 0 0 2px #FFFFFF, 0 0 0 4px #222222 (buttons, cards, icon buttons via ::before); text tabs: outline 2px solid #222222, offset 4px, radius 8px; menu rows: inset 0 0 0 2px #222222 /* sizes */ --button-height: 48px (primary), 40px (header text button), 32-33px (chips), 28px / 32px / 40px icon buttons; --header-height: 96px; --tab-bar-height: 65px + safe area (mobile) dark_mode: none on web (a prefers-color-scheme block exists for an unused theme class) FONTS brand: Airbnb Cereal VF (Airbnb's own variable typeface by Dalton Maag, wght axis), self-hosted woff2 on a0.muscache.com, split into Latin, Italic, Arabic, Cyrillic and other unicode-range files; weights used 400, 500, 600, 700; tracking normal except -0.18px on shelf titles and -2px on the 100px rating; no OpenType features switched on. Declared fallback: Circular, then system UI. license: proprietary (not licensable) alternative (tested in the rebuild): Plus Jakarta Sans variable (OFL), same sizes; map Cereal 400 -> 400, 500 -> 550, 600 -> 600, 700 -> 700 (Jakarta 500 looks lighter than Cereal 500); tracking -0.01em on 20px+ titles. Second choice: DM Sans at 500/600 (slightly narrower, raise sizes by 0.5px on 13-15px text). Avoid Inter (too tall and square) and Poppins (too geometric and wide). TYPOGRAPHY RULES Weight does the work instead of size: 600 for shelf titles and badges, 500 for most UI, labels, card titles and page heads, 400 for body and grey meta. Sizes are small (12-16px for nearly all UI). Only the product title (26px), page section heads (22px) and the rating hero (100px) are larger. Sentence case everywhere ("Popular homes in Osaka", "Show all 45 amenities"). No caps except the tiny field labels "CHECK-IN / CHECKOUT / GUESTS" (10px 700). Grey meta lines use #6C6C6C, joined with " · " dots (12px 700 #C1C1C1 or inherited). Prices: the current price is in text colour, 500, underlined on search cards; the original price is struck through in grey #6C6C6C. Links in text: #222222, underlined, 500 ("Show original", "Share", "Save", "Report this listing"). Stars: small filled star glyph "★" in #222222 before the rating. COLOR RULES About 95% white and near-black. Photography supplies all other colour. Rausch pink only for: logo (#FF385C), the search button (#DA1249 solid at rest, gradient when expanded), the primary booking CTA (gradient), the active mobile tab-bar icon and label (#DA1249), the saved heart (#FF385C) and small brand illustrations (3D price tag). Never for text links or large areas. Grey fills #F2F2F2 for secondary buttons, icon buttons and arrow chips (hover #EBEBEB); #F7F7F7 for the footer, service tiles and hover rows. Success green #038026 only for small promo tags ("Book early to save"); error #C13515 for form errors. Header band: white fading to #F8F8F8 under the search, the only gradient background. Image overlays: none except the frosted badges and the heart. LAYOUT container: home and search are fluid with 48px margins at >=1128 (content 1329px at 1440 with scrollbar), 40px at 744-1127 (est), 24px below 744; product pages use a centered 1120px column (x 152-1272 at 1440) grid: home = horizontal shelves of a whole number of cards per row (7 at 1440: width (content - 6 x 12) / 7); search = 2 columns of 303px cards with a 24px gap on the left (list 630px) and a 650px sticky map on the right (x 727, top 192, radius 20px); product = 653px content column + 372px booking card column section rhythm: home shelves at a ~300-330px pitch (title 20px, cards ~230px, text lines); product sections 48px vertical padding with 1px #DDDDDD dividers across the 653px column; the footer is a #F7F7F7 band density: comfortable; alignment: left, except centered header search and centered dialogs typical composition: sticky header with centered search -> stacked horizontal card shelves -> "Inspiration" tabbed link grid -> grey footer SHAPE AND DEPTH radius: 8px (experience category tiles, "Show all photos" button, small dark buttons), 12px (secondary buttons, menus, gallery corners, booking card, translation note, Guest favorite box), 20px (listing images, map, service tiles, search cards), 24px (host card, date chips, filter chips), 32px (dialogs, search panel), 40-100px (search pills), 20px (header "Become a host"), 999px (CTA) borders: 0.67px/1px #DDDDDD on the search pill, booking card, field groups, filter chips, the Guest favorite box (radius 12px, padding 22px 26px), dividers; 1px #EBEBEB for footer and search list rules shadows: neutral black only, see TOKENS; cards on the home page have no shadow; the booking card and search pill float with soft shadows materials: frosted badges rgba(255,255,255,0.8); pagination dots on media rgba(255,255,255,0.6); glass tokens exist but are rarely visible textures: none COMPONENTS button-primary (booking CTA "Check availability" / "Reserve"): height 48px, full width of its card (323px), radius 999px, bg --color-primary gradient, text 16px/20px 500 #FFFFFF centered, no icon hover: a radial-gradient overlay (--color-primary-hover) at background-size 200% 200% fades in (opacity 0 -> 1, 1.25s) and its centre follows the pointer: background-position calc((100 - var(--mouse-x)) * 1%) calc((100 - var(--mouse-y)) * 1%), --mouse-x/y set from JS in percent focus-visible: box-shadow 0 0 0 2px #FFFFFF, 0 0 0 4px #222222; transition box-shadow 200ms cubic-bezier(0.2,0,0,1) active: button scales to (width-2)/width and (height-2)/height (shrinks 1px per side), 100ms (est); the overlay ripples: scale(5) and opacity 0 over 2s disabled: bg #DDDDDD, text #FFFFFF (inf from --palette-bg-primary-inverse-disabled) button-dark (dialogs "Got it", "Log in"): bg #222222, text 16px/20px 500 #FFFFFF, radius 8px, height 48px, padding 0 24px; hover bg #000000 (est, token primary-inverse-hover #3F3F3F exists); transitions box-shadow 200ms, transform 100ms cubic-bezier(0.2,0,0,1) button-secondary (grey): bg #F2F2F2, text 16px/20px 500 #222222 ("Show all 45 amenities", "Show more", "Show all 272 reviews"), radius 12px, height 48px, padding 14px 24px, no border hover: bg #EBEBEB; focus-visible ring as above; active: shrink 2px; disabled: text #C1C1C1 button-small-grey ("Show all photos" on the gallery, "Message host"): bg #F2F2F2, radius 8px, height 32px, padding 8px 16px, 12px 500 with a 16px icon button-ghost (header "Become a host"): transparent, 14px/18px 500 #222222, height 40px, padding 11px 12px, radius 20px; hover bg #F7F7F7; active bg #F7F7F7 + shrink 2px; transition background-color 300ms, color 300ms, box-shadow 200ms, transform 250ms, all cubic-bezier(0.2,0,0,1) icon-button: circle bg #F2F2F2, bold icon 12-18px #222222; sizes 40px (header globe, profile, menu), 28px (shelf arrows), 32px (photo arrows: white 90% with shadow-tertiary) hover: pseudo bg #EBEBEB and scale 1.07143 (28px) or about 1.05 (40px, est), with the icon counter-scaled so it keeps its size; active scale(38/40); disabled opacity 0.5, icon #C1C1C1; focus ::before ring 0 0 0 2px #FFFFFF, 0 0 0 4px #222222, 250ms text link: #222222, 14-16px 500, underline 1px, offset ~2px; hover #000000; focus outline 2px #222222 (est) card (listing): see Recipe listing-shelf; no border, no shadow, image radius 20px, badge and heart overlays; focus ring 2px white + 4px #222222 around the card card (floating: booking, host): white, 1px #DDDDDD (booking) / no border (host), radius 12px / 24px, shadow-secondary / shadow-e3, padding 24px input group (booking dates): 1px #B0B0B0 (est) outer border, radius 8px (est), two cells CHECK-IN | CHECKOUT side by side (56px) and GUESTS (60px) below, 1px internal dividers; label 10px 700 #222222 caps, value 14px 400 #6C6C6C (placeholder) or #222222; focus: active cell gets 2px #222222 border and radius 8px (est) search field (header): see Recipe search-bar select (Guests): part of the input group with a 16px chevron-down on the right chip / filter (search page): height 33px, radius 24px, border 0.67px #DDDDDD, padding 8px 12px, 12px 400 #222222; selected: 0.67px #222222 border and bg #F7F7F7 (est); hover border #222222 (est) segmented control (Dates / Flexible): track #EBEBEB radius 100px padding 4px, thumb white 35px radius 100px, 14px 500 tabs (text, "Inspiration for future getaways"): 14px/18px 500, inactive #6C6C6C, active #222222 with a 2px #222222 underline 12px below (est), padding 0 16px badge: frosted white pill (listing-shelf); green promo tag 11px 500 #038026 avatar: 40px circle with a small pink Superhost shield (#FF385C, 16px) at the bottom right rating hero: gold 3D laurel images either side of "4.91" at 100px/500/-2px, "Guest favorite" 20px 600 below, 16px grey copy toast: white, radius 12px, shadow-e3, padding 8px 24px 8px 8px, 3D icon 40px + 14px 500 text, bottom center modal / dialog: white, radius 32px, shadow-high 0 8px 28px rgba(0,0,0,0.28), width 393px (small) to 568px (est); close "×" 16px top-left inside 16px padding; title 22px/26px 600 animated per character (see MOTION); backdrop none on the info dialog, rgba(26,26,26,0.40) scrim on larger modals dropdown menu (header hamburger): 265px wide, radius 12px, shadow 0 2px 16px rgba(0,0,0,0.12), padding 12px 0; rows 36px, padding 9px 24px, 14px 400 #222222 with optional 16px leading icon; a two-line promo row "Become a host / It's easy to start hosting and earn extra income." (14px 500 + 12px #6C6C6C) with a 3D figure right; 1px #DDDDDD dividers inset 24px; hover row bg #F7F7F7; focus row inset 0 0 0 2px #222222 tooltip: bg #111111, text #FFFFFF 12px (token), radius 8px (est) skeleton: #F2F2F2 boxes with the same radii, shimmer (not measured, est) GLOBAL CHROME header (desktop): see Recipes search-bar and category-tabs. 96px row: logo (Rausch #FF385C "bélo" symbol + wordmark, 102x32px) at x 48, y 32; category tabs centered; right: "Become a host" ghost button, 40px profile icon button (or globe "Choose a language and currency" in some states), 40px menu button, 12px apart. Home and search at scroll 0 add a 106px search row (total ~200px) on a white-to-#F8F8F8 band with a 1px #EBEBEB bottom rule. The header is sticky; once scrolled it collapses to 96px with the compact search pill. Product pages use the compact header, not sticky (it scrolls away) and are replaced by an 80px sticky section nav (Photos, Amenities, Reviews, Location, 14px 400 #222222, 24px apart) with price and Reserve at the right once the booking card leaves the view. mobile header and menu (<744px): no logo bar; a 56px "Start your search" pill at the top (24px margins) with the category chips row below (Recipe category-tabs); a fixed bottom tab bar, 65px + safe area, white with a 0.67px #EBEBEB top border: Explore (search icon), Wishlists (heart), Log in (profile) or Trips / Messages / Profile when signed in; 24px icons, labels 10px/12px, active #DA1249 500, inactive #6C6C6C 400; the bar hides on scroll down and returns on scroll up (inf). Menu items live on the Profile tab screen (no hamburger). footer: full-width #F7F7F7 band, padding 48px 48px 80px; three columns at x 48 / 496 / 944 (448px pitch): headings Support, Hosting, Airbnb 14px/18px 500 #222222; links 14px/18px 400 #222222 at a 36px pitch, no underline, hover underline; bottom row after a 0.67px #EBEBEB rule (24px above and below): "© 2026 Airbnb, Inc. · Privacy · Terms · Your Privacy Choices" (with a blue toggle icon) left, "English (US)" with globe icon and "$ USD" 14px 500 right plus Facebook, X and Instagram 18px icons. Mobile: the columns stack (padding 24px) with groups separated by rules; bottom row wraps. other: a pre-footer "Inspiration for future getaways" block on home (tabs + 6-column city link grid); an info dialog on first visit ("Now you'll see one price for your trip, all fees included." with a 3D tag icon); a smart app banner on mobile (Get the app / USE APP, platform banner, not part of the design); no cookie banner in the US. IMAGERY AND ICONS hero media: none; listing photos are the content. Homes: host-supplied interiors and exteriors, varied quality, natural colour, cropped to ~20:19 on home shelves, 4:3 on search cards, 560x476 + 4 x 272x238 grid on product pages experiences: bright candid photos of people doing things (cooking, surfing, markets), often vertical subjects 3D icons: glossy, soft-lit, slightly isometric renders of objects on transparent backgrounds (globe, house with tree, hot-air balloon, service bell, pink price tag, camera, chef knife, massage table, gold laurels, trophy), rendered at 72-240px, used for navigation, category tiles on #F7F7F7, toasts, the rating hero and menu promos; slight contact shadow, saturated accents (red, pink, green, brass) UI icons: Airbnb's own line icon set, 16-24px, 2px stroke (1.5px at 24px, est), rounded caps; small arrows and chevrons in 12px buttons are drawn bold (~3px at a 32px viewBox); hearts with 2px white stroke on photos map: Google Maps tiles in a light custom style inside a 20px radius frame; price pins are white pills ~28px tall (est) with 14px 600 #222222 prices and shadow-e1; the selected pin is #222222 with white text and scales 1.08 (est); a floating location pill, 40px zoom buttons stacked in a white 8px-radius group (est) illustrations: none apart from 3D renders video: none on the described pages MOTION intensity: functional with springs model: CSS transitions with spring curves written as linear() and cubic-bezier tokens; JS for the header morph, carousel paging and mouse-follow gradient hover policy: icon buttons scale 1.07 and fill #EBEBEB (250ms cubic-bezier(0.2,0,0,1)); text buttons fill #F7F7F7 (300ms); primary CTA shows the radial highlight following the pointer (1.25s fade in); photos do not zoom; cards do not lift press policy: every button shrinks by 2px per axis on :active (transform 100-250ms cubic-bezier(0.2,0,0,1)), heart and small buttons scale 0.92 scroll reveal: none signature motion: header search morph between the big and compact pills (Recipe search-bar); 3D tab icons with sliding underline and pressed/raised mobile chips (Recipe category-tabs); card shelves paging and card photo carousels (Recipe listing-shelf); dialog titles that write in per character (each letter a span fading and rising in sequence, ~15ms stagger, est) page transitions: client-side navigation; skeletons in #F2F2F2 reduced motion: (prefers-reduced-motion: reduce), (update: slow) and (update: none) remove focus and hover transitions; springs are replaced with instant changes (inf) RESPONSIVE >=1440: 48px margins, 7 home cards per row; search 2 columns + map 1128-1439: same layout, 6 cards per row (est); product column stays 1120px when it fits, else 80px margins (est) 950-1127: header tabs stay, "Become a host" hidden below ~1060 (est); search page map narrows 744-949: tablet: 40px margins (est), header shows the logo symbol only (inf), search pill narrows; search page shows the map behind a floating "Map" button (inf) <744: mobile layout: top search pill 56px, chips row, cards 165px (2.3 visible, rows scroll natively), shelf titles 18px/24px, bottom tab bar, footer stacked; product page becomes a full-bleed swipeable photo carousel (inf) with a fixed bottom bar showing the price and a gradient "Reserve" pill home height: ~5400px at 1440 (13 shelves, growing as rows lazy-load), ~4200px+ at 390 CONTENT AND VOICE headline style: plain, friendly noun phrases with a place name: "Popular homes in Osaka", "Stay in Kyoto", "Available next month in Sapporo", "Find services near you", "Capture memories nearby"; 3-6 words body: short factual lines; listing titles are host-written; UI copy is warm and simple ("Prices include all fees", "It's easy to start hosting and earn extra income.") CTA labels: "Search", "Check availability", "Reserve", "Show all photos", "Show more", "Show all 45 amenities", "Message host", "Become a host", "Got it" meta patterns: "$76 for 2 nights · ★ 4.91", "From $136 / guest", "4 guests · 1 bedroom · 2 beds · 1 bath", "Superhost · 11 years hosting" SUBSTITUTIONS Airbnb Cereal VF -> Plus Jakarta Sans variable 400/550/600 (or DM Sans); bélo logo -> a neutral wordmark placeholder in #FF385C; 3D icons -> own 3D renders or open 3D icon sets in the same glossy style, never Airbnb's files; listing photos -> own photos or neutral placeholders with 20px radius; UI icons -> Lucide at 2px stroke (bold 2.5-3px for 12px arrows); map -> any light-styled map or a #F2F2F2 placeholder with white price pills. TECH React SPA "core-guest-spa" with server rendering ("hyperloop"); Linaria zero-runtime CSS plus atomic classes (atm_*), DLS tokens as :root custom properties (--palette-*, --typography-*, --elevation-*, --motion-springs-*), component variables (--dls-button_*, --dls-icon-button_*); fonts and images on a0.muscache.com; Google Maps on search; OneTrust for consent outside the US SCREENSHOTS - file: airbnb_2026_home_d1440_top.jpg shows: home first screen at 1440x900, scroll 0: header band with 3D tabs (All selected), big search pill, first two shelves source: live https://www.airbnb.com/?locale=en&currency=USD 2026-09-25 key values: logo #FF385C 102x32 at x 48; tabs 14px 500 #6C6C6C / #222222; search pill 850x66; search circle 48px #DA1249; shelf title 20px 600; 7 cards 179.5x170.5 radius 20 do not copy: logo, 3D icons, listing photos; use placeholders - file: airbnb_2026_home_m390_top.jpg shows: home first screen at 390x844 @2x: platform app banner (not part of the design), "Start your search" pill 56px, raised/pressed category chips, shelves with 165px cards, fees toast, bottom tab bar with Explore active #DA1249 - file: airbnb_2026_overview_d1440_states.png shows: button-primary default, hover (radial highlight under the pointer), focus-visible (2px white + 4px #222222 ring); button-secondary #F2F2F2 default and #EBEBEB hover; cropped from the product page - file: airbnb_2026_overview_d1440_menu-open.jpg shows: header hamburger menu open: 265px panel radius 12, rows 14px, promo row with 3D figure, dividers; desktop has no other menu (the mobile menu is the bottom tab bar, see the m390 file)