# Design Reference - Airbnb
> Vacation photos pinned to a white corkboard — bright photography contained in rounded frames against a near-white surface, with a single coral pin holding everything together.

## Source
- Original site: https://www.airbnb.com
- Captured: 2026-04-28T23:16:17.659Z

## Tags
- No tags captured

## Colors
| Name | Value | Group | Role |
|------|-------|-------|------|
| Rausch Coral | `#ff385c` | brand | Brand logo fill, active nav underline, search button icon background, carousel dot active state — the single chromatic signature that makes the interface recognizable |
| Rausch Deep | `#e00b41` | brand | Hover state darkening of Rausch Coral on interactive brand elements |
| Carbon | `#222222` | neutral | Primary text, headings, borders, icon strokes — the dominant neutral forming almost all typographic content |
| Slate | `#6a6a6a` | neutral | Secondary text (metadata, subtext, secondary labels), secondary icon fill |
| Silver | `#c1c1c1` | neutral | Disabled button text and icon strokes, inactive carousel navigation arrows |
| Stone | `#b0b0b0` | neutral | Skeleton/loading placeholder backgrounds |
| Pebble | `#dddddd` | neutral | Card image placeholder backgrounds, tertiary borders, disabled borders |
| Mist | `#ebebeb` | neutral | Subtle dividers and secondary section borders |
| Fog | `#f7f7f7` | neutral | Page canvas, footer background, button hover/selected state background |
| Cloud | `#ffffff` | neutral | Card surfaces, header background, modal/popover backgrounds, pill badge fills |

## Typography
- role: The sole typeface for every text element across the UI. Weight 400 handles body and metadata; 500 lifts labels and secondary headings; 600 marks section titles; 700 for price display and primary emphasis. The custom variable font brings tight optical metrics at display sizes that generic fonts cannot replicate — negative letter-spacing at -0.02em pulls large numerals together. The 'salt' feature set activates alternate letterforms that distinguish it from system sans-serifs.; sizes: 8px, 11px, 12px, 13px, 14px, 16px, 20px, 21px, 22px, 28px; family: Airbnb Cereal VF; weight: 400, 500, 600, 700; lineHeight: 1.18–1.43; substitute: Inter Variable; letterSpacing: -0.02em at large sizes (20px+), -0.009em at mid sizes (14–16px), +0.04em at small caps/label contexts (11–12px); fontFeatureSettings: "salt"

## Spacing And Radius
```json
{
  "spacing": {
    "radius": {
      "cards": "20px",
      "pills": "32px",
      "badges": "4px",
      "inputs": "14px",
      "buttons": "8px",
      "searchBar": "20px",
      "iconButtons": "50%"
    },
    "elementGap": "8px",
    "sectionGap": "48px",
    "cardPadding": "12px",
    "pageMaxWidth": "1760px"
  },
  "radius": {
    "cards": "20px",
    "pills": "32px",
    "badges": "4px",
    "inputs": "14px",
    "buttons": "8px",
    "searchBar": "20px",
    "iconButtons": "50%"
  }
}
```

## Component Patterns
- name: Primary Search Bar
- name: Listing Card
- name: Navigation Tab Bar
- name: Listing Card; role: Primary browsable content unit in scrollable horizontal carousels
- name: Guest Favorite Badge; role: Trust signal overlaid on listing card images
- name: Primary Search Bar; role: Main search interface in the header
- name: Circular Icon Button — Default; role: Carousel navigation arrows, save/wishlist toggles
- name: Rounded Pill Button — Secondary; role: Filter category tabs (Popular, Beach, Cities, Historic)
- name: Ghost Text Button — Nav Link; role: Top navigation links: Homes, Experiences, Services
- name: Become a Host Button; role: Tertiary CTA in global header navigation
- name: Section Header with Arrow Link; role: Section title + 'See all' inline link
- name: Star Rating Indicator; role: Listing quality signal below card image
- name: Global Header; role: Sticky top bar containing logo, nav, and search
- name: Carousel Scroll Container; role: Horizontal scrollable listing row per section

## Do
- Use #ff385c exclusively for the brand logo, the search trigger button background, and active/selected state indicators — never for decorative fills or text blocks.
- Apply 20px border-radius to all listing cards and the main search bar container; use 8px for filter pill buttons and input fields; reserve 50% (circular) for icon-only buttons.
- Set all typography in Airbnb Cereal VF (substitute: Inter Variable) with font-feature-settings: 'salt'; apply letter-spacing -0.02em at 20px+ sizes and +0.04em for small-caps labels at 11–12px.
- Layer shadows as the three-value stack — rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px 0px, rgba(0,0,0,0.1) 0px 4px 8px 0px — on elevated containers like the search bar and modals only; listing cards use no shadow.
- Maintain the surface hierarchy strictly: page canvas #f7f7f7 → card/header surface #ffffff → disabled/placeholder fills #dddddd → skeleton loaders #b0b0b0.
- Keep section headings at 22px weight 600 with the inline arrow-link pattern; use 14px weight 400 #6a6a6a for all metadata (dates, host type, review counts).
- Use 12px as the base gap for intra-card elements and 48px for vertical section rhythm between listing rows.

## Don't
- Never use #ff385c for body text, headings, or decorative strokes — its appearance outside logo/search-button/active-states breaks the signature scarcity of the brand color.
- Don't add heavy drop shadows to listing cards — cards use no shadow; the #dddddd placeholder color and 20px radius carry the visual weight without elevation.
- Never set headings above weight 700 or below weight 500; Airbnb Cereal VF at weight 800+ is not in the design system and breaks the measured typographic rhythm.
- Don't use border-radius values other than 4px, 8px, 14px, 20px, 32px, or 50% — mixing arbitrary radii (e.g. 6px, 12px, 24px) disrupts the deliberate radius vocabulary.
- Never place text directly on card photography without a scrim or badge surface — overlay content uses #ffffff or semi-transparent white containers, not raw text on image.
- Don't use the blue gradient (rgb(45,60,91) → rgb(128,157,192)) as a UI surface — it is specific to the hero CTA card animation and not part of the repeatable component palette.
- Never omit the 'salt' font feature setting on Airbnb Cereal VF — without it, the alternate letterforms revert to generic shapes that undermine brand distinctiveness.