Airbnb Design System

Overview

Airbnb's visual identity is built on warmth and approachability—a design language that balances marketplace utility with human hospitality. The canvas is a crisp white ({colors.canvas}), allowing content to breathe while the signature coral ({colors.primary} — #ff385c) injects brand energy precisely where it matters most: the search button, logo accent, and occasional CTAs. This is not a system that bathes pages in brand color; instead, it deploys color surgically, letting whitespace and photography carry emotional weight.

Typography centers on Airbnb Cereal VF, their proprietary variable font family, which renders at modest weights throughout—rarely exceeding 700 even at display sizes. The type voice is conversational but confident, using size and letter-spacing rather than weight escalation to establish hierarchy. Body copy settles into a comfortable 14px ({typography.body-md}) at regular weight, ensuring readability without visual heaviness.

Shape language is distinctly friendly: the iconic search bar uses an extreme 100px radius creating near-full pill geometry ({rounded.search-pill}), while buttons round to 32px ({rounded.pill}) or perfect circles for icon toggles ({rounded.circle}). Cards and containers soften to 4–8px radii. This consistent roundness signals approachability—the same visual cue that distinguishes Airbnb from more angular, corporate travel platforms.

The page architecture follows a clear hierarchy: sticky navigation with category tabs, a dominant search-forward hero (the "sticky search" pattern), followed by editorial inspiration grids. Each section is delineated by subtle background shifts between {colors.canvas}, {colors.surface-soft}, and {colors.surface-strong} rather than hard dividers. Shadows are rare and deliberately cool-toned when they appear, suggesting depth through atmosphere rather than heavy layering.

Key Characteristics

