---
site: "Airbnb | Vacation rentals, cabins, beach houses, & more"
url: "https://airbnb.com"
generated_at: "2026-06-12T12:48:51.826Z"
generator: "designlang@12.16.0"
intent: landing
material: flat
tokens:
  colors:
    primary: "#ff385c"
    secondary: "#e00b41"
    background: "#ffffff"
    foreground: "#000000"
  typography:
    sans: Airbnb Cereal VF
    base: 14
  spacing:
    base: 2
    scale: "[2, 15, 20, 32, 35, 48, 80, 131]"
  radii:
    xs: 2
    md: 8
    xl: 20
    full: 100
  shadows:
    sm: "rgba(0, 0, 0, 0.02) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 8px 24px 0px"
    xs: "rgba(60, 77, 107, 0.25) 0px 0.953955px 1.90791px 0px, rgba(60, 77, 107, 0.25) 0px 3.81582px 5.72373px 0px, rgb(0, 28, 64) 0px 0px 2px 0.5px inset, rgb(215, 235, 255) 0px -1px 3px 0px inset"
---

# Overview

A **landing** page (heuristic confidence 0.45), dressed in **flat** material.

> "Site Footer"

The author writes in a **friendly** voice; headings tend to be **Sentence case** case and **tight**.

Reading order detected on the source: `nav → nav → content → footer → content → pricing → content → content`.

Source: <https://airbnb.com>.

# Colors

| role | hex | usage |
|---|---|---|
| primary | `#ff385c` | 14 |
| secondary | `#e00b41` | 1 |
| background | `#ffffff` | — |
| foreground | `#000000` | — |

**Neutrals:** `#222222` · `#6a6a6a` · `#000000` · `#ffffff` · `#dddddd`

**Total unique colors detected:** 8.

# Typography

**Families**
- `Airbnb Cereal VF` · 859 uses
- `Times` · 167 uses

**Body size:** `14px` / line-height `20.02px`.

**Heading scale**
| level | size | weight | line-height |
|---|---|---|---|
| h1 | `28px` | `700` | `40.04px` |
| h2 | `22px` | `500` | `26px` |
| h3 | `21px` | `700` | `30.03px` |
| h4 | `14px` | `400` | `20.02px` |

# Layout

**Spacing base:** `2px` increments.
**Scale:** `2px` · `15px` · `20px` · `32px` · `35px` · `48px` · `80px` · `131px`

**Layout primitives:** 13 grid containers · 149 flex containers.

**Breakpoints:** `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px`

# Elevation and Depth

**Shadow scale**
- `sm` — `rgba(0, 0, 0, 0.02) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 8px 24px 0px`
- `xs` — `rgba(60, 77, 107, 0.25) 0px 0.953955px 1.90791px 0px, rgba(60, 77, 107, 0.25) 0px 3.81582px 5.72373px 0px, rgb(0, 28, 64) 0px 0px 2px 0.5px inset, rgb(215, 235, 255) 0px -1px 3px 0px inset`

**Z-index layers:** 8

# Shapes

**Radius scale**
- `xs` — `2px`
- `md` — `8px`
- `xl` — `20px`
- `full` — `32px`
- `full` — `50px`
- `full` — `100px`

# Components

**Detected patterns:** `buttons` · `inputs` · `links` · `navigation` · `footer` · `tabs`

**Anatomy**
| kind | variants | sizes | instances |
|---|---|---|---|
| button | — | — | 14 |

# Do's and Don'ts

**Do's**
- Use `become`, `popular`, `arts` as the primary verbs in CTAs — these dominate the source.
- Write headings in **Sentence case** case, **tight** length.
- Address the reader with the pronoun posture **third-person**.
- Stay inside the **flat** material — match shadow and radius habits.

**Don'ts**
- Don't 271 !important rules — prefer specificity over overrides.
- Don't 98% of css is unused — consider purging.
- Don't 21818 duplicate css declarations.

---
_Generated by [designlang](https://github.com/Manavarya09/design-extract) v12.16.0 from <https://airbnb.com>._
_Compatible with the DESIGN.md convention pioneered by [design-extractor.com](https://www.design-extractor.com) — extended with intent, material, voice, anatomy, and library detection._