Airbnb

---
version: alpha
name: "Airbnb Cereal — Warm Marketplace"
description: "Airbnb's design system is built entirely on its proprietary variable font \"Airbnb Cereal VF\", creating a cohesive single-typeface hierarchy. The brand is anchored by a distinctive coral-pink (#ff385c, named \"Rausch\") used sparingly on the logo, search CTA, and key interactive elements. The layout is photo-first: full-bleed card images with rounded corners dominate the content grid. The search bar uses a multi-layer shadow to create the primary elevation focal point on the page. Spacing is tight and consistent, using a 4px base grid. The palette is near-monochrome (near-black #222222 for text, grays for secondary content, white for surfaces) with Rausch pink as the sole chromatic accent."
colors:
  surface-primary: "#ffffff"
  surface-muted: "#f2f2f2"
  rausch-pink: "#ff385c"
  text-disabled: "#c1c1c1"
  text-primary: "#222222"
  text-secondary: "#6c6c6c"
  border-subtle: "#dddddd"
  icon-tertiary: "#8c8c8c"
typography:
  body-default:
    fontFamily: "Airbnb Cereal VF"
    fontSize: "14px"
    fontWeight: "400"
    lineHeight: "20.02px"
  caption-small:
    fontFamily: "Airbnb Cereal VF"
    fontSize: "12px"
    fontWeight: "400"
    lineHeight: "16px"
  caption-bold:
    fontFamily: "Airbnb Cereal VF"
    fontSize: "12px"
    fontWeight: "700"
    lineHeight: "16px"
  body-medium:
    fontFamily: "Airbnb Cereal VF"
    fontSize: "16px"
    fontWeight: "500"
    lineHeight: "20px"
  body-semibold:
    fontFamily: "Airbnb Cereal VF"
    fontSize: "14px"
    fontWeight: "600"
    lineHeight: "20.02px"
  label-bold-small:
    fontFamily: "Airbnb Cereal VF"
    fontSize: "11px"
    fontWeight: "600"
    lineHeight: "13px"
  section-heading:
    fontFamily: "Airbnb Cereal VF"
    fontSize: "20px"
    fontWeight: "600"
    lineHeight: "24px"
    letterSpacing: "-0.18px"
  display-large:
    fontFamily: "Airbnb Cereal VF"
    fontSize: "28px"
    fontWeight: "700"
    lineHeight: "40.04px"
  subheading:
    fontFamily: "Airbnb Cereal VF"
    fontSize: "22px"
    fontWeight: "500"
    lineHeight: "26px"
    letterSpacing: "-0.44px"
rounded:
  radius-sm: "4px"
  radius-md: "8px"
  radius-lg: "9px"
  radius-card: "12px"
  radius-xl: "14px"
  radius-pill: "20px"
  radius-button: "32px"
  radius-circle-sm: "50px"
  radius-full: "100px"
spacing:
  spacing-1: "2px"
  spacing-2: "4px"
  spacing-3: "6px"
  spacing-4: "8px"
  spacing-5: "10px"
  spacing-6: "12px"
  spacing-7: "16px"
  spacing-8: "24px"
  spacing-9: "28px"
  spacing-10: "32px"
  spacing-11: "40px"
  spacing-12: "48px"
  button-padding-top: "14px"
  button-padding-horizontal: "24px"
  input-padding-top: "20px"
---

## Overview

Airbnb's design system is built entirely on its proprietary variable font "Airbnb Cereal VF", creating a cohesive single-typeface hierarchy. The brand is anchored by a distinctive coral-pink (#ff385c, named "Rausch") used sparingly on the logo, search CTA, and key interactive elements. The layout is photo-first: full-bleed card images with rounded corners dominate the content grid. The search bar uses a multi-layer shadow to create the primary elevation focal point on the page. Spacing is tight and consistent, using a 4px base grid. The palette is near-monochrome (near-black #222222 for text, grays for secondary content, white for surfaces) with Rausch pink as the sole chromatic accent.

**Signature traits:**
- Single-family weight hierarchy: Builds hierarchy from Airbnb Cereal VF across 4 weights rather than multiple families.
- Soft, rounded geometry: Generous corner rounding up to 100px.
- Single-accent color discipline: A neutral-led palette reserves #ff385c as the lone accent.
- Layered elevation: Depth comes from 3 validated shadow tokens.

## Colors

The palette uses 8 validated color tokens across 1 theme profile. Semantic roles stay attached to observed usage so generation agents can choose accents without inventing new color meaning.

**Semantic naming:**
- **content-text** maps to `text-primary`: Role "text" is grounded by usage context "Primary body text, headings, nav labels, card titles — dominant text color across all zones".
- **surface-primary** maps to `surface-primary`: Role "primary" is grounded by usage context "Page background, card surfaces, search bar fill, modal backgrounds".
- **action-text** maps to `rausch-pink`: Role "text" is grounded by usage context "Logo, search button fill, active nav underline, heart icon hover, primary CTA".
- **border-border** maps to `border-subtle`: Role "border" is grounded by usage context "Search bar dividers, card outlines, input field borders, section separators".

