Airbnb

version alpha

name Airbnb

description A warm, generous consumer marketplace anchored on a clean white canvas and Airbnb Rausch (#ff385c), the single brand voltage that carries every primary CTA, search-button orb, and rating dot. Type runs Airbnb Cereal VF at modest weights — display sits at 22–28px in weight 500/600 rather than the heavy 700+ that fintech and enterprise systems use; the brand trusts photography and generous whitespace over typographic muscle. Three product entries (Homes, Experiences, Services) sit in the top nav with hand-illustrated 32-icon glyphs and "NEW" badges, signaling a marketplace expansion rather than a feature dump. Pill-shaped search bars (

{rounded.full}

), softly rounded property cards (

{rounded.lg}

~14px), and 32px button radii read as friendly and human — there is no hard corner anywhere except the body grid.

colors primary: "#ff385c" primary-active: "#e00b41" primary-disabled: "#ffd1da" primary-error-text: "#c13515" primary-error-text-hover: "#b32505" luxe: "#460479" plus: "#92174d" ink: "#222222" body: "#3f3f3f" muted: "#6a6a6a" muted-soft: "#929292" hairline: "#dddddd" hairline-soft: "#ebebeb" border-strong: "#c1c1c1" canvas: "#ffffff" surface-soft: "#f7f7f7" surface-card: "#ffffff" surface-strong: "#f2f2f2" on-primary: "#ffffff" on-dark: "#ffffff" legal-link: "#428bff" star-rating: "#222222" scrim: "#000000"

typography display-xl: fontFamily: "'Airbnb Cereal VF', Circular, -apple-system, system-ui, Roboto, 'Helvetica Neue', sans-serif" fontSize: 28px fontWeight: 700 lineHeight: 1.43 letterSpacing: 0 display-lg: fontFamily: "'Airbnb Cereal VF', Circular, sans-serif" fontSize: 22px fontWeight: 500 lineHeight: 1.18 letterSpacing: -0.44px display-md: fontFamily: "'Airbnb Cereal VF', Circular, sans-serif" fontSize: 21px fontWeight: 700 lineHeight: 1.43 letterSpacing: 0 display-sm: fontFamily: "'Airbnb Cereal VF', Circular, sans-serif" fontSize: 20px fontWeight: 600 lineHeight: 1.20 letterSpacing: -0.18px title-md: fontFamily: "'Airbnb Cereal VF', Circular, sans-serif" fontSize: 16px fontWeight: 600 lineHeight: 1.25 letterSpacing: 0 title-sm: fontFamily: "'Airbnb Cereal VF', Circular, sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 1.25 letterSpacing: 0 rating-display: fontFamily: "'Airbnb Cereal VF', Circular, sans-serif" fontSize: 64px fontWeight: 700 lineHeight: 1.1 letterSpacing: -1px body-md: fontFamily: "'Airbnb Cereal VF', Circular, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 body-sm: fontFamily: "'Airbnb Cereal VF', Circular, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.43 letterSpacing: 0 caption: fontFamily: "'Airbnb Cereal VF', Circular, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1.29 letterSpacing: 0 caption-sm: fontFamily: "'Airbnb Cereal VF', Circular, sans-serif" fontSize: 13px fontWeight: 400 lineHeight: 1.23 letterSpacing: 0 badge: fontFamily: "'Airbnb Cereal VF', Circular, sans-serif" fontSize: 11px fontWeight: 600 lineHeight: 1.18 letterSpacing: 0 micro-label: fontFamily: "'Airbnb Cereal VF', Circular, sans-serif" fontSize: 12px fontWeight: 700 lineHeight: 1.33 letterSpacing: 0 uppercase-tag: fontFamily: "'Airbnb Cereal VF', Circular, sans-serif" fontSize: 8px fontWeight: 700 lineHeight: 1.25 letterSpacing: 0.32px textTransform: uppercase button-md: fontFamily: "'Airbnb Cereal VF', Circular, sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 1.25 letterSpacing: 0 button-sm: fontFamily: "'Airbnb Cereal VF', Circular, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1.29 letterSpacing: 0 link: fontFamily: "'Airbnb Cereal VF', Circular, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.43 letterSpacing: 0 nav-link: fontFamily: "'Airbnb Cereal VF', Circular, sans-serif" fontSize: 16px fontWeight: 600 lineHeight: 1.25 letterSpacing: 0

rounded none: 0px xs: 4px sm: 8px md: 14px lg: 20px xl: 32px full: 9999px

spacing xxs: 2px xs: 4px sm: 8px md: 12px base: 16px lg: 24px xl: 32px xxl: 48px section: 64px

components button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: 14px 24px height: 48px button-primary-active: backgroundColor: "{colors.primary-active}" textColor: "{colors.on-primary}" rounded: "{rounded.sm}" button-primary-disabled: backgroundColor: "{colors.primary-disabled}" textColor: "{colors.on-primary}" rounded: "{rounded.sm}" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: 13px 23px height: 48px button-tertiary-text: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.button-md}" button-pill-rausch: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-sm}" rounded: "{rounded.full}" padding: 10px 20px search-orb: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" rounded: "{rounded.full}" height: 48px icon-button-circle: backgroundColor: "{colors.surface-strong}" textColor: "{colors.ink}" rounded: "{rounded.full}" height: 32px icon-button-outline: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.full}" height: 40px top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.nav-link}" height: 80px product-tab-active: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.none}" product-tab-inactive: backgroundColor: transparent textColor: "{colors.muted}" typography: "{typography.nav-link}" search-bar-pill: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.full}" padding: 14px 24px height: 64px search-field-segment: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.caption}" padding: 8px 24px category-strip: backgroundColor: "{colors.canvas}" textColor: "{colors.muted}" typography: "{typography.button-sm}" category-tab-active: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.button-sm}" rounded: "{rounded.none}" property-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.md}" property-card-photo: rounded: "{rounded.md}" experience-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.title-md}" rounded: "{rounded.md}" city-link-block: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.title-sm}" rating-display-card: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.rating-display}" guest-favorite-badge: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.badge}" rounded: "{rounded.full}" padding: 4px 10px new-tag: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.uppercase-tag}" rounded: "{rounded.full}" padding: 2px 6px amenity-row: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.body-md}" padding: 12px 0 reviews-card: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.body-sm}" host-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.md}" padding: 24px reservation-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: 24px date-picker-day: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.full}" date-picker-day-selected: backgroundColor: "{colors.ink}" textColor: "{colors.on-dark}" rounded: "{rounded.full}" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: 14px 12px height: 56px footer-light: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" padding: 48px 80px footer-link: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.body-sm}" legal-band: backgroundColor: "{colors.canvas}" textColor: "{colors.muted}" typography: "{typography.caption-sm}"

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-dis