name: airbnb-design
version: alpha
description: >
  Airbnb runs on an always-white canvas with warm near-black ink (#222222, never
  pure black — "warmer, more inviting"). A single brand voltage — Rausch coral-pink,
  named for the San Francisco street where the company was founded — appears only
  on the search submit, primary CTAs (as a left-to-right magenta gradient), and the
  wishlist heart. Type is the proprietary Airbnb Cereal family (Circular as the
  legacy fallback) carried mostly at 400/500/700. The shape language is
  rounded-but-not-soft: 8px controls, 12px inputs, fully-pill search and tab chips,
  and generous 20px cards. The signature move is the borderless, shadow-on-hover
  image card sitting in a dense responsive grid, and the floating pill search bar.
colors:
  # Brand
  primary: '#FF385C' # Rausch — the brand coral/pink
  primary-gradient-start: '#E61E4D'
  primary-gradient-mid: '#E31C5F'
  primary-gradient-end: '#BD1E59'
  primary-search: '#E00B41' # observed solid fill of the search submit circle
  on-primary: '#FFFFFF'
  # Surface
  surface: '#FFFFFF'
  surface-secondary: '#F7F7F7' # skeletons, hover wells
  surface-tertiary: '#F2F2F2' # icon-button background (globe, menu, carousel arrows)
  # Text
  on-surface: '#222222' # primary ink (warm near-black)
  on-surface-secondary: '#717171' # captions, "₹x for 2 nights", metadata
  on-surface-disabled: '#C1C1C1'
  # Hairlines
  hairline: '#DDDDDD' # search-bar dividers, button outlines
  hairline-soft: '#EBEBEB' # section rules, card-less separators
  # Semantic
  error: '#C13515'
  success: '#008A05'
  star: '#222222' # ratings render in ink, NOT gold
typography:
  display:
    fontFamily: '"Airbnb Cereal VF", Circular, -apple-system, "system-ui", Roboto, "Helvetica Neue", sans-serif'
    fontSize: 32px
    fontWeight: 700
    lineHeight: 36px
    letterSpacing: normal
  headline-lg:
    fontFamily: '"Airbnb Cereal VF", Circular, sans-serif'
    fontSize: 28px # observed on h1 / "Save 10% on a summertime trip"
    fontWeight: 700
    lineHeight: 40px
    letterSpacing: normal
  headline-md:
    fontFamily: '"Airbnb Cereal VF", Circular, sans-serif'
    fontSize: 22px # section headers "Popular homes in North Goa"
    fontWeight: 600
    lineHeight: 26px
    letterSpacing: normal
  body-lg:
    fontFamily: '"Airbnb Cereal VF", Circular, sans-serif'
    fontSize: 16px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: normal
  body-md:
    fontFamily: '"Airbnb Cereal VF", Circular, sans-serif'
    fontSize: 14px # default body / card title
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: normal
  label:
    fontFamily: '"Airbnb Cereal VF", Circular, sans-serif'
    fontSize: 14px # buttons, tabs, "Become a host"
    fontWeight: 500
    lineHeight: 18px
    letterSpacing: normal
  caption:
    fontFamily: '"Airbnb Cereal VF", Circular, sans-serif'
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: normal
  badge:
    fontFamily: '"Airbnb Cereal VF", Circular, sans-serif'
    fontSize: 12px # "Guest favourite" pill
    fontWeight: 600
    lineHeight: 16px
    letterSpacing: normal
rounded:
  sm: 8px # buttons
  md: 12px # inputs, search-field segments on focus
  lg: 16px # modals / popovers
  xl: 20px # image cards
  full: 9999px # search pill, tabs, icon buttons, wishlist heart
spacing:
  # base unit = 8px; clean scale
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 24px
  xl: 32px
  xxl: 48px
  xxxl: 64px
components:
  button-primary:
    background: 'linear-gradient(to right, {colors.primary-gradient-start}, {colors.primary-gradient-mid}, {colors.primary-gradient-end})'
    textColor: '{colors.on-primary}'
    typography: '{typography.label}'
    rounded: '{rounded.sm}'
    padding: '14px 24px'
  button-secondary:
    background: '{colors.surface}'
    textColor: '{colors.on-surface}'
    border: '1px solid {colors.on-surface}'
    typography: '{typography.label}'
    rounded: '{rounded.sm}'
    padding: '11px 12px'
  search-bar:
    background: '{colors.surface}'
    border: '1px solid {colors.hairline}'
    rounded: '{rounded.full}'
    boxShadow: '0 1px 2px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.05)'
    padding: '8px 8px 8px 24px'
  search-submit:
    background: '{colors.primary-search}'
    iconColor: '{colors.on-primary}'
    rounded: '{rounded.full}'
    size: '48px'
  icon-button:
    background: '{colors.surface-tertiary}'
    iconColor: '{colors.on-surface}'
    rounded: '{rounded.full}'
    size: '40px'
  listing-card:
    background: '{colors.surface}'
    rounded: '{rounded.xl}'
    imageRounded: '{rounded.xl}'
    titleTypography: '{typography.body-md}'
    metaColor: '{colors.on-surface-secondary}'
    boxShadow: 'none' # flat at rest; elevation appears on hover
  badge-guest-favourite:
    background: '{colors.surface}'
    textColor: '{colors.on-surface}'
    typography: '{typography.badge}'
    rounded: '{rounded.full}'
    padding: '6px 12px'
  wishlist-heart:
    fill: 'rgba(0,0,0,0.5)' # translucent ink over photo until saved
    fillActive: '{colors.primary}'
    stroke: '{colors.on-primary}'
