Airbnb

Overview

Airbnb is a global marketplace that democratizes travel and hospitality by connecting hosts and guests across 220+ countries. The design system embodies a philosophy of 'Accessible Minimalism'—a clean, light-filled aesthetic that prioritizes clarity and trust through generous whitespace, precise typography, and strategic use of the signature Rausch pink (#FF385C) accent. The brand personality is warm, inclusive, and optimistic: it speaks to the wanderer, the host, and the community builder with equal respect. The UI evokes a sense of possibility and belonging, transforming complex booking flows into intuitive, delightful experiences. Voice: conversational yet authoritative, never corporate. Example: 'Belong anywhere—your next adventure starts with a single search.'

Colors

The color palette is anchored in a neutral, light foundation (surface: #FFFFFF, surface-dim: #F7F7F7) that provides maximum legibility and a sense of openness. Primary accent is Rausch pink (#FF385C), used exclusively for call-to-action buttons, interactive focus states, and brand-critical moments; this high-saturation accent commands attention against the neutral backdrop and signals actionability. Secondary accent Arches red (#C13515) supports error states and destructive actions, while tertiary Ondo gold (#E07912) highlights special offers and premium content. The on-surface text color is a near-black (#222222) for body copy and headlines, paired with a mid-gray variant (#6A6A6A) for secondary information and disabled states. Surface containers layer from #EBEBEB (low) through #B0B0B0 (

Typography

The type system uses Airbnb Cereal VF—a custom variable font optimized for warmth and legibility across all scales—paired with system fallbacks (Circular, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue) for resilience. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and major announcements; Headline-lg (40px, 700, -0.02em) and Headline-md (28px, 700, -0.01em) structure page sections with clear visual hierarchy. Body-lg (18px, 400, 0em) and Body-md (16px, 400, 0em) serve as primary reading text with a 1.5x line-height ratio (28px and 24px respectively) for comfortable scanning. Label-md (14px, 600, 0.01em) and Label-sm (12px, 500, 0.02em) are reserved for UI labels, badges, and microcopy. All type is rendered with -webkit-font-smoothing: antialiased and -moz-os

Layout

The layout grid is a 12-column fluid system with a max-width container of 1440px, centered on the viewport. Horizontal gutters are 24px on desktop, reducing to 16px on tablet and 12px on mobile to maintain breathing room. Vertical rhythm follows an 8px unit scale: sections are separated by 40px (lg spacing), cards within sections by 24px (md spacing), and internal card padding by 24px. The search bar and hero section occupy the full viewport width with a semi-transparent overlay (rgba(34, 34, 34, 0.7)) to ensure text legibility over background imagery. Content sections (e.g., 'Popular homes in Seattle') use a horizontal scroll carousel on mobile and a grid layout on desktop, with 12px gaps between cards. Modal dialogs are centered with a max-width of 600px and 64px padding (xl spacing) on

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids heavy drop-shadows in favor of subtle, layered effects. Level 1 (Base/Surface): no shadow; background is pure white (#FFFFFF) or light gray (#F7F7F7). Level 2 (Cards/Containers): box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.04) creates a hairline border that defines edges without visual weight. Level 3 (Hovered Cards/Elevated Content): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) adds a subtle lift, signaling interactivity. Level 4 (Modals/Overlays): box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.2) creates clear separation from the ba

Shapes

The shape language follows 'Soft Geometric Precision'—a philosophy that balances approachability with clarity through carefully calibrated border-radius values. Buttons and primary CTAs use full-pill styling (border-radius: 50%) to signal friendliness and encourage interaction; the search bar adopts the same pill shape to create visual cohesion. Cards and containers use 12px border-radius (rounded.md) for a modern, slightly softened appearance that avoids harsh corners while maintaining a professional aesthetic. Input fields and secondary UI elements use 8px border-radius (rounded.DEFAULT) for

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons (button-primary) use the Rausch pink background (#FF385C) with white text, 12px horizontal padding, 48px height, and full-pill border-radius (50%). On hover, the background shifts to a darker pink (#D70466) with a 200ms transition. Focus states add a 3px outline in primary with a 10% opacity background wash. Secondary buttons (button-secondary) are transparent with a 1px outline in the outline color (#878787), using the same dimensions and transitions. Ghost buttons (used for 'See all' links) are transparent with no border, relying on text color and underline on hover.

Containers & Surfaces Cards (card component) have a white background (#FFFFFF), 12px border-radius, 24px padding, and a subtle 1px border

Do's and Don'ts

**Do**

• Do use Rausch pink (#FF385C) exclusively for primary CTAs, focus states, and brand-critical moments—never dilute its impact by overusing it.
• Do maintain 24px gutters and 40px section spacing to create generous whitespace that reflects the brand's openness and inclusivity.
• Do apply the 200ms cubic-bezier(0.2, 0, 0, 1) transition timing to all interactive state changes (hover, focus, active) for consistent, responsive feedback.
• Do use Airbnb Cereal VF at 700 weight for headlines and 400 weight for body text to maintain the warm, approachable tone.
• Do layer shadows subtly: use 1px borders for cards, 3px shadows for hovered states, and 6px shadows only for modals and overlays.

**Don't**

• Don't use secondary colors (Arches red, Ondo gold) for primary CTAs—reserve them for error states, warnings, and premium highlights only.
• Don't apply box-shadow to every interactive element; use the 4-level shadow system to create clear visual hierarchy.
• Don't reduce border-radius below 8px for primary UI elements; the brand relies on soft, approachable shapes.
• Don't use system fonts as primary typeface; always load Airbnb Cereal VF first to maintain brand consistency and warmth.
• Don't animate transitions faster than 150ms or slower than 300ms; the 200ms standard (cubic-bezier(0.2, 0, 0, 1)) is optimized for perceived responsiveness.