---
version: alpha
name: "airbnb.com"
description: "Design system extracted from https://www.airbnb.com/ on 2026-10-27"
colors:
  background: "#ffffff"
  surface: "#dddddd"
  surface-2: "#f2f2f2"
  foreground: "#222222"
  muted-foreground: "#6c6c6c"
  primary: "#da1249"
  on-primary: "#ffffff"
  border: "#ffffff"
typography:
  headline-display:
    fontFamily: "Airbnb Cereal VF"
    fontSize: "28px"
    fontWeight: 700
    lineHeight: "40.04px"
  headline-lg:
    fontFamily: "Airbnb Cereal VF"
    fontSize: "20px"
    fontWeight: 600
    lineHeight: "24px"
    letterSpacing: "-0.18px"
  headline-md:
    fontFamily: "Airbnb Cereal VF"
    fontSize: "24px"
    fontWeight: 600
    lineHeight: "1.4"
  body-md:
    fontFamily: "Airbnb Cereal VF"
    fontSize: "14px"
    fontWeight: 400
    lineHeight: "1.4"
  label-md:
    fontFamily: "Airbnb Cereal VF"
    fontSize: "12px"
    fontWeight: 400
    lineHeight: "1.33"
  button:
    fontFamily: "Airbnb Cereal VF"
    fontSize: "14px"
    fontWeight: 400
    lineHeight: "18px"
rounded:
  none: "0px"
  2xl: "100px"
  xl: "20px"
  md: "8px"
  lg: "14px"
  full: "9999px"
spacing:
  unit: "4px"
  1: "4px"
  2: "8px"
  3: "12px"
  4: "16px"
  5: "24px"
  6: "44px"
  7: "48px"
components:
  button-secondary:
    backgroundColor: "#ffffff4d"
    textColor: "#000000"
    typography: "{typography.button}"
    rounded: "100px"
    height: "35px"
    padding: "0px 16px"
  button-ghost:
    backgroundColor: "#ffffff"
    textColor: "#222222"
    typography: "{typography.button}"
    rounded: "20px"
    height: "40px"
    padding: "11px 12px"
---

# airbnb.com

## Overview

Airbnb | Vacation rentals, cabins, beach houses, & more: Get an Airbnb for every kind of trip → 8 million vacation rentals → 2 million Guest Favorites → 220+ countries and regions worldwide

Soft, well-rounded controls, layered shadows for depth, restrained display type at 28px / 700, a single red accent on neutrals. The site ships in light mode by default. Measured from 1402 rendered elements at 1440px wide on 2026-10-27.

Reference screenshots live beside this file; look at them before writing any layout, they carry the composition, density and image treatment that tokens cannot:

