---
name: "Airbnb"
description: "Clean, content-focused hospitality and travel marketplace design system centered on high-density grid layouts, floating search widgets, rounded property cards, and iconic Rausch primary brand accents."
version: "1.0"
colors:
  primary: "#ff385c"
  primary-strong: "#e61e4d"
  on-primary: "#ffffff"
  ink: "#222222"
  ink-strong: "#1b1b1b"
  ink-dark: "#111111"
  body: "#6a6a6a"
  body-muted: "#6a6a6a"
  canvas: "#ffffff"
  surface-soft: "#f7f7f7"
  surface-muted: "#efefef"
  surface-offwhite: "#efefef"
  surface-dark: "#1b1b1b"
  surface-dark-alt: "#262626"
  neutral-strong: "#313131"
  neutral-muted: "#b0b0b0"
  hairline: "#dddddd"
  destructive: "#c13515"
  warning: "#e07912"
  success: "#12a139"
  accent-coral: "#e74d2e"
  accent-magenta: "#e31c5f"
  accent-magenta-vibrant: "#e61e4d"
  accent-berry: "#bd1e59"
  accent-berry-deep: "#861453"
  accent-plum: "#92174d"
  accent-plum-deep: "#6c0d63"
  accent-violet: "#460479"
  accent-violet-dark: "#59086e"
  accent-violet-rich: "#440589"
  accent-indigo: "#3b07bb"
  accent-rust: "#c13515"
  accent-rust-deep: "#b32505"
  accent-rose: "#ff66ab"
  accent-pink: "#ef6ed6"
  accent-lavender: "#c980ff"
  accent-periwinkle: "#a39dff"
  surface-warm-soft: "#fff8f6"
  black: "#000000"
  hairline-soft: "#ebebeb"
  accent-magenta-deep: "#d70466"
  accent-bg: "#8c8c8c"
  accent-bg-2: "#ff497d"
typography:
  heading-xl:
    fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, BlinkMacSystemFont, Roboto, \"Helvetica Neue\", sans-serif"
    fontSize: "28px"
    fontWeight: "700"
    lineHeight: "1.43"
    letterSpacing: "normal"
  heading-lg:
    fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, BlinkMacSystemFont, Roboto, \"Helvetica Neue\", sans-serif"
    fontSize: "22px"
    fontWeight: "600"
    lineHeight: "1.18"
    letterSpacing: "-0.02em"
  heading-md:
    fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, BlinkMacSystemFont, Roboto, \"Helvetica Neue\", sans-serif"
    fontSize: "20px"
    fontWeight: "600"
    lineHeight: "1.2"
    letterSpacing: "-0.01em"
  body-default:
    fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, BlinkMacSystemFont, Roboto, \"Helvetica Neue\", sans-serif"
    fontSize: "14px"
    fontWeight: "400"
    lineHeight: "1.43"
    letterSpacing: "normal"
  body-semibold:
    fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, BlinkMacSystemFont, Roboto, \"Helvetica Neue\", sans-serif"
    fontSize: "14px"
    fontWeight: "600"
    lineHeight: "1.43"
    letterSpacing: "normal"
  caption:
    fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, BlinkMacSystemFont, Roboto, \"Helvetica Neue\", sans-serif"
    fontSize: "12px"
    fontWeight: "400"
    lineHeight: "1.33"
    letterSpacing: "normal"
  caption-bold:
    fontFamily: "\"Airbnb Cereal VF\", Circular, -apple-system, BlinkMacSystemFont, Roboto, \"Helvetica Neue\", sans-serif"
    fontSize: "12px"
    fontWeight: "700"
    lineHeight: "1.33"
    letterSpacing: "normal"
rounded:
  card: "20px"
  badge: "14px"
  control: "8px"
  pill: "100px"
  modal: "32px"
  circle: "50%"
spacing:
  micro: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  section: "36px"
  container: "1905px"
  grid-gap: "24px"
