BRAND Airbnb 2026 · Recipe: search-bar

HEADER brand: Airbnb; design_date: 2026-09; kind: component; used_in: BRAND Airbnb 2026 · Page: home S1-S2, Page: search-results S1, Page: product-detail S1 (compact only) evidence: measured on live https://www.airbnb.com/?locale=en&currency=USD (desktop 1440x900, en-US, USD) 2026-09-25 from computed styles and the stylesheet rules found for the elements unless marked; panel radius and calendar cell values are (est) from screenshots LOOK At the top of the home page the header is a tall white band that fades to #F8F8F8 at the bottom. Under the logo row sits a large white search pill, 850px wide and 66px tall, split into three labelled segments: Where, When, Who. A small magenta circle with a magnifier sits at the right end. Clicking a segment turns the pill into a light grey track, and the chosen segment becomes a raised white pill. A white panel opens below with that segment's picker, and the magnifier circle widens into a gradient pill that reads "Search". After scrolling, the whole block shrinks into one short 46px pill ("Anywhere | Anytime | Add guests") centered in the 96px header. The category tabs above it disappear. STRUCTURE expanded (scroll 0, home and search pages) - header band: 0-200px tall; background linear-gradient(#FFFFFF 39.9%, #F8F8F8 100%); drawn as a 96px layer scaled on Y (scaleY 2.08 expanded -> 1 compact, transform-origin top) so it shrinks with the search; 1px hairline #EBEBEB at the bottom (est) - row 1 (96px): logo left at x 48; category tabs centered (Recipe category-tabs); right actions - row 2: search pill, top at y 102, centered, width 850px (fluid, max about 850), height 66px search pill layers (back to front) - track layer: bg #EBEBEB, border 0.67px solid #DDDDDD, radius 100px, opacity 0 at rest -> 1 when a segment is active - surface layer: bg #FFFFFF, border 0.67px solid #DDDDDD, radius 100px, box-shadow 0 0 0 1px rgba(0,0,0,0.02), 0 8px 24px rgba(0,0,0,0.10) (= --elevation-elevation3) - segments: Where 284px, When 283px, Who 278px (incl. button), each 66px tall, radius 32px; content padding-left 32px (label at x 319 for a pill starting at 287) - dividers: 1px x 32px #DDDDDD, vertically centered between segments; hidden next to the hovered or active segment (inf) - labels: 12px/16px 500 #222222 ("Where"); value line 14px/18px: input placeholder "Search destinations" 14px 500 #222222 placeholder colour #6A6A6A, "Add dates" / "Add guests" 14px 400 #6C6C6C - search button: 48x48 circle at the right end, 9px from the edge (x 1079 in a pill ending at 1137), bg #DA1249 (solid at rest), 16px magnifier icon, white, stroke 4px (bold) compact (after scrolling about 100px, and on all non-home pages) - header: 96px sticky white, logo left, right actions unchanged, tabs hidden - pill: 374x46px (content-sized) centered, bg #FFFFFF, border 0.67px #DDDDDD, radius 40px, shadow 0 1px 2px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.05) - content: small 3D house icon (48px image box, ~28px visible) + "Anywhere" | "Anytime" | "Add guests", each 14px/22px 500 #222222, 1px #DDDDDD dividers ~24px tall; 32px search circle (#DA1249, 12px icon) 7px from the right edge - on search results the text shows the query: "Homes in Osaka | Any week | Add guests" KEY PARAMETERS active segment: white pill radius 32px, height 66px, shadow 0 3px 12px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.08); the track behind it turns #EBEBEB search button active: width 48 -> 100px, height 48px, radius 24px, padding 10px, bg linear-gradient(to right, #E61E4D 0%, #E31C5F 50%, #D70466 100%), icon 16px + label "Search" 16px/20px 500 #FFFFFF, gap 8px (est) panel (When): top y 180 (12px below the pill), width 850px = pill width, left edges aligned, height ~542px, bg #FFFFFF, radius 32px (est), shadow 0 8px 28px rgba(0,0,0,0.28) (est, = --elevation-high) - Dates / Flexible segmented control: track 311x43px bg #EBEBEB radius 100px padding 0 4px; selected thumb 150x35px white radius 100px; labels 14px 500 #222222; centered, top 34px inside the panel - two month grids side by side (Sep and Oct), month title 16px 500 #222222 centered; weekday row S M T W T F S 12px 500 #6C6C6C; day cells ~52x54px (est), numbers 14px 500 (est) #222222; past days #C1C1C1 (est); today outlined 1.5px #222222 circle 48px (est); prev/next month chevrons 16px at the outer corners, prev disabled #C1C1C1 - flexible chips row at the bottom: "Exact dates" (selected: 0.67px solid #222222), "± 1 day", "± 2 days", "± 3 days", "± 7 days", "± 14 days"; height 33px, radius 24px, padding 8px 14px, 12px 400 #222222, unselected border 0.67px #DDDDDD, gap 10px Where panel: destination suggestions list (not measured, est 425px wide, left aligned under Where, 32px radius, 24px padding, rows with 58px rounded-square location icons on #F2F2F2) Who panel: guest counters (Adults, Children, Infants, Pets) with 32px circular minus/plus buttons 1px #B0B0B0 (not measured, est), right aligned under Who fees toast (appears with the panel): white, radius 12px, shadow elevation3, padding 8px 24px 8px 8px, 57px tall, 3D pink tag icon 40px + "Prices include all fees" 14px 500, bottom center of the viewport MOTION - header band and pill morph: transform with --motion-springs-fast (stiffness 300, damping 35, mass 1; 452ms as the CSS linear() curve: 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)); the big pill scales and moves up into the compact pill while its labels cross-fade; category tabs fade and move up (inf) - trigger: scroll down past ~100px -> compact; back at top -> expanded; clicking the compact pill re-expands it over the page with a dimmed backdrop - page scrim when the search is open: fixed layer rgba(0,0,0,0.25), opacity 0 -> 1, 150ms linear - segment activation: track opacity 0 -> 1 and the white active pill slides between segments (transform, spring fast, inf); 200ms cubic-bezier(0.2,0,0,1) for shadows - search button: width grows 48 -> 100px with the label fading in (spring fast, inf) - panel open: fade + 8px rise (est), --motion-enter-curve cubic-bezier(0.1,0.9,0.2,1), ~250ms (est); close with --motion-exit-curve cubic-bezier(0.4,0,1,1) - hover on an inactive segment: bg #EBEBEB pill under that segment (when the track is visible) or #F7F7F7 (at rest) (est) STATES hover: segment bg #F7F7F7 at rest (est); search button hover bg radial gradient (see Overview button-primary) focus-visible: segment inset ring 2px #222222 (est); search button 0 0 0 2px #FFFFFF, 0 0 0 4px #222222 keyboard: Escape closes the panel and returns focus to the segment; Tab moves Where -> When -> Who -> Search mobile (<744px): the bar becomes a 56px white pill "Start your search" centered (342px at 390), radius 40px, border 0.67px #DDDDDD, shadow 0 6px 20px rgba(0,0,0,0.10), 16px magnifier + 14px 500 label; tapping opens a full-screen sheet with stacked cards Where / When / Who (inf) reduced motion: morph replaced with instant swap, scrim fade kept (inf) HOW TO BUILD Two DOM states of one component in a sticky header: expanded (tabs + big pill) and compact (small pill). Drive the switch from a scroll threshold and animate the header background layer with scaleY and the pills with transform (FLIP from the big pill rect to the small one), using a spring or the linear() curve above. The active segment is an absolutely positioned white pill moved with transform. The track is a separate layer whose opacity animates. Panels are absolutely positioned under the bar and share its width and left edge. PITFALLS Use a grey track (#EBEBEB) for the active state, not an outline. The white pill is the surface, the grey appears only when active. The rest search button is solid #DA1249 and only the active one has the gradient. Labels are 12px medium, not bold. The compact pill must be 46px and content-sized, not a scaled-down copy. Dividers are 32px tall, not full height. The shadow is soft and neutral (0 8px 24px 10% black), never coloured. SCREENSHOTS - file: airbnb_2026_search-bar_d1440_when-open.jpg shows: home at 1440x900, When segment active: grey track, white active pill, gradient "Search" button, dates panel with two months, Dates/Flexible control, flexible chips, fees toast source: live https://www.airbnb.com/?locale=en&currency=USD 2026-09-25 key values: pill 850x66 radius 100; active pill radius 32; button 100x48 gradient #E61E4D-#D70466; segmented track #EBEBEB do not copy: 3D icons, listing photos; use placeholders - file: airbnb_2026_search-bar_d1440_compact.jpg shows: compact header after scrolling 600px: 96px header, 374x46 pill with house icon, "Anywhere / Anytime / Add guests", 32px #DA1249 button source: live https://www.airbnb.com/?locale=en&currency=USD 2026-09-25