- `screenshots/desktop-1440-fold.png`: Desktop 1440, above the fold
- `screenshots/desktop-1440-full.jpg`: Desktop 1440, full page
- `screenshots/brand-logo.png`: primary logo lockup
- `screenshots/brand-icon-1.png`: representative interface icon
- `screenshots/brand-icon-2.png`: representative interface icon
- `screenshots/brand-icon-3.png`: representative interface icon
- `screenshots/brand-icon-4.png`: representative interface icon
- `screenshots/media-logo-source-hd.png`: primary logo lockup / high-resolution source capture
- `screenshots/media-icon-1-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/media-icon-2-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/media-icon-3-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/media-icon-4-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/region-r1-context.jpg`: r1 context: page context
- `screenshots/region-r1-detail.png`: r1 detail: native-resolution local detail
- `screenshots/laptop-1024-fold.png`: Laptop 1024, above the fold
- `screenshots/tablet-768-fold.png`: Tablet 768, above the fold
- `screenshots/phone-390-fold.png`: Phone 390, above the fold
- `screenshots/phone-390-full.jpg`: Phone 390, full page
- `screenshots/media-logo-upscaled.png`: primary logo lockup / upscaled.png
- `screenshots/media-logo-transparent.png`: primary logo lockup / transparent.png
- `screenshots/media-logo-optimized.webp`: primary logo lockup / optimized.webp
- `screenshots/media-icon-1-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-1-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-icon-2-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-2-transparent.png`: representative interface icon / transparent.png
- `screenshots/media-icon-2-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-icon-3-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-3-transparent.png`: representative interface icon / transparent.png
- `screenshots/media-icon-3-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-icon-4-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-4-transparent.png`: representative interface icon / transparent.png
- `screenshots/media-icon-4-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/c-icon-button-1--rest.png`: Icon button 1, rest
- `screenshots/c-icon-button-1--focus.png`: Icon button 1, focus
- `screenshots/c-icon-button-1--active.png`: Icon button 1, active
- `screenshots/c-link-1--rest.png`: Text link 1 ("Explore experiences near"), rest
- `screenshots/c-link-1--focus.png`: Text link 1 ("Explore experiences near"), focus
- `screenshots/c-search-field-1--rest.png`: Search field 1, rest
- `screenshots/c-search-field-1--filled.png`: Search field 1, filled
- `screenshots/c-switch-1--rest.png`: Switch / toggle 1 ("OnOff"), rest
- `screenshots/c-switch-1--focus.png`: Switch / toggle 1 ("OnOff"), focus
- `screenshots/c-switch-1--disabled.png`: Switch / toggle 1 ("OnOff"), disabled
- `screenshots/c-switch-1--checked.png`: Switch / toggle 1 ("OnOff"), checked
- `screenshots/c-menu-button-1--rest.png`: Menu / dropdown trigger 1 ("WhenAdd dates"), rest
- `screenshots/c-menu-button-1--hover.png`: Menu / dropdown trigger 1 ("WhenAdd dates"), hover
- `screenshots/c-menu-button-1--selected.png`: Menu / dropdown trigger 1 ("WhenAdd dates"), clicked
- `screenshots/c-tabs-1--rest.png`: Tabs 1 ("AllAllHomesHomesHotelsHo"), rest

## Logo and icon references

Read `BRAND.md` for measured logo proportions, SVG treatments, representative icon crops and favicon declarations. Begin with `START_HERE.md` for a compact handoff; raw evidence is optional.

## Colors

| Token | Value | Use |
| --- | --- | --- |
| background | `#ffffff` | Page background |
| surface | `#dddddd` | Cards, panels, raised or recessed surfaces |
| surface-2 | `#f2f2f2` | Secondary surface |
| foreground | `#222222` | Primary text |
| muted-foreground | `#6c6c6c` | Secondary text, captions |
| primary | `#da1249` | Candidate accent (semantic role inferred): Selected from measured button, link, text, painted-area and theme colors. It is not proof of a filled primary button; follow the observed component recipes. |
| on-primary | `#ffffff` | Text on the accent |
| border | `#ffffff` | Hairlines, dividers, input borders |

Full painted palette by area (largest first): `#ffffff`, `#dddddd`, `#282828`, `#f2f2f2`, `#da1249`.

Gradients in use: `linear-gradient(in srgb, rgb(255, 255, 255) 39.9%, color(srgb 0.972471 0.972471 0.972471) 100%)`.

The accent `#da1249` is used sparingly: primary buttons, links and focus rings. Everything else stays neutral.

## Typography

- **Airbnb Cereal VF** for h1, h2, label, button: self-hosted webfont; verify availability and permission; **Inter** is the suggested stand-in.

See FONTS.md and fonts.css for source face/weight mappings, loading recipes, actual rendered-font evidence and explicit substitutions. Do not infer a Google Fonts family name from a site-specific alias.

