Airbnb

Overview

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.

The shape language is soft. Buttons are 8px radius ({rounded.sm}), property cards are ~14px ({rounded.md}), the search bar is fully pill-shaped ({rounded.full}), wishlist hearts and search orbs are circles ({rounded.full}), and category strip rounded corners run at 32px ({rounded.xl}). There is essentially no hard corner anywhere except the body grid itself — every interactive element is rounded.

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. - Custom variable type: Airbnb Cereal VF. Display weights sit at 500–700, body at 400. Modest weight is intentional — the system trusts photography for visual heft. - Three-product top nav: Homes, Experiences, Services — each with a hand-illustrated 32px icon and "NEW" badges ({component.new-tag}) on the two newer products. Active tab uses an underline rule ({component.product-tab-active}). - Pill-shaped global search bar: white surface, fully rounded ({rounded.full}), divided by 1px hairlines into Where / When / Who segments, terminated by a circular Rausch search orb ({component.search-orb}). - Property cards are photo-first: aspect-ratio rectangles with {rounded.md} corner clipping, swipeable image carousel, "Guest favorite" floating badge top-left, heart icon top-right, then 4–5 lines of meta beneath. - Editorial dropdowns (footer, language picker) are clean text columns over the white canvas — no card surface, no shadow. - The design system caps elevation at one shadow tier (box-shadow: rgba(0,0,0,0.02) 0 0 0 1px, rgba(0,0,0,0.04) 0 2px 6px, rgba(0,0,0,0.1) 0 4px 8px) — used on hover-floated cards and search/account dropdowns. - 8px base spacing system, with major sections at {spacing.section} (64px) — generous but not airy enough to feel editorial-magazine; the marketplace density wants more cards per scroll.

Colors

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}.
• Rausch Disabled ({colors.primary-disabled} — #ffd1da): A pale tint used on disabled CTAs.
• Luxe Purple ({colors.luxe} — #460479): Sub-brand accent for Airbnb Luxe. Only appears inside Luxe-branded surfaces — never in mainline marketing.
• Plus Magenta ({colors.plus} — #92174d): Sub-brand accent for Airbnb Plus. Same scoping as Luxe — sub-product only.

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.
• Surface Strong ({colors.surface-strong} — #f2f2f2): Slightly heavier fill — circular icon-button surface (e.g., the breadcrumb back-arrow and listing toolbar buttons).

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.
• Border Strong ({colors.border-strong} — #c1c1c1): A heavier stroke used on disabled outline buttons and form input out