Airbnb Design System

Airbnb is the canonical example of a generous, photography-led consumer marketplace. The base canvas is pure white ({colors.canvas} — #ffffff) with deep near-black ink ({colors.ink} — #222222) for headlines and body, and a single voltage of Rausch ({colors.primary} — #ff385c) carrying every primary CTA, the search-button orb, the heart save state, and inline brand links. There is no secondary brand color in mainline marketing — the Luxe purple ({colors.luxe} — #460479) and Plus magenta ({colors.plus} — #92174d) tokens are sub-brand accents that only appear inside Airbnb Luxe / Plus contexts.

Type runs Airbnb Cereal VF (a custom variable font Airbnb licenses), with Circular as the historic in-house fallback and a system stack underneath. Cereal sits at modest weights — display headlines render at 22–28px in weight 500–600, not the heavy 700+ weights that financial or enterprise systems lean on. The hero h1 ("Inspiration for future getaways") on the homepage is just 28px / 700, which would feel small on a typical SaaS page; here it works because the layout leans on photography (city collage, property cards) for visual weight rather than typographic muscle.

...

Key Characteristics:

• Single accent color: {colors.primary} (#ff385c — "Rausch") carries every primary CTA, the search orb, the heart save state, and the brand wordmark. Used scarcely — most pages are 90% white + ink with one or two Rausch moments.
• ...

Brand & Accent

• Rausch ({colors.primary} — #ff385c): The single brand color. Used for primary CTA backgrounds (Reserve, Continue), the search orb, the heart save state on property cards, and inline brand links. The most recognizable color in consumer travel.
• Rausch Active ({colors.primary-active} — #e00b41): The press / pointer-down variant — slightly more saturated. Used on {component.button-primary-active}.
• ...

Surface

• Canvas ({colors.canvas} — #ffffff): The default page floor for every public page. Airbnb does not have a dark mode on the public web.
• Surface Soft ({colors.surface-soft} — #f7f7f7): The lightest fill — used on disabled fields, sub-nav hover backgrounds, and the inline search filter band.
• ...

Hairlines & Borders

• Hairline ({colors.hairline} — #dddddd): The default 1px border tone — search bar dividers, table separators, footer column splitters, card 1px borders.
• Hairline Soft ({colors.hairline-soft} — #ebebeb): A lighter divider used on long-scrolling editorial body separators.
• ...

Text

• Ink ({colors.ink} — #222222): The dominant text color on light surfaces. Display headlines, body paragraphs, primary nav links, and most inline link text. Never pure black.
• Body ({colors.body} — #3f3f3f): A secondary running-text color used inside long-form review and amenity copy where ink would feel too heavy.
• ...

Semantic

• Error ({colors.primary-error-text} — #c13515): Inline error text for form validation. Distinct from Rausch — slightly darker, more saturated red.
• Error Hover ({colors.primary-error-text-hover} — #b32505): Darkens on link hover.
• ...

Scrim

• Scrim ({colors.scrim} — #000000 at 50% opacity): The global modal backdrop tone — date picker, login dialog, language picker. Stored as the base hex; opacity is applied at render time.

Font Family

There is no separate display family. The variable font carries the entire scale.

Hierarchy

Principles

Note on Font Substitutes

Spacing System

• Base unit: 4px (with 2px micro-step).
• Tokens: {spacing.xxs} 2px · {spacing.xs} 4px · {spacing.sm} 8px · {spacing.md} 12px · {spacing.base} 16px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.xxl} 48px · {spacing.section} 64px.
• ...

Grid & Container

• Max content width: ~1280px centered on the homepage and editorial pages. Listing detail pages cap closer to 1080px to keep the photo banner and reservation rail readable.
• City link grid (homepage footer): 6-column grid at desktop with each cell housing a city name in {typography.title-md} and a category sub-label in {typography.body-sm} muted.
• ...

Whitespace Philosophy

The system has essentially one shadow tier plus the flat baseline.

• Flat (no shadow): Body, hero, footer, all editorial bands — 95% of surfaces.
• Card hover float: box-shadow: rgba(0, 0, 0, 0.02) 0 0 0 1px, rgba(0, 0, 0, 0.04) 0 2px 6px 0, rgba(0, 0, 0, 0.1) 0 4px 8px 0 — applied to property cards on pointer hover, the search bar at rest, and the dropdown menus (account menu, language picker, date picker). This is the single shadow definition in the entire system.
• ...

Buttons

button-primary — Rausch fill, white text, 8px radius, 14×24px padding, 48px height, weight 500. The most common CTA across the system: "Reserve", "Continue", "Search", account-flow primaries.

button-primary-active — The press state. Background flips to {colors.primary-active}. No transform, no shadow change.

button-primary-disabled — Pale Rausch tint at #ffd1da with white text. Cursor not-allowed.

button-secondary — White fill with ink text and a 1px ink outline. 8px radius. Used for "Save", "Cancel", and inverse CTAs over Rausch surfaces.

button-tertiary-text — Plain ink text, no surface, no border. Underlined on hover. Used for "Show more" type links and modal close labels.

button-pill-rausch — A pill-shaped Rausch CTA used on featured cells (e.g., "Become a host" sub-CTA) — 9999px radius, 10×20px padding, 14px label.

Search Surface

search-bar-pill — The signature global search bar. White fill, 9999px radius, 64px height, 1px hairline 1px-shadow border. Internally divided by vertical hairline rules into {component.search-field-segment} cells (Where / When / Who). Each segment holds an uppercase caption label above a placeholder line in {typography.caption}.

search-orb — The circular Rausch orb terminating the right edge of the search bar. 48×48px, fully rounded, white magnifying-glass icon centered. The hottest single color moment on the homepage.

Top Navigation

top-nav — White surface, 80px height, 1px bottom hairline. The Airbnb wordmark sits flush left, the three product tabs (Homes / Experiences / Services) sit in the dead center, and account utilities (host link, language globe, account menu) sit flush right.

product-tab-active — Ink label in {typography.nav-link}, 32px hand-illustrated icon, 2px ink underline rule beneath the icon-label pair.

product-tab-inactive — Muted label, illustrated icon, no underline. Becomes active on click.

new-tag — A tiny rounded-pill badge ({rounded.full}) anchored top-right of an icon, carrying the uppercase "NEW" label in {typography.uppercase-tag} (8px / 700 with 0.32px tracking, uppercase). Used on Experiences and Services to signal recency.

Listing Cards

property-card — A photo-first card. 1:1 aspect-ratio image with {rounded.md} corner clipping, image carousel dots overlay, "Guest favorite" floating badge top-left ({component.guest-favorite-badge}), and a heart icon top-right ({component.icon-button-circle} in default outlined state, Rausch-filled when saved). Beneath the image: 4–5 lines of meta — title ({typography.title-md}), distance / dates ({typography.body-sm} muted), and price ("$X night") right-aligned.

property-card-photo — The photo plate itself, separated as a token because some surfaces (wishlist, search results) reuse just the photo without the meta block.

experience-card — A taller-aspect card (4:5) for experience listings. Same {rounded.md} clipping, floating "NEW" badge top-left, heart top-right, and a single-line title beneath.

guest-favorite-badge — White rounded pill ({rounded.full}) at 11px / 600 weight. Sits over the photo with the system's only shadow tier applied for elevation.

Listing Detail

rating-display-card — The signature listing-detail moment. A 64px / 700 rating number ("4.81") flanked left and right by tiny laurel-wreath SVG ornaments. Beneath the rating: "Guest favorite" tagline and a row of ink stat columns. The largest typographic weight in the whole system.

amenity-row — A 1-column list of amenity icons + ink labels in {typography.body-md}. 12px row padding, no border between rows; section is closed by a 1px hairline divider above and below.

reviews-card — A 2-column grid of review excerpts. Each column holds an author row (avatar, name, date) above a 3-line excerpt with "Show more" tertiary link.

host-card — A white card with {rounded.md} rounding and 24px padding holding a host avatar, name, "Superhost" badge, response-rate stat, and a "Contact host" {component.button-secondary}.

reservation-card — The sticky right-rail card on listing detail pages. White surface, {rounded.md} rounding, 1px hairline border, 1px shadow tier elevation, 24px padding. Contains: nightly price ({typography.display-md} ink), date-range selector, guest-count stepper, "Reserve" primary CTA full-width, and a fee breakdown stack beneath in {typography.body-sm}.

Date Picker

date-picker-day — A 40×40px circular cell carrying the day number in {typography.body-sm}. Default state is transparent fill, ink text.

date-picker-day-selected — Ink fill, white text, full circle ({rounded.full}). Range states between two selected days carry a {colors.surface-soft} lozenge background that connects them.

Forms

text-input — White surface, 1px hairline outline, {rounded.sm} 8px radius, 56px height, 14×12px padding. Stacked label above (in {typography.caption} muted), placeholder text in {typography.body-md} muted. On focus, the border thickens to 2px ink and the border color flips to {colors.ink} — no glow, no ring.

Footer

footer-light — White surface (matches the page canvas — Airbnb has no contrast footer), 48×80px padding. Three columns of link blocks (Support / Hosting / Airbnb), separated by generous 24px gutters. Each column heads with a {typography.title-sm} ink label and stacks {component.footer-link} rows in {typography.body-sm} ink.

legal-band — A bottom strip beneath the footer columns carrying the copyright line, language picker (globe icon + "English (US)" link), currency picker, and social icons (Facebook, X, Instagram). All text in muted {colors.muted} at {typography.caption-sm}.

Do

• Use Coral Rausch (#ff385c) exclusively for primary CTA buttons.
• Keep property cards with {rounded.lg} (12px or 14px) rounded corners.
• Set card text layouts to have generous vertical gaps for high legibility.

Don't

• Don't use sharp, non-rounded corners on property images or primary action cards.
• Don't apply dark or high-contrast grey backgrounds on core consumer search screens.
• Don't add deep, harsh shadows on static elements.

Touch Targets

• Primary CTAs at minimum 48×48px (above WCAG AAA).
• Search orb is 48×48px circular — the most-tapped element on the page.
• ...

Collapsing Strategy

• Top product tabs collapse into a hamburger sheet below 744px.
• Search bar's 3 segments collapse into a single-tap entry that opens a full-screen search overlay on mobile.
• ...

"Build a booking card: white backdrop, rounded borders (14px), coral CTA (#ff385c), and clean sans typography."

The parsed design tokens extracted from the core stylesheet of this design system: