Airbnb Design System

---
name: Airbnb
url: https://airbnb.com
version: 3.1.0
tokens:
  colors:
    primary: "#ff385c"
    primary-hover: "#e00b41"
    secondary: "#222222"
    background: "#ffffff"
    background-subtle: "#f7f7f7"
    surface: "#ffffff"
    text-primary: "#222222"
    text-secondary: "#6a6a6a"
    text-muted: "#b0b0b0"
    border: "#dddddd"
  typography:
    font-sans: "Airbnb Cereal VF, Inter, -apple-system, BlinkMacSystemFont, sans-serif"
    scale:
      - { name: display, size: "52px", weight: 700, lineHeight: 1.1, letterSpacing: "-0.02em" }
      - { name: heading-1, size: "32px", weight: 600, lineHeight: 1.2, letterSpacing: "-0.01em" }
      - { name: heading-2, size: "22px", weight: 600, lineHeight: 1.3, letterSpacing: "0" }
      - { name: body, size: "16px", weight: 400, lineHeight: 1.5, letterSpacing: "0" }
      - { name: caption, size: "12px", weight: 500, lineHeight: 1.4, letterSpacing: "0" }
  spacing:
    base: "8px"
    scale:
      space-1: "4px"
      space-2: "8px"
      space-3: "12px"
      space-4: "16px"
      space-6: "24px"
      space-8: "32px"
      space-12: "48px"
  radius:
    sm: "8px"
    md: "12px"
    lg: "16px"
    full: "9999px"
  shadows:
    card: "0 6px 16px rgba(0, 0, 0, 0.12)"
    hover: "0 12px 24px rgba(0, 0, 0, 0.18)"
  breakpoints:
    sm: "640px"
    md: "768px"
    lg: "1024px"
    xl: "1280px"
---

# Airbnb — Design System Specification

## 1. Overview & Visual Rationale
Airbnb's design language emphasizes warmth, photographic storytelling, and effortless search navigation. Anchored by the iconic coral-red primary color (`#ff385c`) on a crisp white canvas (`#ffffff`), the interface provides high legibility using the custom `Airbnb Cereal VF` font family.

## 2. Color Palette & Hierarchy
- **Rausch Coral (`#ff385c`):** Signature primary action color for reservation CTAs and highlighted icons.
- **Deep Charcoal (`#222222`):** Primary text color and header navigation elements.
- **Neutral Grey (`#6a6a6a`):** Subheadings, secondary badges, and review counts.

## 3. Typography Scale & Font Rules
- **Display:** 52px / weight 700
- **Heading 1:** 32px / weight 600
- **Body:** 16px / weight 400

## 4. Button Variants

### Primary Button
```css
background-color: #ff385c;
color: #ffffff;
font-weight: 600;
font-size: 16px;
padding: 14px 24px;
border-radius: 8px;
```

### Pill Badge Filter Button
```css
background-color: #ffffff;
border: 1px solid #dddddd;
border-radius: 9999px;
padding: 8px 16px;
```

## 5. Card Examples & Elevation
- **Photo Listing Card:** `border-radius: 12px`, `box-shadow: 0 6px 16px rgba(0,0,0,0.12)`

## 6. Form Elements
- **Search Pill Input:** `border-radius: 9999px`, `border: 1px solid #dddddd`

## 7. Spacing Scale (8px Grid)
- 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px

## 8. Border Radius Scale
- `sm: 8px`, `md: 12px`, `lg: 16px`, `full: 9999px`

## 9. Elevation & Depth
- `card: 0 6px 16px rgba(0, 0, 0, 0.12)`

## 10. Responsive Behavior
- Mobile (`sm: 640px`), Tablet (`md: 768px`), Desktop (`lg: 1024px`)