motion:
  easing-standard: 'cubic-bezier(0.2, 0, 0, 1)'
  easing-spring: 'spring(mass 1, stiffness 170, damping 26)' # organic bounce on overlays
  duration-fast: 150ms
  duration-standard: 250ms
icons:
  library: airbnb-dls # proprietary DLS icon set (Lucide/Feather as OSS substitute)
  style: outline
  stroke: 2px
  sizes: { sm: 16px, md: 24px, lg: 32px }
  colorRule: 'inherit on-surface; never tinted except the wishlist heart'

Airbnb

Design spec — version alpha. Surfaces studied via Playwright: homepage (logged-out, IN locale) — computed styles + representative element probes. Brand lore supplemented from known Airbnb DLS (Design Language System).

Overview

Airbnb's interface is a calm, always-white canvas ({colors.surface}) where photography does the talking and chrome stays out of the way. Text is warm near-black #222222 rather than pure black — a deliberate choice the design team describes as "warmer, more inviting," consistent with the "belong anywhere" brand promise. The system runs on a single brand voltage: Rausch, the coral-pink named after Rausch Street in San Francisco where Airbnb was founded. Rausch is rationed with discipline — it shows up as the search submit button, primary CTAs (rendered as a left-to-right magenta gradient, not a flat fill), and the wishlist heart, and almost nowhere else.

Typography is the proprietary Airbnb Cereal family (with Circular as the legacy fallback and the platform stack behind it), carried at just three weights in practice — 400 for body, 500 for labels/controls, 600–700 for headings. The layout primitive is the borderless image card in a dense responsive grid, paired with horizontally-scrolling carousels per city section and a floating pill search bar. Shapes are rounded-but-not-soft: 8px on buttons, 12px on inputs, a full pill on the search bar and tabs, and a generous 20px radius on cards. Depth is almost entirely flat — cards carry no border and no resting shadow; elevation appears only on hover and on true overlays (modals, the search popover).

Colors

Brand. Rausch {colors.primary} #FF385C is the identity. Primary CTAs use a horizontal gradient from {colors.primary-gradient-start} #E61E4D through {colors.primary-gradient-mid} #E31C5F to {colors.primary-gradient-end} #BD1E59 — giving the button a subtle warmth shift rather than a flat block. The circular search submit was observed as a solid {colors.primary-search} #E00B41. Scarcity rule: Rausch appears in exactly three roles — search submit, primary CTA, wishlist heart — and is never used for body links, borders, or section accents.

Surfaces. The canvas is {colors.surface} #FFFFFF. {colors.surface-secondary} #F7F7F7 fills loading skeletons and hover wells; {colors.surface-tertiary} #F2F2F2 is the resting background of round icon buttons (globe, hamburger, carousel arrows).

Text. Primary ink is {colors.on-surface} #222222. Secondary metadata — price strings like "₹9,130 for 2 nights", subtitles — uses {colors.on-surface-secondary} #717171. Disabled glyphs fall to {colors.on-surface-disabled} #C1C1C1.

Hairlines. Search-bar segment dividers and secondary-button outlines use {colors.hairline} #DDDDDD; lighter structural rules use {colors.hairline-soft} #EBEBEB.

Semantic. Errors use {colors.error} #C13515 (a brick red, not the brand pink, to avoid clashing with Rausch); success uses {colors.success} #008A05. Note the deliberate anti-pattern: star ratings render in ink ({colors.star} #222222), never gold — yellow stars read as cheap in a travel context.

Typography

