# Airbnb — Design System
> Vacation rentals, cabins, beach houses, & more
- **Canonical:** https://uiuxskills.com/library/airbnb-2
- **Source:** https://airbnb.com/
- **Category:** E-commerce & Retail
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:18:03.581Z

---

---
version: alpha
name: Airbnb
description: Global marketplace for vacation rentals and unique travel experiences.
tone: >-
  Welcoming, trustworthy, and accessible. The tone is professional yet warm, emphasizing community
  and belonging.
color-scheme: light
colors:
  primary: "#FF385C"
  surface: "#FFFFFF"
  surface-dim: "#F7F7F7"
  on-surface: "#222222"
  on-surface-secondary: "#717171"
  outline: "#DDDDDD"
  error: "#E31C5F"
  success: "#008A05"
  focus-ring: "#222222"
  on-primary: "#FFFFFF"
typography:
  display-lg:
    fontFamily: Circular, sans-serif
    fontSize: 3rem
  display-md:
    fontFamily: Circular, sans-serif
    fontSize: 2.25rem
  headline-lg:
    fontFamily: Circular, sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: Circular, sans-serif
    fontSize: 1.5rem
  headline-sm:
    fontFamily: Circular, sans-serif
    fontSize: 1.25rem
  body-md:
    fontFamily: Circular, sans-serif
    fontSize: 1rem
  label-sm:
    fontFamily: Circular, sans-serif
    fontSize: 0.75rem
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    width: auto
  button-primary-hover:
    backgroundColor: "#D90B63"
  card:
    rounded: "{rounded.lg}"
    borderColor: "{colors.outline}"
  input-field:
    rounded: "{rounded.full}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.on-surface}"
  link-hover:
    textColor: "{colors.on-surface-secondary}"
  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-primary}"
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "{colors.on-primary}"
  card-elevated:
    backgroundColor: "{colors.surface}"
  card-dim:
    backgroundColor: "{colors.surface-dim}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 16px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 4px 12px rgba(0,0,0,0.1)
  lg: 0 8px 24px rgba(0,0,0,0.15)
---

## Overview

Airbnb's visual identity is defined by a clean, human-centric aesthetic that prioritizes high-quality imagery and scannable information. It uses a neutral, high-contrast palette to ensure the focus remains on property listings and user-generated content, fostering a sense of warmth, trust, and belonging.

## Colors

The color strategy relies on a high-contrast, neutral foundation to let photography take center stage, using specific brand colors to guide user action and provide feedback.