| Role | Family | Size | Weight | Line height | Tracking |
| --- | --- | --- | --- | --- | --- |
| headline-display | Airbnb Cereal VF | 28px | 700 | 40.04px | normal |
| headline-lg | Airbnb Cereal VF | 20px | 600 | 24px | -0.18px |
| headline-md | Airbnb Cereal VF | 24px | 600 | 1.4 | normal |
| body-md | Airbnb Cereal VF | 14px | 400 | 1.4 | normal |
| label-md | Airbnb Cereal VF | 12px | 400 | 1.33 | normal |
| button | Airbnb Cereal VF | 14px | 400 | 18px | normal |
- headline-md: fallback (source h3); inferred fields: fontSize, fontFamily, fontWeight, lineHeight.
- body-md: fallback (source body); inferred fields: fontSize, fontFamily, fontWeight, lineHeight.

Type scale in use: 11px, 12px, 13px, 14px, 20px, 28px. Base body size 14px.

The hero heading (h1) renders at 28px / 700, start aligned, up to 1px wide. Sample: "Airbnb homepage".

See REGIONS.md, regions.css and the region crops for nested surfaces, gradients, shadows and icon placement. These are local recipes; do not flatten them into site-wide averages.

## Layout

- Spacing unit: 4px. Scale in use: 4, 8, 12, 16, 24, 44, 48 (px).
- Flex and grid gaps: 4, 8, 12 px.
- Content max width: not detected (fluid).
- Breakpoints: 743px, 744px, 950px, 1128px, 1440px.
- Header: 96px tall, static, background `rgba(0, 0, 0, 0)`; 6 nav links at 14px / 400 (AllAll · HomesHomes · HotelsHotels · ActivitiesActivities · ServicesServices).

## Elevation & Depth

Shadows in use, most common first:

- shadow-1: `color(srgb 0 0 0 / 0.02) 0px 0px 0px 1px, color(srgb 0 0 0 / 0.04) 0px 2px 6px 0px, color(srgb 0 0 0 / 0.1) 0px 4px 8px 0px`
- shadow-2: `rgba(0, 0, 0, 0.5) 0px -6px 15px 0px, rgba(0, 0, 0, 0.08) 0px 4px 4px 0px, rgba(0, 0, 0, 0.18) 0px 12px 15px 0px`
- shadow-3: `rgba(218, 218, 218, 0.6) 0px 0.5px 1px 0px, rgba(0, 0, 0, 0.12) 0px -0.502px 1.004px 0px, rgba(0, 0, 0, 0.04) 0px -1.5px 3.5px 0px, rgba(0, 0, 0, 0.05) 0px 3px 5px 0px, rgba(0, 0, 0, 0.2) 0px 0.75px 1px 0px inset, rgba(34, 34, 34, 0.6) 0px -0.5px 5px 1px inset, rgba(0, 0, 0, 0.16) 0.502px 0.5px 2px 0px inset, rgba(0, 0, 0, 0.12) 0px -3px 7px 0px inset, rgba(0, 0, 0, 0.05) 0.502px 2px 4px 0px inset, rgba(0, 0, 0, 0.04) 1.004px 4px 4px 0px inset, rgba(184, 72, 155, 0.2) 0px -3px 7px 0px inset`
- shadow-4: `rgba(0, 0, 0, 0.16) 0px 2px 2px 0px, rgba(255, 255, 255, 0.04) 1px 1.5px 3px 0px inset, rgba(255, 255, 255, 0.04) -1px 1.25px 3px 0px inset, rgba(255, 56, 92, 0.3) 0px -1px 3px 0px inset, rgba(0, 0, 0, 0.16) 0px -1px 2px 0px inset`

## Shapes

- Buttons: 100px
- Inputs: 0px
- Cards and panels: 0px
- Images and media: 0px
- Radius scale: none 0px, 2xl 100px, xl 20px, md 8px, lg 14px, full 9999px

## Components

### Button, secondary