Family: Airbnb Cereal VF → Circular → -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif. Closest open-source substitute: Inter or Geist (both share Cereal's humanist-geometric proportions and tall x-height). Weight strategy is restrained — 400 for body, 500 for interactive labels, 600 for section headers, 700 for hero/display. Tracking stays at normal throughout; Airbnb does not letter-space its type.

Token	Size	Weight	Line-height	Tracking	Usage
display	32px	700	36px	normal	Marketing hero, large page titles
headline-lg	28px	700	40px	normal	h1, modal headlines ("Save 10% on a summertime trip")
headline-md	22px	600	26px	normal	Section headers ("Popular homes in North Goa")
body-lg	16px	400	20px	normal	Lead paragraphs, primary button text
body-md	14px	400	20px	normal	Default body, card titles
label	14px	500	18px	normal	Buttons, tabs, "Become a host"
caption	12px	400	16px	normal	Fine print, legal
badge	12px	600	16px	normal	"Guest favourite" pill

Layout

Base spacing unit is 8px; the scale runs 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64. Content sits in a wide max-width container (~1280px) with comfortable side gutters. The home feed is built from city sections, each a horizontally-scrolling carousel of listing cards with prev/next round arrow buttons; the responsive grid steps from ~2 columns on mobile up to 5–6 cards visible on wide screens. Whitespace is generous and vertical rhythm is loose — sections breathe with ~48px of separation. The pill search bar floats below the logo/nav row and is the visual anchor of the page.

Elevation & Depth

Essentially flat. Listing cards carry no border and no resting shadow — they read as photos directly on white. Elevation is reserved for genuinely floating surfaces: the search bar (a soft two-layer ambient shadow, ~0 1px 2px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.05)), the search popover, and modals. A subtle shadow/scale appears on card hover only. There is no heavy material-style elevation ladder.

Shapes

Radius vocabulary: {rounded.sm} 8px (buttons), {rounded.md} 12px (inputs), {rounded.lg} 16px (modals/popovers), {rounded.xl} 20px (image cards), {rounded.full} (search pill, tabs, icon buttons, wishlist heart). The philosophy is rounded-but-not-soft — corners are clearly radiused for friendliness, but never so large that controls turn into blobs; only intentionally circular elements (icon buttons, search submit, avatars) go fully round.

Components

• button-primary — the magenta gradient CTA ("Log in to claim offer"), white label at weight 500, 8px radius, ~14px 24px padding. One per viewport.
• button-secondary — white fill, 1px #222222 outline, used for "Become a host" and tertiary actions.
• search-bar — pill-shaped white field with #DDDDDD hairline dividers between segments (Where / When / Who), soft ambient shadow, and the round #E00B41 submit at the right end.
• icon-button — 40px round, #F2F2F2 background, ink glyph; used for globe (locale), hamburger menu, and carousel arrows.
• listing-card — borderless, 20px-radius photo with a swipeable image, a translucent wishlist heart top-right, an optional white "Guest favourite" badge top-left, then ink title + #717171 price/rating below. Flat at rest, lifts on hover.
• badge-guest-favourite — white pill, 600-weight 12px ink text, full radius, overlaid on the photo.
• wishlist-heart — translucent black fill with white stroke over photos; fills to Rausch when saved.

Motion

Transitions are quick and confident: {motion.duration-fast} 150ms for hovers and {motion.duration-standard} 250ms for larger changes, on a standard cubic-bezier(0.2, 0, 0, 1) ease. Overlays and the search expansion use spring physics (Airbnb's signature mass/stiffness/damping tuning) for an organic, slightly bouncy feel rather than a mechanical slide. Pointedly absent: no parallax, no long fade-up reveals on scroll, no decorative looping animation — motion serves feedback, not spectacle.

Iconography

Airbnb ships a proprietary outline icon set from its DLS — consistent 2px stroke, rounded joins, optically balanced at 24px. Open-source substitute: Lucide or Feather. Sizes step 16 / 24 / 32px. Icons inherit {colors.on-surface} ink and are never tinted — the lone exception is the wishlist heart, which is the only icon allowed to carry Rausch.

Do's and Don'ts

• Do keep the canvas white — Airbnb is a light-only product; never render a dark-background variant.
• Do reserve Rausch for one job at a time: the search submit, exactly one primary CTA per viewport, and the wishlist heart.
• Do render primary CTAs as the left-to-right magenta gradient, not a flat #FF385C block.
• Do keep ink at #222222, never pure #000000.
• Do let listing cards be borderless and shadowless at rest; add elevation only on hover.
• Don't use gold/yellow stars for ratings — ratings are ink.
• Don't add borders or drop shadows to image cards.
• Don't letter-space or condense the type; keep Cereal at natural tracking and only 400/500/600/700.
• Don't introduce secondary accent colors — there is one brand voltage, and it is Rausch.
• Don't over-animate; favor sub-250ms, spring-eased feedback over scroll spectacle.

Known Gaps

• Hex values for hairline, hairline-soft, error, success, and the gradient stops are sourced from the known Airbnb DLS rather than this session's computed probe and should be treated as authoritative-but-verify. The search submit fill #E00B41 and core tokens (#222222, #FFFFFF, #F2F2F2, 20px card radius, Cereal stack) were read directly from computed styles.
• Logged-in surfaces (host dashboard, checkout, messaging) were not studied; tokens above describe the marketing/search/browse experience.