*   Primary (#FF385C): The iconic brand red used for primary call-to-action buttons.
*   Surface (#FFFFFF): The primary background color for the application.
*   Surface-dim (#F7F7F7): Used for subtle backgrounds and section separators.
*   On-surface (#222222): Primary text color for high readability.
*   On-surface-secondary (#717171): Secondary text for metadata and descriptions.
*   Outline (#DDDDDD): Border color for cards and input fields.
*   Error (inferred) (#E31C5F): Used for error states and validation feedback.
*   Success (inferred) (#008A05): Used for positive status indicators.
*   Focus-ring (#222222): High-contrast focus indicator for accessibility.
*   On-primary (#FFFFFF): Text color on primary brand buttons.

## Typography

The typography uses the "Circular" font family to maintain a friendly, approachable, and geometric feel across all interface levels.

*   Display-lg (inferred): Used for hero headlines.
*   Headline-md: Used for card titles and prominent section headers.
*   Body-md: Standard body text for descriptions and general information.
*   Label-sm: Used for small metadata, badges, and UI labels.

## Layout

Airbnb utilizes a responsive grid system that centers content with generous margins, adapting smoothly from mobile to desktop. The page structure follows a consistent flow: `nav` → `hero` → `search-filters` → `property-carousels` → `footer`. The hero composition features a minimalist, centered search bar, while property discovery is driven by horizontal carousels that allow for efficient browsing of listings.

## Elevation & Depth

Depth is used sparingly to maintain a flat, clean aesthetic, employing subtle single-layer shadows to lift interactive elements.

*   Elevation.sm: Subtle lift for small UI elements.
*   Elevation.md: Standard lift for cards and popovers.
*   Elevation.lg: Pronounced lift for modals or drawer overlays.

## Shapes

The brand employs a rounded aesthetic to convey a friendly and approachable personality. Corner radii are applied consistently across components, with higher values used for input fields and buttons to emphasize their interactive nature.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button Primary
These buttons use `{colors.primary}` with `{typography.label-sm}` to drive key actions. They should be used for primary interactions and feature a distinct hover state using `button-primary-hover`.

### Card
Cards are the primary container for listings, utilizing `{rounded.lg}` and `{colors.outline}` for borders. Use `card-dim` for secondary content areas that require a subtle background distinction.

### Input Field
Search inputs are defined by `{rounded.full}` and `{colors.outline}`. They transition to a `focus-ring` border color when active to ensure accessibility and clear user feedback.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for primary CTAs. | Use `{colors.primary}` for secondary text. |
| Apply `{rounded.lg}` to property cards. | Use sharp corners on interactive components. |
| Use `{typography.headline-md}` for titles. | Use `{typography.display-lg}` for body text. |
| Maintain contrast with `{colors.on-surface}`. | Use low-contrast text on `{colors.surface-dim}`. |
| Use `{colors.outline}` for all dividers. | Use excessive or heavy drop shadows. |
| Apply `{rounded.full}` to search inputs. | Mix too many font weights in one section. |
| Use `{colors.success}` for positive status. | Use generic colors for validation feedback. |
| Use `{elevation.md}` for card lift. | Over-layer components with high elevation. |

## Content Style

CTA labels are direct and action-oriented, typically using short, imperative verbs like "Book" or "Show." 

Headings are descriptive and location-focused, designed to anchor the user in the context of the travel experience.

The copy density is minimalist. The interface relies on visual cues and high-quality imagery to communicate value, keeping text concise to avoid overwhelming the user.

## Imagery & Icons

High-quality, full-bleed photography is the core of the visual language. Images are treated with consistent aspect ratios, particularly within horizontal carousels, to maintain a clean and organized layout. Icons should be minimal and match the stroke weight of the typography to ensure visual harmony.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Airbnb, a minimal and accessible travel marketplace brand with a warm, community-focused tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its token name — `{colors.primary}`, `{typography.body-md}`, `{rounded.full}` — never hardcode hex values, pixel sizes, or font names.
2. Respect the components block exactly. `button-primary`, `card`, `input-field`, `badge`, and all listed variants are the only defined components. Do not invent variants such as `button-secondary` or `card-hero`.
3. Apply the page structure from Layout (`nav → hero → search-filters → property-carousels → footer`) when scaffolding full-page layouts. Do not reorder or add sections as a side effect of styling.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it — for example, using `{colors.primary}` for secondary text — surface the conflict before proceeding.
5. Tokens marked "(inferred)" (`{colors.error}`, `{colors.success}`) are visual approximations. If an authoritative theme file exists in the product codebase, those values override the spec.

## Output contract
**Must:**
- Use token names for every color, radius, spacing, and typography value.
- Implement all defined states — `button-primary-hover`, `input-field-focus` — for every interactive component.
- Use `{spacing.xs}` through `{spacing.2xl}` for all padding and gap values.
- Apply `{colors.focus-ring}` as a visible focus indicator on all interactive elements to meet accessibility requirements.
- Keep CTA copy short and imperative ("Book", "Show") per the Content Style section.

**Must NOT:**
- Invent colors, radii, font sizes, or elevation values outside the spec.
- Use generic system defaults when a brand token exists.
- Add emoji, marketing filler, or decorative copy.
- Rewrite, replace, or invent page headings, labels, navigation items, or button text.
- Apply `{colors.primary}` to anything other than primary CTA backgrounds.
- Layer multiple elevation levels on a single component.

## When in doubt
- If a value is not defined in the spec, ask the user before inventing one.
- Prefer composing existing components over introducing new tokens.
- For ambiguous backgrounds, default to `{colors.surface}`; use `{colors.surface-dim}` only for secondary content areas.
- For unspecified breakpoints, follow mobile-first layout with one breakpoint at 768px.
- If a user-supplied inferred token conflicts with a product-side theme file, defer to the product file and note the discrepancy.