Background `#ffffff4d`, text `#000000`, border none, radius 100px, height 35px, padding 0px 16px, 14px / 400, shadow `rgba(218, 218, 218, 0.6) 0px 0.5px 1px 0px, rgba(0, 0, 0, 0.12) 0px -0.502px 1.004px 0px, rgba(0, 0, 0, 0.04) 0px -1.5px 3.5px 0px, rgba(0, 0, 0, 0.05) 0px 3px 5px 0px, rgba(0, 0, 0, 0.2) 0px 0.75px 1px 0px inset, rgba(34, 34, 34, 0.6) 0px -0.5px 5px 1px inset, rgba(0, 0, 0, 0.16) 0.502px 0.5px 2px 0px inset, rgba(0, 0, 0, 0.12) 0px -3px 7px 0px inset, rgba(0, 0, 0, 0.05) 0.502px 2px 4px 0px inset, rgba(0, 0, 0, 0.04) 1.004px 4px 4px 0px inset, rgba(184, 72, 155, 0.2) 0px -3px 7px 0px inset`. Sample label: "OnOff".

### Button, ghost

Background transparent (it sits on `#ffffff`, so place it on that colour), text `#222222`, border none, radius 20px, height 40px, padding 11px 12px, 14px / 500. Sample label: "Become a host".

### Link

Colour `#222222`, no underline at rest, weight 400.

### Full inventory

`COMPONENTS.md` carries every component kind found on the page (20 of 87 in the checklist, 30 variants) with each state that was measured live (hover, keyboard focus, pressed, disabled, checked, filled, invalid, open: 9 state changes, 0 overlays opened) and a cropped screenshot of each; `components.css` is the same as a stylesheet. Read it before building any control. Summary:

| Component | Variants | States measured | Sample |
| --- | --- | --- | --- |
| Button | secondary-icon-right, secondary-icon-right, ghost-with-icon lg, ghost lg, ghost-icon-right sm, ghost | rest only | "_" |
| Icon button | ghost, secondary | focus, active |  |
| Text link | plain, plain | focus | "Explore experiences nearby" |
| Search field | outlined | filled, placeholder |  |
| Switch / toggle | native | focus, disabled | "OnOff" |
| Header / navbar | default | rest only | "AllAllHomesHomesHotelsHotelsAc" |
| Menu / dropdown trigger | ghost, secondary | hover, open | "WhenAdd dates" |
| Tabs | plain | rest only | "AllAllHomesHomesHotelsHotelsAc" |
| Footer | default | rest only | "Site FooterSupportHelp CenterG" |
| Footer link | plain | rest only | "Help Center" |
| Skip link | default | rest only | "Skip to content" |
| Social icon links | default | rest only |  |
| Language / region switch | default | rest only | "English (US)" |
| Badge / pill / tag | subtle-pill | rest only | "Guest favorite" |
| Styled list | default | rest only | "Oahu Monthly RentalsSanto Domi" |
| Image / figure | aspect-1.05, aspect-1.05, aspect-1.05 | rest only |  |
| Video / media embed | default | rest only |  |
| Carousel / slider | default | rest only | "Explore experiences nearby" |
| Icon | filled-8px | rest only |  |

Not on this page (do not invent them; if the build needs one, derive it from the nearest kind above): Toggle / segmented control, Button group, Floating action button, Close / dismiss button, Text input, Textarea, Select (native), Combobox / custom select, Checkbox, Radio, Range slider, File input / dropzone, Date / time input, Input with attached button or addon, Field label, Help / hint text, Validation error text, Fieldset / form section, Navigation link, Breadcrumb, Pagination, Stepper / progress steps, Sidebar navigation, Back to top, Theme toggle, Tooltip, Popover, Dropdown menu, Dialog / modal, Drawer / sheet / off-canvas, Toast / snackbar, Banner / announcement bar, Cookie / consent notice, Lightbox / media viewer, Chip (removable / selectable tag), Alert / callout, Progress bar, Spinner / loader, Skeleton / shimmer, Counter / notification dot, Empty state, Rating / stars, Card, Pricing card / plan, Feature item (icon + title + text), Testimonial / quote card, Stat / metric, List row / menu row, Table, Table row, Accordion / disclosure, Avatar, Avatar stack, Divider, Code block / inline code, Keyboard key, Blockquote, Logo strip, Eyebrow / kicker, FAQ block, Call-to-action band, Newsletter / signup form, Search results / listing row, Hero, Section band, Content container, Sticky bar.