components:
  primary-button:
    background: "{colors.primary}"
    color: "{colors.on-primary}"
    borderRadius: "{rounded.pill}"
    padding: "14px 24px"
    fontWeight: "600"
    fontSize: "14px"
  search-bar:
    background: "{colors.canvas}"
    borderColor: "{colors.hairline}"
    borderRadius: "{rounded.pill}"
    boxShadow: "0px 2px 6px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.1)"
    height: "66px"
  category-tab:
    color: "{colors.ink}"
    activeBorderColor: "{colors.ink}"
    fontSize: "14px"
    fontWeight: "500"
    padding: "12px 0px"
  listing-card:
    background: "transparent"
    borderRadius: "{rounded.card}"
    gap: "{spacing.sm}"
    imageAspectRatio: "20/19"
  wishlist-button:
    background: "transparent"
    color: "{colors.ink}"
    borderRadius: "{rounded.circle}"
    width: "32px"
    height: "32px"
  carousel-nav-button:
    background: "{colors.surface-soft}"
    color: "{colors.ink}"
    borderRadius: "{rounded.circle}"
    width: "28px"
    height: "28px"
  pill-badge:
    background: "{colors.surface-soft}"
    color: "{colors.ink}"
    borderRadius: "{rounded.badge}"
    padding: "4px 8px"
    fontSize: "12px"
    fontWeight: "600"
  modal-overlay:
    background: "rgba(0, 0, 0, 0.5)"
    borderRadius: "{rounded.modal}"
    backdropFilter: "blur(24px) saturate(1.6)"
source: "https://www.airbnb.com/"
captured: "2026-08-13T05:53:30.546Z"
---

# DESIGN.md: Airbnb

## Source

- URL: https://www.airbnb.com/
- Captured: 2026-08-13T05:53:30.546Z
- Evidence: Firecrawl branding, HTML, images, links, markdown, and full-page screenshot

## Reference Screenshot

![Full-page screenshot of Airbnb](./screenshot.png)

## Design Summary

A highly functional, card-centric search and discovery interface driven by dense horizontal grids, rounded property thumbnails, neutral text contrast, and high-visibility brand primary actions.

## Visual Language

- Use soft drop shadows with ambient multi-layer spread for elevated floating search and overlay elements.
- Prominently feature 20px rounded image corners for listing cards and section media.
- Maintain strict contrast hierarchy with near-black (#222222) primary typography against off-white (#f7f7f7) surfaces.
- Utilize circular interactive controls for wishlist toggles, paging controls, and profile triggers.

## Design Tokens

The normative colors, typography, radii, spacing, and component tokens are defined in the YAML frontmatter above.

## Spacing And Layout

- Sticky top navigation container integrating logo, centered category navigation / search controls, and host tools.
- Horizontally scrollable multi-card listing grids separated into contextual sections.
- Floating bottom price breakdown bar and modal overlays for quick filter selections.
- Comprehensive directory and footer region organized in multi-column text link grids.

## Components

- Listing cards require image carousel containers with wishlist heart button anchored in top-right position.
- Pill buttons enforce full circular ends (#100px) with medium-to-semibold typography.
- Category tabs display active states using a dark bottom border line without shifting layout height.
- Search bar features segmented inputs for destination, dates, and guest selection with an embedded red search icon button.

## Content Style

- Display ratings with average score and review counts in concise bold inline text.
- Format pricing clearly per night or total stay with bold numeric values.
- Keep location names and listing sub-titles short, truncated with ellipsis when overflow occurs.

## Agent Build Instructions

- Set font stack to 'Airbnb Cereal VF', Circular, -apple-system, BlinkMacSystemFont, Roboto, sans-serif.
- Implement core interactive actions with primary brand color #ff385c and radial gradient hover states.
- Use standard 24px gutter grid containers for listing feeds across desktop break-points.
- Apply multi-layered box-shadows (0px 0px 0px 1px rgba(0,0,0,0.02), 0px 2px 6px 0px rgba(0,0,0,0.04), 0px 4px 8px 0px rgba(0,0,0,0.10)) to elevated search elements.

## Evidence And Confidence

- Observed: Measured computed styles show 20px border-radius on primary listing grid containers.
- Observed: Stylesheet contains full color palette definitions for core, plus, luxe, and arches tiers.
- Observed: Typography stack relies primarily on 'Airbnb Cereal VF' with Circular as explicit fallback.
- Inferred: Interactive hover gradients for search buttons extrapolate from stylesheet radial-gradient variables.

## Rerun Inputs

- workflow: pixloop-design-md-url-analysis
- source_url: https://www.airbnb.com/

---

Generated by Pixloop Design.md from publicly observable design evidence. Third-party trademarks and assets remain the property of their respective owners.