Overview
Airbnb's visual identity is anchored by a clean white canvas, warm neutral greys, and a signature coral-red (#FF385C) that guides users toward key actions. Typography is handled exclusively through the custom variable font "Airbnb Cereal VF," which spans weights from 400 (book) through 700 (bold), ensuring brand consistency at every scale. The system emphasises accessibility and generous spatial rhythm, with a well-defined spacing and elevation scale that creates clear visual hierarchy without visual clutter.
Signature traits: coral-red brand accent, custom variable font (Airbnb Cereal VF), warm neutral grey palette, generous whitespace, pill-shaped interactive elements, layered elevation via refined box-shadows.
Colors
| Role | Token | Hex | Usage |
|------|-------|-----|-------|
| Background | --color-background | #FFFFFF | Page backgrounds, modal backgrounds |
| Surface | --color-surface | #F7F7F7 | Card backgrounds, secondary surfaces, hover states |
| Text Primary | --color-text-primary | #222222 | Headings, body copy, primary labels |
| Text Secondary | --color-text-secondary | #6A6A6A | Captions, placeholders, secondary labels |
| Border | --color-border | #DDDDDD | Dividers, input outlines, card borders |
| Accent | --color-accent | #FF385C | CTAs, highlights, brand moments, error indicators |
Typography
| Role | Family | Size | Weight | Line Height | Letter Spacing | Usage | |------|--------|------|--------|-------------|----------------|-------| | Display | Airbnb Cereal VF | 2.5rem | 600 | 2.75rem | normal | Hero headlines | | Heading | Airbnb Cereal VF | 1.375rem | 600 | 1.625rem | normal | Section titles | | Body | Airbnb Cereal VF | 0.875rem | 400 | 1.125rem | normal | Paragraph text | | Caption | Airbnb Cereal VF | 0.75rem | 400 | 1rem | normal | Labels, metadata | | Mono | Airbnb Cereal VF | 0.875rem | 400 | 1.125rem | normal | Code, data |
Layout
| Token | Value | Context | |-------|-------|---------| | Spacing XS | 4px | Inline gaps, tight icon spacing | | Spacing SM | 8px | Component internal padding, small gaps | | Spacing MD | 16px | Card padding, section gaps | | Spacing LG | 24px | Layout margins, modal padding | | Spacing XL | 32px | Section separators, large padding | | Spacing 2XL | 48px | Page-level vertical rhythm, hero spacing | | Max Width | 1920px | Outer content container (page-shell) | | Content Max Width | 1344px | Inner content container at large viewports |
Responsive strategy: Four primary breakpoints are observed — 375px (small mobile), 744px (tablet), 950px (large tablet / small desktop), 1128px (desktop), 1440px (large desktop), and 1920px (extra large). Padding shifts from 16px on mobile, to 24px at 375px+, to 32px at 950px+, and 48px at 1440px+. Content carousels and grid layouts adapt visible item counts at each breakpoint using CSS custom properties.
Elevation & Depth
| Level | CSS Value | Usage |
|-------|-----------|-------|
| sm | 0px 0px 0px 1px rgba(0,0,0,0.02), 0px 2px 4px 0px rgba(0,0,0,0.16) | Cards, small interactive elements |
| md | 0px 0px 0px 1px rgba(0,0,0,0.02), 0px 2px 6px 0px rgba(0,0,0,0.04), 0px 4px 8px 0px rgba(0,0,0,0.10) | Dropdowns, popovers, sticky bars |
| lg | 0px 0px 0px 1px rgba(0,0,0,0.02), 0px 8px 24px 0px rgba(0,0,0,0.10) | Modals, sheets, overlays |
| xl | 0 8px 28px rgba(0,0,0,0.28) | High-priority overlays, elevated dialogs |
Shapes
| Token | Value | Applied To | |-------|-------|-----------| | none | 0px | Flush/edge-to-edge panels | | sm | 4px | Tags, small badges, checkbox corners | | md | 8px | Buttons (default), input fields | | lg | 12px | Cards, modals, dropdowns, image containers | | xl | 20px | Listing cards, featured media containers | | xxl | 24px | Large sheet dialogs | | pill | 100px | Search bar, pill buttons, filter chips | | full | 9999px | Avatar circles, toggle switches, circular icon buttons |
Components
Buttons: Default border-radius is 8px (via --dls-button_border-radius). Primary buttons use padding 14px 24px. A full pill variant (100px radius) is used for search and prominent CTAs. Transitions cover box-shadow, transform, background-color, border-color, and color over 0.2–0.3s with the standard cubic-bezier curve. Active state applies a subtle scale transform.
Icon Buttons: Use a pseudo-element (::before) for the interactive hit area and focus ring, decoupled from the visible icon. Default size is 40×40px pseudo-area on a 32×32px or 48×48px visible element. Focus ring is 0 0 0 2px white, 0 0 0 4px #222222.
Inputs / Form Fields: Floating label pattern with position:absolute labels that scale to 0.75× on focus/fill. Minimum height 60px. Border rendered via box-shadow inset rather than border for smoother transitions. Error state uses #D7251C / var(--palette-red700).
Cards: Border-radius 12px default, 20px for listing cards. Box-shadow uses elevation level sm. Hover states apply background-color: var(--palette-faint) (#F7F7F7).
Modals / Sheets: Bottom sheets use border-top-left-radius: 32px and border-top-right-radius: 32px. Slide-up animation driven by motion-springs-standard easing. Overlay background is rgba(34,34,34,0.7).
Shimmer/Skeleton: Animated between var(--palette-grey100) and var(--palette-grey300) over 1.3s with cubic-bezier(0.4,0,0.2,1) timing.
Content Carousels: Driven by CSS custom properties (--contentscroller_visible-items, --contentscroller_peek, --contentscroller_gap) allowing responsive item counts without JavaScript breakpoints.
Do's and Don'ts
| Do ✓ | Don't ✗ |
|------|---------|
| Use #FF385C (Rausch) exclusively for primary CTAs and brand highlights | Use the accent colour for decorative or non-interactive elements |
| Apply Airbnb Cereal VF for all text; respect weight scale (400/500/600/700) | Introduce external typefaces or synthetic bold/italic |
| Use the spacing scale tokens (4/8/16/24/32/48px) for all layout decisions | Use arbitrary spacing values outside the defined scale |
| Render borders via box-shadow: inset on interactive elements for smooth transitions | Use border property for animated or state-driven outlines on inputs/buttons |
| Apply border-radius: 100px for pill/search elements and 8px for standard buttons | Mix radius values arbitrarily — stick to the defined token set |
| Use rgba(0,0,0,0.x) shadow tokens for elevation layers | Use opaque coloured shadows or drop-shadow filters on UI chrome |
Agent Prompt Guide
You are working within the Airbnb design system. Key constraints:
- —Colors: background #FFFFFF, surface #F7F7F7, text-primary #222222, text-secondary #6A6A6A, border #DDDDDD, accent #FF385C
- —Typography: 'Airbnb Cereal VF' (fallback: Circular, -apple-system, sans-serif) for all text; weights 400/500/600/700 only; base body 0.875rem/1.125rem, captions 0.75rem/1rem, headings 1.375rem+/600
- —Spacing: use only 4px (xs), 8px (sm), 16px (md), 24px (lg), 32px (xl), 48px (2xl)
- —Radius: 4px (sm), 8px (md), 12px (lg), 20px (xl), 100px (pill), 50% (circle) — never arbitrary values
- —Elevation: use inset box-shadow for borders on inputs; layered rgba shadows for cards/modals
- —Never use colors, fonts, or spacing values outside the design system tokens above