## Dark Mode

No dark mode responded to prefers-color-scheme, a theme toggle, or a root class/attribute.

## Responsive Behavior

| Viewport | Content width | Gutter | Body | H1 | Header | Hero | Grids | Buttons |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| desktop 1440px | fluid | 50px | 14px | 28px, 0 lines, start | 96px, hamburger (Main navigation menu), 2 CTA | media below text | 2→1 col; 2→1 col; 2→1 col | content-width |
| laptop 1024px | fluid | 34px | 14px | 28px, 0 lines, start | 80px, hamburger (Main navigation menu), 2 CTA | media below text | 3→3 col; 5→3 col; 2→1 col | content-width |
| tablet 768px | fluid | 26px | 14px | 28px, 0 lines, start | 80px, hamburger (Main navigation menu), 2 CTA | text only | 5→3 col; 2→1 col; 2→1 col | content-width |
| phone 390px | fluid | 26px | 14px | 28px, 0 lines, start | 125px, 3 links | media below text | 2→1 col; 2→1 col; 2→1 col | 1 full-width |

- H1 goes 28px → 28px (100%), 0 → 0 lines.
- No hamburger observed at 390px; 3 navigation links remain visible.
- Body text is 14px at the sampled desktop and phone widths.
- Phone side gutter 26px.
- 1 buttons stretch full-width on phones.

## Interaction & Motion

197 elements carry transitions; typical 0.3s with cubic-bezier(0.2, 0, 0, 1), mostly on transform, box-shadow, background-color. 2 running keyframe animations (kf-h0qfv9 0.15s 1; kf-slu2u8 0.5s 1).

- Hover on button-primary ("OnOff"): no visible change; cursor pointer; transition background | 0.25s | cubic-bezier(0.2, 0, 0, 1).
- Hover on button-secondary ("LocationAnywhere"): no visible change; cursor pointer; transition  |  |  | delay .
- Hover on nav-link ("All"): no visible change; cursor pointer.
- Hover on input: no visible change; cursor text.
- Focus on button-primary: outline 2px solid rgb(255, 255, 255), offset 2px.
- Focus on input: no visible focus style measured (may rely on :focus-visible with keyboard only).
- Tooltip triggers exist (4 × aria-describedby, 2 × title) but none opened on hover in the first viewport; title attributes fall back to the browser's native tooltip.
- Hover/click menus: below the trigger, 1736px gap, shifted right; transparent, radius 0px, padding 0px 0px, shadow none; 2 items, 28px tall, 14px, padding 0px 0px, with icons, 2 columns; appears after a delay; stays open after the pointer leaves (click-away or hover-intent grace).
- 11 sizable elements sit at opacity 0 before scrolling: scroll-reveal animations are in use (reveal on enter, fade + rise is the usual recipe).

Full detail (every overlay, table, form, scroll and text rule measured) is in `BEHAVIOR.md`; raw evidence in `evidence.json`.

## Do's and Don'ts

- Treat the 4px spacing base as an inference. Preserve measured regional and component padding and gaps, including values outside that scale.
- Use `#da1249` where supported by measured component or regional evidence; its accent role is inferred.
- Do keep body text at 14px in Airbnb Cereal VF.
- Do match corner radii per element class (buttons 100px, cards 0px); do not pick one radius for everything.
- Keep measured shadows on their owning layers. Regional and component recipes take precedence over the site-wide list; do not invent heavier shadows.
- Preserve gradient stops and layer order from regional/component recipes or the global samples above. A missing CSS gradient does not prove an image-backed effect is absent; inspect its pixels.
- Don't rebuild from the tokens alone; open the screenshots for composition, density and image treatment.
- Note: Page background comes from body; large surface colors remain in the palette.