Airbnb

Overview

Airbnb's design system embodies 'Accessible Optimism'—a philosophy that makes global travel feel personal, trustworthy, and within reach. The brand serves diverse travelers and hosts across 220+ countries, translating complex logistics into intuitive, delightful interactions. The aesthetic is clean-lined and contemporary, avoiding both sterile minimalism and visual clutter: white surfaces (#ffffff) provide breathing room, while the signature coral accent (#ff385c) punctuates key moments—search buttons, saved listings, booking CTAs—creating a consistent visual heartbeat that guides users toward action. The emotional response is one of possibility: the UI feels like a trusted friend who knows the world and wants to help you explore it.

The brand voice is warm, direct, and unpretentious. Airbnb speaks in the language of belonging and discovery, never corporate jargon. Vocabulary favors concrete, human-centered language: 'Dove vuoi andare?' (Where do you want to go?) rather than 'Seleziona una destinazione' (Select a destination). Tone is encouraging but never pushy, informative but never overwhelming. Example sentence in brand voice: 'Scopri case uniche e ospiti che ti aspettano in 220+ paesi—il tuo prossimo viaggio inizia qui.' (Discover unique homes and hosts waiting for you across 220+ countries—your next adventure starts here.)

Colors

The color system is anchored by a neutral foundation—pure white (#ffffff) for surfaces, charcoal (#222222) for primary text—that ensures clarity and accessibility across all content. This restraint allows the brand accent, coral (#ff385c), to command attention without fatigue. Primary (#ff385c) is deployed exclusively on high-intent CTAs: the search button, booking confirmations, saved-listing hearts, and call-to-action links. It appears sparingly but consistently, training users to recognize it as the 'do this next' signal. Secondary colors support specific use cases: green (#008a05) for availability and positive status, orange (#e07912) for warnings and time-sensitive offers, and red (#d7251c) for errors and cancellations. The surface stack uses subtle grays—surface-dim (#f7f7f7), surfac

Typography

The type system uses Airbnb Cereal VF, a custom variable font family, across all scales, creating a cohesive, branded voice from display headlines (60px, 700 weight, -0.04em tracking) down to small labels (12px, 500 weight). Display and headline-lg are reserved for hero sections and major page titles, commanding attention with generous line-height (68px and 48px respectively) and negative letter-spacing to tighten their visual mass. Headline-md (28px, 700 weight) is the workhorse for section titles and card headers, balancing prominence with readability. Body-lg (18px, 400 weight) and body-md (16px, 400 weight) form the backbone of descriptive content, form labels, and list items, with consistent 24px line-height ensuring comfortable reading at any viewport. Label-md (14px, 600 weight) and

Layout

The layout system uses a fluid 12-column grid with a maximum container width of 1440px, allowing the design to scale gracefully from mobile (single column, 24px horizontal gutter) to desktop (full grid utilization, 24px gutter maintained). Page rhythm is established through consistent spacing: lg (40px) separates major sections (hero from listings, listings from footer), md (24px) divides subsections and card groups, and sm (12px) provides breathing room within components. The search bar sits prominently in the header with 24px padding, anchoring the top of the page. Listing cards are arranged in a responsive grid (1 column on mobile, 2–3 on tablet, 4–6 on desktop) with 24px gaps, creating a visual rhythm that feels neither cramped nor sparse. Container max-width of 1440px prevents the int

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids the heavy, dark shadows of skeuomorphic design. Level 1 (Base/Surface) has no shadow—the white background (#ffffff) is the foundation. Level 2 (Cards, Input Fields) uses elevation.sm (0 1px 2px rgba(0, 0, 0, 0.06)), a barely perceptible shadow that separates the card from the background without drawing attention. Level 3 (Hovered Cards, Dropdowns) escalates to elevation.md (0 3px 8px rgba(0, 0, 0, 0.15)), creating a subtle lift that signals interactivity; this shadow is paired with a 2px upward transform (translateY(-2px)) on hov

Shapes

The shape philosophy is 'Friendly Precision'—rounded corners that feel approachable without sacrificing clarity or modern aesthetics. Buttons use the full radius (50%), creating pill-shaped containers that feel inviting and clickable; this is applied consistently to primary buttons (48px height, 12px vertical padding, 24px horizontal padding), secondary buttons, and chips. Cards and containers use md (12px) or lg (16px) radius, softening the edges without introducing the organic, overly-rounded aesthetic of some consumer apps. Input fields use DEFAULT (8px) radius, a subtle curve that distingu

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses the primary color (#ff385c) with white text, 48px height, 12px vertical and 24px horizontal padding, and full (50%) border-radius. On hover, the background shifts to #e00b41 (a darker coral), and the button lifts via transform: translateY(-2px) paired with elevation.md shadow (0 3px 8px rgba(0, 0, 0, 0.15)). On active/press, the background becomes #b32505 (the darkest coral in the palette), with no transform to signal the button is being pressed. The button-secondary component uses a transparent or surface-container background with a 1px outline in outline color (#c1c1c1), maintaining the same dimensions and radius. Transitions between states use 200ms cubic-bezier(0.2, 0, 0, 1) (a standard

Do's and Don'ts

**Do**

• Do use the primary coral (#ff385c) exclusively on high-intent CTAs (search, book, save) to train users to recognize it as the 'next action' signal.
• Do maintain 24px gutter and 24px section spacing to create a calm, scannable page rhythm that doesn't overwhelm.
• Do apply elevation.md shadow and a 2px upward transform on card hover to signal interactivity without heavy visual effects.
• Do use Airbnb Cereal VF at 700 weight for headlines and 400 weight for body text to maintain the brand's friendly-yet-precise voice.
• Do use pill-shaped buttons (50% radius) consistently across all interactive elements to maximize recognizability and clickability.

**Don't**

• Don't use the primary coral (#ff385c) on non-interactive elements or backgrounds; reserve it for CTAs only to preserve its signal strength.
• Don't apply shadows heavier than elevation.lg (0 6px 20px rgba(0, 0, 0, 0.2)) on any component; the system relies on subtle depth, not dramatic drop shadows.
• Don't mix rounded radii arbitrarily; use sm (4px) for minimal curves, DEFAULT (8px) for inputs, md (12px) for cards, and full (50%) for buttons to maintain visual consistency.
• Don't reduce padding below 12px (sm) in interactive components or below 24px (md) in card containers; white-space is essential to the calm, accessible aesthetic.
• Don't use colors outside the defined palette for UI elements; the system is designed around the specific hex values provided, and deviations break the cohesive visual language.