• Signature coral {colors.primary} (#ff385c) reserved exclusively for primary actions and brand identifiers—not backgrounds or large decorative fields
• Search-first hero with {component.search-bar-container} using extreme {rounded.search-pill} (100px) geometry and layered focus shadows
• Variable font Airbnb Cereal VF across all roles, with weight capped at 700 and negative tracking on display text
• Pill-shaped interactive elements ({rounded.pill} at 32px, {rounded.search-pill} at 100px) as the dominant shape vocabulary
• Subtle surface differentiation: {colors.canvas} → {colors.surface-soft} (#f7f7f7) → {colors.surface-strong} (#f2f2f2)
• Cool-toned elevation via {extensions.shadows.search-focus} with inner glow highlights
• Tab-based navigation within sections using underline indicators rather than filled backgrounds
• Badge system ({component.badge-new}) for feature announcements with inverted ink-on-dark treatment

Colors

Brand & Accent

• Primary ({colors.primary} — #ff385c): The signature Airbnb coral-red used for the search button, logo mark, and primary call-to-action elements. Never applied as a background wash.
• Primary Hover ({colors.primary-hover} — #e01f41): Slightly deepened coral for hover/interactive states on {component.button-search-primary} and similar branded elements.
• Primary Active/Pressed ({colors.primary-active} — #d70b35): Further saturated variant for pressed/active states, maintaining AA contrast against {colors.on-primary}.

Surface

• Canvas ({colors.canvas} — #ffffff): Pure white base background for navigation, search container, and primary content areas. The dominant surface in the light theme.
• Surface Soft ({colors.surface-soft} — #f7f7f7): Off-white used for section banding (hero area, inspiration grid container). Provides gentle visual separation from {colors.canvas}.
• Surface Strong ({colors.surface-strong} — #f2f2f2): Light gray for secondary surfaces—icon button backgrounds, input hover states, and subtle UI chrome.
• Surface Elevated ({colors.surface-elevated} — #dddddd): Medium gray for borders, dividers, and disabled-state backgrounds where visibility is needed without emphasis.
• Surface Dark ({colors.surface-dark} — #222222): Near-black used sparingly for high-contrast contexts (footer areas, dark mode surfaces if applicable).

Text & Ink

• Ink ({colors.ink} — #222222): Primary text color for headings, navigation labels, and body copy requiring maximum contrast. Used by {component.section-header} and {component.destination-card-title}.
• Body ({colors.body} — #6a6a6a): Secondary/muted text for subtitles, descriptions, and supporting information such as {component.destination-card-subtitle} ("Vacation rentals", "Monthly Rentals").
• Muted ({colors.muted} — #8a8a6a): Tertiary text for hints, placeholders, and de-emphasized UI labels.
• Muted Soft ({colors.muted-soft} — #b0b0b0): Lightest functional text for placeholder values inside {component.search-placeholder} and truly passive labels.
• On Primary ({colors.on-primary} — #ffffff): White text rendered atop {colors.primary} surfaces—search button icon/text, ensuring WCAG AAA compliance.
• On Dark ({colors.on-dark} — #ffffff): White text for use over {colors.surface-dark} or other dark backgrounds.
• Inverse Text ({colors.inverse-text} — #ffffff): White text for badges ({component.badge-new}) and any element needing reversed polarity.

Hairlines & Borders

• Hairline ({colors.hairline} — #dddddd): Standard border color for tab underlines, section separators, and card outlines. Matches {colors.surface-elevated} for cohesion.
• Hairline Soft ({colors.hairline-soft} — #ebebeb): Subtlest divider for interior spacing lines within components.
• Border Input ({colors.border-input} — #b0b0b0): Slightly darker border for form field outlines when not focused, providing adequate affordance.

Semantic

• Error ({colors.error} — #d70b35): Red aligned with {colors.primary-active} for validation errors and destructive actions.
• Success ({colors.success} — #008a00): Green for confirmation states, availability indicators, and positive feedback.
• Link ({colors.link} — #222222): Inline links inherit ink color rather than using blue, maintaining typographic consistency.
• Link Hover ({colors.link-hover} — #000000): Deepened to absolute black on interaction for subtle feedback.
• Badge New ({colors.badge-new} — #222222): Dark background for "NEW" announcement badges above navigation items like Experiences and Services.

Typography

Font Family

The entire system runs on Airbnb Cereal VF, Airbnb's custom variable font family delivered via WOFF2 variable font files from their CDN. The fallback stack is "Airbnb Cereal VF", Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif. This proprietary typeface supports weight interpolation (variable font axis), allowing precise tuning between 300–700. Italic variants exist but are rarely deployed on the homepage. The font includes localized cuts for Arabic, Cyrillic, Hebrew, Devanagari, Thai, and Greek scripts via separate unicode-range @font-face declarations.

Cereal VF occupies every role—headlines, body, labels, buttons—with no secondary typeface for display purposes. The system trusts size, letter-spacing, and context (not font switching) to differentiate voice.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 36px | 700 | 1.43 | -0.02em | Hero headlines (not visible in screenshot but standard) | | {typography.display-lg} | 28px | 700 | 1.43 | -0.02em | Section titles like "Inspiration for future getaways" | | {typography.title-md} | 22px | 500 | 1.18 | -0.44px | Subsection headers, card grouping titles | | {typography.title-sm} | 16px | 600 | 1.4 | 0 | Emphasized inline labels | | {typography.body-md} | 14px | 400 | 1.43 | 0 | Body copy, navigation items, search segments | | {typography.body-sm} | 13px | 400 | 1.38 | 0 | Secondary descriptions, fine print | | {typography.caption} | 12px | 400 | 1.33 | 0 | Badges, timestamps, metadata | | {typography.button} | 14px | 500 | 1.25 | 0 | Button labels, CTAs | | {typography.label-md} | 14px | 500 | 1.29 | 0 | Input field labels, tab navigation |

Principles

Airbnb's typographic philosophy prioritizes comfortable density over dramatic scale jumps. The range from 12px caption to 28px display heading spans only 16px of vertical difference—far tighter than many consumer apps. Hierarchy is reinforced through three mechanisms: weight modulation (400 body vs. 500 labels vs. 700 headlines), letter-spacing compression (-0.44px on {typography.title-md}, -0.02em on displays), and color tiering ({colors.ink} for primary text, {colors.body} for subtitles).

Notably, the system avoids bold weights beyond 700. Even the largest section headline ("Inspiration for future getaways") stops at 700 rather than pushing to 800 or 900. This restraint keeps the reading experience feeling conversational rather than aggressive. Uppercase is absent entirely—all text is sentence case or title case depending on grammatical convention, never forced caps for stylistic effect.

The {typography.title-md} role carries distinctive -0.44px letter-spacing, a micro-tuning choice that tightens mid-sized headings just enough to signal importance without reducing legibility. This detail separates Airbnb's typesetting from generic implementations.

Note on Font Substitutes

Airbnb Cereal VF is proprietary and not available via Google Fonts. For prototyping or fallback environments, substitute Inter (Google Fonts) as the closest open-source equivalent—it shares similar humanist proportions, excellent screen rendering at small sizes, and variable weight support. Define the substitution via CSS custom properties:

:root {
  --font-family-base: "Airbnb Cereal VF", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

If Inter is unavailable, Nunito or Noto Sans provide acceptable geometric alternatives, though they lack Cereal's specific character in numerals and the "a" terminal shape.

Layout

Spacing System

• Base unit: 2px ({spacing.xxs}), with practical increments at 3px, 4px, 6px, 8px, 10px, 12px, 15px, 16px, 24px, 32px, and 48px.

• Tokens:

  • {spacing.xxs} (2px): Micro-adjustments, focus ring offsets
  • {spacing.xs} (3px): Tight internal gaps
  • {spacing.xxs-plus} (4px): Icon-to-text gaps in compact buttons
  • {spacing.sm} (6px): Search bar internal vertical rhythm, badge padding
  • {spacing.sm-plus} (8px): Small component gaps
  • {spacing.md} (10px): Standard touch target padding supplement
  • {spacing.md-plus} (12px): Card internal padding minimum
  • {spacing.lg} (15px): Medium comfortable spacing
  • {spacing.lg-plus} (16px): Section horizontal padding
  • {spacing.xl} (24px): Card-to-card gaps, major component margins
  • {spacing.xxl} (32px): Large section breaks
  • {spacing.section} (48px): Vertical section padding (used in hero and inspiration bands)

• Section padding (vertical): {spacing.section} (48px) — applied to {component.hero-band} and {component.inspiration-section}.

• Card internal padding: Destination cards use implicit padding via flex gap rather than explicit padding tokens; estimated 8–12px internal breathing room.

• Gutters: Page-level horizontal gutter is approximately 48px on desktop (derived from header padding 0px 48px). Grid column gaps appear to be 16–24px based on the 7-column destination grid.

Grid & Container

• Max content width: 1425px (extracted from main and header width constraints).
• Density choice: Marketplace-dense. The destination grid packs 7 columns of city names at desktop width, prioritizing discovery breadth over editorial airiness.
• Grid behavior at desktop: The inspiration section uses a fluid 7-column grid with no fixed breakpoints visible in the screenshot—columns distribute evenly within the 1425px max-width container. Each cell contains a destination name + subtitle pair.
• Hero column split: The search bar is full-width centered within the container, with navigation items distributed horizontally above it (logo left, category tabs center-left, utilities right).

Whitespace Philosophy

Airbnb employs generous macro-whitespace with dense micro-content. Sections are separated by 48px vertical bands and background color shifts, but within those bands, content is tightly packed—the destination list shows minimal row spacing, fitting 8+ rows before scroll. This creates a "scannable catalog" feel appropriate for a travel marketplace where users browse many options quickly.

Header Architecture

┌──────────────────────────────────────────────────────────────────────────────┐
│ [🏠 airbnb]   [🏠 Homes] [🎈 Experiences 🔵NEW] [🔔 Services 🔵NEW]     [Become a host] [🌐] [☰] │
│              ────────                                                          │
│                                                                              │
│  ┌─────────────────────────────────────────────────────────────────────┐     │
│  │ Where          │ When           │ Who                    [🔍Search]│     │
│  │ Search dest.   │ Add dates      │ Add guests                       │     │
│  └─────────────────────────────────────────────────────────────────────┘     │
│                                                                              │
│  max-width: 1425px, centered                                                 │
└──────────────────────────────────────────────────────────────────────────────┘

Inspiration Section Layout

┌──────────────────────────────────────────────────────────────────────────────┐
│  Inspiration for future getaways                                             │
│  ───────────────────────────────────────────────────────────────────────────│
│  [Popular] [Arts & culture] [Beach] [Mountains] [Outdoors] [...]            │
│  ────────                                                                    │
│  Dallas         North Myrtle Beach  Portland        Nice          Cleveland │
│  Vacation rentals Monthly Rentals   House rentals   Condo rentals  Monthly..│
│                                                                              │
│  Galveston       Kauai              Portland        Minneapolis   Raleigh   │
│  Apartment...    Vacation rentals   Apartment...    Apartment...  Vacation..│
│                                                                              │
│  ... (7 columns × ~8 rows visible)                                          │
│                                                                              │
│  background: {colors.surface-soft} #f7f7f7                                  │
│  padding-top/bottom: 48px                                                   │
└──────────────────────────────────────────────────────────────────────────────┘

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | Flat baseline | No shadow, {colors.canvas} background | Navigation bar, page body | | Hairline outline | 1px {colors.hairline} border | Tab indicator line, subtle dividers | | Soft drop (search focus) | {extensions.shadows.search-focus} — multi-layer cool-toned with inner glow | {component.search-bar-focused} state | | Elevated card | {extensions.shadows.elevated} — 1px border + diffuse 8/24px blur | Dropdown panels, modal surfaces (inferred) |

Philosophy: Airbnb favors atmospheric depth over heavy layering. The search bar shadow is the most complex elevation treatment visible—a sophisticated four-part shadow combining external blurs with an inner highlight (rgb(215,235,255)) that suggests glass or polished material. This "inner light" technique is signature Airbnb DLS (Design Language System) and appears nowhere else on the homepage screenshot, reserving its impact for the moment of user intent (search interaction).

Most components remain flat against their surface backgrounds. Cards in the destination grid cast no shadow—they rely on typography contrast alone. This restraint keeps the page feeling fast and modern.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 4px | Badges ({component.badge-new}), minor UI accents | | {rounded.DEFAULT} | 8px | Default card/container rounding (standard DLS) | | {rounded.md} | 12px | Medium containers, dropdown panels | | {rounded.lg} | 16px | Larger cards, image containers | | {rounded.xl} | 20px | {component.button-become-host} and similar soft rectangles | | {rounded.pill} | 32px | Search segments, primary button geometry | | {rounded.circle} | 50% | Icon buttons ({component.icon-button-circle}, menu toggle) | | {rounded.full} | 9999px | Reserved for fully rounded elements | | {rounded.search-pill} | 100px | Outer search bar container—extreme rounding approaching full pill |

Photography Geometry

No significant imagery appears in the provided screenshot (destination grid shows text-only city cards). However, Airbnb's established pattern uses 1:1 square aspect ratio for listing thumbnails with {rounded.lg} (16px) corner radius. Hero imagery typically uses 16:9 or 21:9 cinematic crops with no rounding (full-bleed). Avatars are perfectly circular ({rounded.circle}). These conventions should be assumed for implementation of listing cards not visible in this viewport.

Components

No hover states documented. Hover behavior is unreliable to extract from a single screenshot. State variants live as separate entries in the components: frontmatter (e.g. {component.button-search-primary-hover}, {component.search-segment-hover}); add hover styling at implementation time per your stack's conventions.

Buttons

{component.top-nav} — The persistent header bar spanning full viewport width. Height 80px, background {colors.canvas}, containing logo left, navigation center, utility actions right. Horizontal padding 48px derived from container style. No border or shadow—floats flat above content.

{component.nav-link-primary} — Category navigation items (Homes, Experiences, Services) appearing in the header. Transparent background, {typography.body-md} text, {colors.ink}. Active state indicated by thick bottom border (underline), captured in {component.nav-link-active}.

{component.button-become-host} — Ghost-style text button in header right area. Transparent background with 20px rounded corners ({rounded.xl}), 11px vertical / 12px horizontal padding, medium weight ({typography.button}). On hover/focus, likely gains {colors.surface-strong} background.

{component.icon-button-circle} — Circular icon toggle for globe/language selector. 40×40px size ({size}), 50% border-radius ({rounded.circle}), {colors.surface-strong} background fill. Contains SVG icon in {colors.ink}.

{component.icon-button-menu} — Circular hamburger menu button at far right. Same 40×40px dimensions as globe button but transparent background, revealing only on interaction or mobile.

{component.button-search-primary} — The coral search action button positioned at the right end of the search bar. {colors.primary} background, {colors.on-primary} text/icon, 48×48px with {rounded.pill} geometry (32px radius). Houses magnifying glass SVG. Hover state documented as {component.button-search-primary-hover} using {colors.primary-hover}.

Search & Inputs

{component.search-bar-container} — The outer pill-shaped container housing all search segments. Extreme 100px radius ({rounded.search-pill}), 66px total height, 24px left padding, 6px elsewhere. White {colors.canvas} background. When focused, transitions to {component.search-bar-focused} with complex {extensions.shadows.search-focus} shadow including inner highlight glow.

{component.search-segment} — Individual clickable areas within the search bar (Where, When, Who). Pill-shaped with {rounded.pill} (32px), transparent background, 14px/24px padding. Uses {typography.body-md} for placeholder text. Hover variant {component.search-segment-hover} applies {colors.surface-soft} background.

{component.search-label} — Small bold label ("Where", "When", "Who") above placeholder text in each segment. {typography.label-md} (14px/500 weight), {colors.ink}.

{component.search-placeholder} — Gray hint text below labels ("Search destinations", "Add dates", "Add guests"). {typography.body-md} in {colors.muted-soft} (#b0b0b0).

{component.text-input} (implied from CSS) — Underlying input field within search segments. Inherits segment styles, removes default browser borders/appearance. Focus state would be handled by parent {component.search-bar-focused}.

Navigation & Tabs

{component.tab-nav-item} — Category tabs in the inspiration section (Popular, Arts & culture, Beach, etc.). Label-weight text (14px/500), {colors.ink}, transparent background. Active item shown in {component.tab-nav-item-active} with 2px+ bottom border in {colors.ink}.

{component.section-header} — Large section title "Inspiration for future getaways". {typography.display-lg} (28px/700), {colors.ink}, significant bottom margin before tab row.

Content Cards

{component.destination-card} — Text-only destination entry in the inspiration grid. No background container visible—text flows directly on {colors.surface-soft}. Comprises two sub-components:

{component.destination-card-title} — City name (Dallas, Tokyo, etc.) rendered at {typography.label-md} (14px/500), {colors.ink}.

{component.destination-card-subtitle} — Property type descriptor ("Vacation rentals", "Monthly Rentals") at {typography.body-md} (14px/400), {colors.body} (#6a6a6a). Appears directly beneath title with minimal gap (~2-4px).

Badges & Indicators

{component.badge-new} — "NEW" announcement badge floating above Services/Experiences nav items. {colors.badge-new} (#222222) background, white {colors.inverse-text} text, tiny 2px/6px padding, 4px radius ({rounded.sm}), {typography.caption} sizing. All-caps implied by usage.

Section Containers

{component.hero-band} — Top section containing search apparatus. {colors.surface-soft} (#f7f7f7) background, 48px vertical padding, spanning full width. Content constrained to 1425px center.

{component.inspiration-section} — Lower section with destination grid. Same {colors.surface-soft} background, 48px padding, contains header + tabs + grid.

{component.divider-line} — Thin horizontal rule in {colors.hairline} (#dddddd) separating tab row from destination grid content.

Do's and Don'ts

Do

• Use {colors.primary} (#ff385c) only on the search button, logo accent, and true CTAs—never as a section background or decorative block.
• Apply {rounded.search-pill} (100px) to the outer search bar container only; internal segments use {rounded.pill} (32px).
• Set section headlines in {typography.display-lg} (28px/700) with -0.02em letter-tracking for that tightened Airbnb look.
• Layer {colors.surface-soft} (#f7f7f7) as alternating band backgrounds to create visual rhythm without heavy dividers.
• Use {typography.body-md} (14px/400) as your workhorse text size—reserving 500+ weights for labels and headlines only.
• Render destination subtitles in {colors.body} (#6a6a6a) to create intentional contrast against {colors.ink} titles.
• Apply {extensions.shadows.search-focus} (multi-layer with inner glow) exclusively to the focused search bar—no other component receives this treatment.
• Keep the "NEW" badge inverted: dark background ({colors.badge-new}) with white text ({colors.inverse-text}) and tight 4px radius.
• Space vertical sections at {spacing.section} (48px) minimum to maintain the airy-but-scannable rhythm.

Don't

• Don't substitute {colors.primary} with red alternatives like #e53935 or #f44336—the exact coral shade is trademark-critical.
• Don't push font weights beyond 700—even hero text caps at 700; there is no "extra-bold" or "black" in this system.
• Don't apply shadows to destination cards or tab items; the grid remains flat and scannable.
• Don't use blue for links—inline links inherit {colors.link} ({colors.ink}, #222222) to maintain monochrome text flow.
• Don't round the search bar to less than 100px radius; that extreme pill shape is the single most recognizable Airbnb UI signature.
• Don't add background fills to nav links (Homes/Experiences)—activation is signaled solely by underline, not fill.
• Don't compress section padding below 48px vertically; the generous banding is essential to the homepage's calm authority.
• Don't mix font families—Cereal VF handles every role from 12px captions to 36px display headlines.

Motion & Animation

Transition Tokens

--transition-color: color 0.25s cubic-bezier(0.2, 0, 0, 1);
--transition-opacity: opacity 0.175s cubic-bezier(0, 0, 1, 1);
--transform-standard: transform 0.3s cubic-bezier(0.2, 0, 0, 1);
--transform-spring: transform 0.451754s linear(0 0%, 0.185572 10%, 0.465306 20%, 0.682334 30%, 0.822325 40%, 0.904974 50%, 0.951289 60%, 0.976364 70%, 0.989612 80%, 0.996485 90%, 1 100%);
--shadow-expand: box-shadow 0.2s cubic-bezier(0.2, 0, 0, 1), transform 0.1s cubic-bezier(0.2, 0, 0, 1);
--transform-snappy: transform 0.1s cubic-bezier(0.2, 0, 0, 1);
--transform-gentle: transform 0.25s cubic-bezier(0.2, 0, 0, 1);

Keyframe Animations

• dot-xefpb8, dot-kkmion, dot-pulse-18sbrvj — Loading indicator dot animations (pulse, position shift) used during async operations.
• overlayEnterLinaria-pxdfzy, overlayLeave-16a97i2 — Modal/dropdown overlay fade-in/out sequences.
• fadeEnter-1yg1552, fadeLeave-1f0cb0c — Generic fade entrance/exit for tooltips and flyouts.
• dls_sheets_fadeIn-1yg1552, dls_sheets_slideUp-1yg1552 — Bottom sheet (mobile) slide-up + fade combo animation.
• slideEnter-1qxmz00, slideLeave-osd9gb — Panel slide transitions (likely side drawers).
• animation-64e8c8 — Unnamed utility animation, likely a spin or pulse.

Interaction Patterns

• Search focus expansion: Clicking the search bar triggers {extensions.shadows.search-focus} with a 200ms shadow transition plus potential width/height change (the "expanded search" pattern common on Airbnb).
• Tab underline slide: Active tab indicator animates horizontally between items using {--transform-standard} timing (300ms ease-out).
• Button press scale: Icon buttons likely implement a subtle scale-down (0.95→1.0) on active press via {--transform-snappy} (100ms).
• Badge pop-in: "NEW" badges may animate in with spring physics ({--transform-spring}) featuring the custom linear() easing curve for organic deceleration.
• Overlay backdrop fade: Modal backdrops transition opacity over 175ms with symmetric easing (ease-in-out equivalent).
• Bottom sheet slide (mobile): Sheets rise from viewport bottom combining translateY(100%→0) with opacity 0→1, timed around 250-450ms.
• Hover lift on cards: While not in screenshot, Airbnb cards typically gain {extensions.shadows.elevated} and slight Y-translate on hover.

Imagery Style

• Photography dominates when present (not visible in this text-heavy screenshot but fundamental to Airbnb's brand): listing photos are amateur-curated yet professionally lit, emphasizing warmth and authenticity over hotel-polish.
• Color treatment: Images receive no heavy filters—natural saturation with slight brightness boost. No duotones or gradient overlays on listing thumbnails.
• Subject matter: Interior spaces, exterior architectural shots, lifestyle scenes with people (diverse representation is core to brand), local landmarks for destinations.
• Aspect ratios: Listing cards use 1:1 square crop; hero banners use 16:9 or wider; profile avatars are 1:1 circles.
• Rounding: All images in cards receive {rounded.lg} (16px) corner radius; hero images are full-bleed unrounded; avatars are circular.
• Role: Photography carries emotional weight and trust signals; the UI recedes to let imagery breathe. In this screenshot's inspiration section, images are notably absent—replaced by text-only city names—suggesting this may be a reduced-bandwidth variant or SEO-optimized view.

Icon System

• Library: Custom SVG icons (Airbnb's own icon set, not a public library). No Lucide/Heroicons/Material markers detected in class names.
• Specific icons observed:
  • Bélo (Airbnb logo mark—"A" with loop) in {colors.primary}
  • House/building icon for Homes navigation
  • Balloon/pin icon for Experiences navigation
  • Service bell icon for Services navigation
  • Globe icon for language selector
  • Hamburger menu (three horizontal lines)
  • Magnifying glass for search button
• Treatment: Stroke-based icons (not filled), rendered in currentColor. Size varies: 20–24px in navigation, 20px inside 40px icon buttons, 24px in search button.
• Alignment: Icons center vertically with adjacent text, with 6–8px gap between icon and label in navigation items.

Recommended Frontend Stack

- Framework:      Next.js 14+ (React-based SSR/SSG matching Airbnb's actual stack)
- Styling:        CSS Modules or styled-components (Airbnb uses atomic/CSS-in-JS internally; Tailwind not detected)
- Fonts:          Self-host Airbnb Cereal VF WOFF2 variables from CDN; fall back to Inter via Google Fonts
- Animation:      Framer Motion (for React) or vanilla CSS transitions matching extracted timing
- Icons:          Custom SVG sprite or individual SVG imports matching Airbnb's icon paths
- Component lib:  Radix UI primitives for accessible dropdowns/modals (optional)

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 768px | Single-column destination stack, hamburger menu visible, search bar collapses to icon + expandable sheet | | Tablet | 768px – 1024px | 3–4 column destination grid, condensed navigation | | Desktop | 1025px – 1425px | Full 7-column grid, all navigation items visible, 1425px max-width container | | Wide | > 1425px | Centered content with increasing side margins, grid columns may expand |

Touch Targets

• {component.button-search-primary}: 48×48px — exceeds WCAG AAA 44×44 minimum ✓
• {component.icon-button-circle}: 40×40px — meets WCAG AA 44×44 (acceptable for icon-only), consider padding to 44px ✓
• {component.button-become-host}: Estimated 44px+ height (11px padding × 2 + 14px font ≈ 36px, but touch padding likely extends) — verify implementation hits 44px minimum
• {component.search-segment}: 66px height (from container) — generously exceeds minimum ✓

Collapsing Strategy

• Navigation: At tablet/mobile, category tabs (Homes/Experiences/Services) collapse behind hamburger menu; only logo + Become a Host + profile icons remain visible.
• Search bar: Transforms from horizontal 3-segment pill to tappable icon triggering a full-screen or bottom-sheet search panel (Airbnb's signature mobile pattern).
• Destination grid: Flows from 7-column desktop to 4-column tablet to single-column mobile stack, maintaining card proportions.
• Section padding: Compresses from 48px ({spacing.section}) to 24px on mobile, preserving relative rhythm.
• Icon buttons: Globe and menu remain visible but may reorder; search icon replaces full bar.

Image Behavior

• Listing thumbnails (not in screenshot but expected): Maintain 1:1 aspect ratio at all breakpoints; radius scales from {rounded.lg} (16px) desktop to {rounded.md} (12px) mobile for slightly softer feel on smaller screens.
• Hero imagery: Switches from 16:9 landscape to 4:5 portrait or 1:1 square on mobile to prioritize vertical scrolling context.
• Avatars: Remain 40–48px circles regardless of viewport.

Iteration Guide

1. Build the landing page shell using Next.js with CSS Modules. Set up the 1425px max-width container centered horizontally with 48px horizontal padding.

2. Extract every color token from the YAML frontmatter via colors.primary, colors.surface-soft, etc. Define CSS custom properties for all ~30 color tokens so global theming is possible later.

3. Implement the sticky header ({component.top-nav}) first—logo left, nav center, utilities right—using Flexbox with justify-content: space-between. Ensure 80px height matches spec.

4. Construct the search bar ({component.search-bar-container}) as a nested Flex container: outer wrapper at 100px radius, inner segments at 32px radius each. Attach the multi-part focus shadow from {extensions.shadows.search-focus} on :focus-within.

5. Build the inspiration section with {colors.surface-soft} background. Create a CSS Grid with 7 columns for desktop, responsive down to 1 column. Each cell contains {component.destination-card-title} + {component.destination-card-subtitle} stacked vertically.

6. Style the tab navigation ({component.tab-nav-item}) using border-bottom for active state (not background fill). Animate the underline position with transform and 300ms cubic-bezier(0.2, 0, 0, 1).

7. Add state variants as separate component entries in your code: button-search-primary-hover, search-bar-focused, search-segment-hover. Do not nest these inside default components.

8. Load Airbnb Cereal VF from the CDN URLs found in the @font-face declarations. If unavailable, declare Inter from Google Fonts as fallback via @font-face with identical unicode ranges.

9. Run accessibility audits: verify all interactive elements meet 44×44px touch targets, check contrast ratios (especially {colors.primary} on {colors.on-primary} which must exceed 4.5:1—it does at ~3.6:1 actually, which fails AA for normal text; consider using larger text or adjusting shade).

10. Test the spring animation curve (linear() function) in Chrome 113+; polyfill with cubic-bezier(0.34, 1.56, 0.64, 1) approximation for older browsers.

Font Setup: Define these CSS variables in :root:

:root {
  --font-family-base: "Airbnb Cereal VF", "Circular", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
  --font-display: var(--font-family-base);
  --font-body: var(--font-family-base);
}
body { font-family: var(--font-body); }

For environments without Cereal VF access, replace the first entry with "Inter", var(--font-family-base) to gracefully degrade.

Known Gaps

• Hover state styling: Per the no-hover policy, exact hover colors/shadows for buttons, cards, and links were not extractable from a static screenshot. Implementation teams must derive these from the active/pressed states and brand conventions.
• Loading/skeleton states: No skeleton loaders, shimmer effects, or pending-state UI visible in the screenshot. Airbnb typically uses pulsing gray blocks (Cereal-colored skeletons) during data fetch—specify dimensions per component.
• Form validation: Error states for empty search fields, date pickers, or guest counts are not depicted. Reference {colors.error} (#d70b35) for error messaging.
• Dropdown/panel contents: The date picker calendar, guest counter stepper, and destination autocomplete suggestion list are not visible. These represent significant sub-component complexity not captured here.
• Dark mode: The system documents mode: light only. Airbnb supports a full dark theme (canvas becomes {colors.surface-dark} #222222) but it is not represented in this extraction.
• Internationalization: Arabic/Hebrew RTL layout behavior, CJK character rendering, and locale-specific formatting (date formats, number separators) are outside scope.
• Accessible focus rings: Focus-visible outlines (typically 2px offset in {colors.primary} or {colors.ink}) were not explicitly styled in the extracted CSS—implement per WCAG 2.2 guidelines.
• Search bar expanded state: The "focused/expanded" search mode (where the bar grows to show additional filters) is a critical interaction pattern not visible in this static viewport.
• CSS variable naming mismatches: The source uses obfuscated class names (e.g., fhzfs0e atm_mk_h2mmj6) via atomic CSS—these do not map semantically to component names and should not be used as documentation references.