### Primary Brand
- **Surface Primary** (#ffffff): Page background, card surfaces, search bar fill, modal backgrounds. Role: primary. {authored: rgb(255, 255, 255), space: rgb, alpha: 0.5}

### Text Scale
- **Rausch Pink** (#ff385c): Logo, search button fill, active nav underline, heart icon hover, primary CTA. Role: text. {authored: rgb(255, 56, 92), space: rgb}
- **Text Disabled** (#c1c1c1): Placeholder text, disabled input labels, inactive icon fills. Role: text. {authored: rgb(193, 193, 193), space: rgb}
- **Text Primary** (#222222): Primary body text, headings, nav labels, card titles — dominant text color across all zones. Role: text. {authored: rgb(34, 34, 34), space: rgb}
- **Text Secondary** (#6c6c6c): Secondary descriptors, metadata, dates, host type labels below listing titles. Role: text. {authored: rgb(108, 108, 108), space: rgb}

### Interactive
- **Border Subtle** (#dddddd): Search bar dividers, card outlines, input field borders, section separators. Role: border. {authored: rgb(221, 221, 221), space: rgb}
- **Icon Tertiary** (#8c8c8c): Tertiary icons, secondary border strokes, subtle dividers. Role: border. {authored: rgb(140, 140, 140), space: rgb}

### Surface & Shadows
- **Surface Muted** (#f2f2f2): Hover states on nav items, disabled button backgrounds, subtle section fills. Role: background. {authored: rgb(242, 242, 242), space: rgb}

## Typography

Typography uses Airbnb Cereal VF across extracted hierarchy roles. Keep hierarchy mapped to these token rows before adding decorative type styles.

Uses Airbnb Cereal VF throughout for a uniform feel. Weight range spans regular, bold, medium, semi-bold. Sizes range from 11px to 28px.

### Font Roles
- **Headline Font**: Airbnb Cereal VF
- **Body Font**: Airbnb Cereal VF

### Type Scale Evidence
| Role | Font | Size | Weight | Line Height | Letter Spacing | Stack / Features | Notes |
|------|------|------|--------|-------------|----------------|------------------|-------|
| Primary body text, card descriptions, nav labels — highest frequency tuple | Airbnb Cereal VF | 14px | 400 | 20.02px | normal | Airbnb Cereal VF, Circular, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif | Extracted token |
| Secondary metadata, price labels, rating counts, small descriptors | Airbnb Cereal VF | 12px | 400 | 16px | normal | Airbnb Cereal VF, Circular, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif | Extracted token |
| Badge labels (e.g. 'Guest favorite'), emphasized small text | Airbnb Cereal VF | 12px | 700 | 16px | normal | Airbnb Cereal VF, Circular, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif | Extracted token |
| Search bar field labels ('Where', 'When', 'Who'), medium-emphasis UI text | Airbnb Cereal VF | 16px | 500 | 20px | normal | Airbnb Cereal VF, Circular, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif | Extracted token |
| Listing titles, card headings, emphasized body content | Airbnb Cereal VF | 14px | 600 | 20.02px | normal | Airbnb Cereal VF, Circular, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif | Extracted token |
| Compact badge text, tab labels, micro UI labels | Airbnb Cereal VF | 11px | 600 | 13px | normal | Airbnb Cereal VF, Circular, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif | Extracted token |
| Section titles like 'Popular homes in Paris', 'Great hotels for your next trip' | Airbnb Cereal VF | 20px | 600 | 24px | -0.18px | Airbnb Cereal VF, Circular, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif | Extracted token |
| Hero display text, large promotional headings | Airbnb Cereal VF | 28px | 700 | 40.04px | normal | Airbnb Cereal VF, Circular, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif | Extracted token |
| Sub-section headings, featured category titles | Airbnb Cereal VF | 22px | 500 | 26px | -0.44px | Airbnb Cereal VF, Circular, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif | Extracted token |

## Layout

Responsive system uses 4 breakpoint tier(s): mobile, tablet, desktop, wide.

This system uses a 4px base grid with scale values 2, 4, 6, 8, 10, 12, 16, 24, 28, 32, 40, 48.

### Responsive Strategy
- **mobile (300-1127.99px)**: Constrain layout for small viewports and prioritize vertical stacking.
- **tablet (667-1128px)**: Increase spacing and column structure for medium-width viewports.
- **desktop (1024-1600px)**: Expand layout density and horizontal composition for wide viewports.
- **wide (>= 1440px)**: Stretch composition with generous gutters and wider layout spans.

### Spacing System
| Token | Value | Px | Notes |
|------|-------|----|-------|
| spacing-1 | 2px | 2 | Extracted spacing token |
| spacing-2 | 4px | 4 | Extracted spacing token |
| spacing-3 | 6px | 6 | Extracted spacing token |
| spacing-4 | 8px | 8 | Extracted spacing token |
| spacing-5 | 10px | 10 | Extracted spacing token |
| spacing-6 | 12px | 12 | Extracted spacing token |
| button-padding-top | 14px | 14 | Mapped to --dls-button_padding-top |
| spacing-7 | 16px | 16 | Extracted spacing token |
| input-padding-top | 20px | 20 | Mapped to --dls-base-input-internal-padding-top |
| spacing-8 | 24px | 24 | Extracted spacing token |
| spacing-9 | 28px | 28 | Extracted spacing token |
| spacing-10 | 32px | 32 | Extracted spacing token |
| spacing-11 | 40px | 40 | Extracted spacing token |
| spacing-12 | 48px | 48 | Extracted spacing token |

## Elevation & Depth

Keep depth flat unless validated shadow or interaction evidence appears in the extraction payload. Do not invent shadows beyond this evidence boundary.

### Shadow Evidence
| Shadow Token | Layers | Details |
|--------------|--------|---------|
| shadow-search-bar | 3 | 0px 0px 0px 1px rgba(0, 0, 0, 0.02) |
| shadow-card | 2 | 0px 0px 0px 1px rgba(0, 0, 0, 0.02) |
| shadow-modal | 2 | 0px 0px 0px 1px rgba(0, 0, 0, 0.02) |

### Interaction Signals
| Theme | Signal | Evidence |
|-------|--------|----------|
| Light | backdrop-filter | blur(32px) |
| Light | outline-color | rgb(34, 34, 34) ; rgb(108, 108, 108) ; rgb(193, 193, 193) |
| Light | outline-width | 3px |
| Light | outline-offset | 0px |
| Light | transform | matrix(2, 0, 0, 2, 0, 0) ; matrix(1, 0, 0, 1, -0.5, 0) ; matrix(1, 0, 0, 1, -425, 0) |

## Shapes

Shape language maps directly to rounded tokens. Keep component corners consistent with the role mapping below before introducing bespoke geometry.

### Radius Roles
| Token | Value | Px | Role Mapping |
|------|-------|----|--------------|
| radius-sm | 4px | 4 | Subtle corner |
| radius-md | 8px | 8 | Control corner |
| radius-lg | 9px | 9 | Control corner |
| radius-card | 12px | 12 | Control corner |
| radius-xl | 14px | 14 | Card corner |
| radius-pill | 20px | 20 | Card corner |
| radius-button | 32px | 32 | Large surface corner |
| radius-circle-sm | 50px | 50 | Large surface corner |
| radius-full | 100px | 100 | Large surface corner |

### Geometry Evidence
| Radius Token | Shape | Units |
|--------------|-------|-------|
| radius-sm | 4px | px |
| radius-md | 8px | px |
| radius-lg | 9px | px |
| radius-card | 12px | px |
| radius-xl | 14px | px |
| radius-pill | 20px | px |
| radius-button | 32px | px |
| radius-circle-sm | 50px | px |
| radius-full | 100px | px |

## Components

(none detected)

## Do's and Don'ts

Guardrails protect Single-family weight hierarchy, Soft, rounded geometry, Single-accent color discipline without adding unsupported visual claims.

| Do | Don't |
|----|---------|
| Do maintain consistent spacing using the base grid | Don't make unsupported claims about absent visual features |
| Do maintain WCAG AA contrast ratios (4.5:1 for normal text) | Don't mix rounded and sharp corners in the same view |
| Do use the primary color only for the single most important action per screen |  |
| Do verify evidence before writing new design-system guidance |  |

## Responsive Evidence

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <= 300px | (max-width: 300px) |
| Mobile | <= 320px | (max-width: 320px) |
| Mobile | <= 330px | (max-width: 330px) |
| Mobile | <= 375px | (max-width: 375px) |
| Mobile | <= 395px | screen and (max-width: 395px) |
| Mobile | <= 499px | (max-width: 499px) |
| Mobile | <= 743px | (max-width: 743px) |
| Mobile | <= 744px | (max-width: 744px) |
| Breakpoint 9 | <= 768px | (max-width: 768px) |
| Breakpoint 10 | <= 880px | only screen and (max-width: 880px) |
| Breakpoint 11 | <= 895px | (max-width: 895px) |
| Breakpoint 12 | <= 949px | (max-width: 949px) |
| Breakpoint 13 | <= 1127px | (max-width: 1127px) |
| Breakpoint 14 | <= 1127.99px | (max-width: 1127.99px) and (max-height: 479.99px) |
| Mobile | >= 300px | (min-width: 300px) |
| Mobile | >= 375px | (min-width: 375px) |
| Mobile | >= 376px | (min-width: 376px) |
| Mobile | >= 403px | (min-width: 403px) |
| Mobile | >= 412px | (min-width: 412px) |
| Mobile | >= 420px | (min-width: 420px) |

## Agent Prompt Guide

### Example Component Prompts
- Create button component using validated primary color role and spacing tokens.
- Create card component with mapped radius role and evidence-backed elevation.
- Create form input component using inferred typography hierarchy and border roles.

### Iteration Guide
1. Start with extracted palette and typography roles only.
2. Map spacing and radius directly from token tables before visual polish.
3. Apply component patterns one section at a time and compare against source intent.
4. Keep elevation claims tied to explicit evidence in output.
5. Iterate with smallest diffs and re-check section hierarchy after each change.