Airbnb

Overview

Airbnb's design system embodies 'Warm Minimalism'—a philosophy that prioritizes human connection and clarity through restrained, purposeful design. The interface celebrates the joy of discovery and belonging anywhere, using a clean white canvas (rgb(255, 255, 255)) as the foundation, with a vibrant signature pink accent (rgb(255, 56, 92)) reserved exclusively for primary calls-to-action and moments of delight. The brand personality is conversational, trustworthy, and optimistic: never corporate, always human. The typography system uses Airbnb Cereal VF—a custom variable font that feels both contemporary and approachable—paired with system fallbacks for reliability across devices.

The emotional response is one of calm confidence: users feel guided, not overwhelmed. Every interaction—from search to booking—is designed to reduce friction and amplify the moment of decision. Voice example: 'Find your next adventure in Spokane—from cozy cabins to modern homes, all verified by our community.'

Colors

The color palette is anchored in a neutral, light foundation with strategic accent deployment. The primary color, Rausch Pink (#FF385C), is the brand's signature and appears exclusively on primary CTAs (buttons, search icons, active states) and moments requiring immediate attention. It conveys energy and trust without aggression. Secondary colors—Teal (#008489) for secondary actions and Ondo Orange (#E07912) for highlights—provide visual rhythm and support information hierarchy. The surface stack uses whites and grays: surface (#FFFFFF) for primary content areas, surface-dim (#F7F7F7) for subtle backgrounds, surface-container (#DDDDDD) for card separations, and on-surface (#222222) for body text. The outline color (#8C8C8C) is used for borders and dividers, maintaining a 4.5:1 contrast rat

Typography

The type system uses a single typeface family—Airbnb Cereal VF—across all scales, creating visual cohesion and reducing cognitive load. Display (56px, 700 weight, -0.03em letter-spacing) anchors hero sections and major announcements. Headline-lg (40px, 700 weight) titles key sections like 'Check out homes in Spokane.' Headline-md (28px, 700 weight) breaks up content hierarchies. Title-lg (20px, 600 weight) labels cards and subsections. Body-lg (18px, 400 weight) and body-md (14px, 400 weight) carry descriptive copy and listing details. Label-md (14px, 600 weight, 0.01em letter-spacing) is used for button text and form labels. Label-sm (12px, 500 weight, 0.02em letter-spacing) applies to badges and secondary metadata. All text uses -webkit-font-smoothing: antialiased and -moz-osx-font-smoot

Layout

The layout uses a fluid 12-column grid system with a maximum container width of 1440px, allowing content to breathe on large screens while maintaining focus. The gutter spacing is 32px between major sections, with md spacing (24px) used for internal card padding and lg spacing (40px) for section separation. The homepage employs a card-based feed pattern: listing cards are arranged in a responsive grid (6 columns on desktop, 3 on tablet, 1 on mobile) with 12px gaps between cards. The search bar sits in a fixed header with 32px horizontal padding and uses the full gutter width. White-space is generous—the background is pure white (#FFFFFF), and cards float with subtle 1px borders (rgba(0, 0, 0, 0.04)) rather than heavy shadows, creating a sense of lightness. Container max-width is enforced a

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle layering rather than dramatic depth cues. Level 1 (Base): surface (#FFFFFF) with no shadow, establishing the primary content plane. Level 2 (Cards & Inputs): box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.04) creates a hairline border that defines boundaries without visual weight. Level 3 (Hover/Elevated): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) lifts interactive elements on hover, signaling interactivity. Level 4 (Modals/Overlays): box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.2) creates clear separation from the background. Shadow

Shapes

The shape philosophy is 'Soft-Technical Precision'—rounded corners are used strategically to soften the interface while maintaining clarity and usability. Buttons and search bars use full border-radius (9999px) to create pill-shaped affordances that feel friendly and inviting. Cards and containers use lg radius (16px) for a modern, approachable aesthetic that avoids sharp corners without appearing overly organic. Input fields and smaller UI elements use md radius (12px) as a middle ground. Modals and overlays use xl radius (24px) to create a sense of elevation and importance. The reasoning: fu

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons use backgroundColor: {colors.primary} (#FF385C), textColor: {colors.on-primary} (white), rounded: full (9999px), padding: 12px 24px, and height: 48px. On hover, backgroundColor shifts to #E00B41 (a darker pink) with boxShadow: 0 3px 8px rgba(0, 0, 0, 0.15) and transition: all 0.2s cubic-bezier(0.2, 0, 0, 1). Secondary buttons use transparent backgrounds with a 1px border (outline color #8C8C8C) and on-surface text; on hover, they fill with surface-container-high (#C1C1C1). The search icon button (primary CTA in the header) uses the same primary styling but is circular (48px × 48px) with a magnifying glass icon.

Containers & Surfaces Listing cards are the core content container: backgroundColor: white, rou

Do's and Don'ts

**Do**

• Do use Rausch Pink (#FF385C) exclusively for primary CTAs, search buttons, and active states—it's the brand's signature and should never be diluted or overused.
• Do maintain generous white-space: minimum 32px gutters between sections and 24px padding inside cards to prevent visual clutter and support scanability.
• Do apply the full border-radius (9999px) to all buttons and search inputs to create instantly recognizable affordances that feel warm and approachable.
• Do use the shadow system consistently: 1px outline for cards at rest, 0 3px 8px for hover states, and 0px 6px 20px for elevated modals—never mix shadow styles.
• Do pair Airbnb Cereal VF with system fallbacks (Circular, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif) to ensure consistent rendering across platforms.

**Don't**

• Don't use Rausch Pink for secondary actions, backgrounds, or decorative elements—reserve it for moments that demand user attention and action.
• Don't apply shadows heavier than 0px 6px 20px rgba(0, 0, 0, 0.2) or use multiple layered shadows; the system is intentionally restrained to maintain clarity.
• Don't use border-radius values outside the defined scale (sm: 4px, DEFAULT: 8px, md: 12px, lg: 16px, xl: 24px, full: 9999px)—custom radii break visual consistency.
• Don't mix typefaces or use weights outside the defined system (400 for body, 600 for labels, 700 for headlines); Airbnb Cereal VF is variable and supports all required weights.
• Don't reduce contrast below 4.5:1 for body text or interactive elements; always verify that on-surface (#222222) text meets WCAG AA standards against surface backgrounds.