airbnb
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
colors
#ff385c #e00b41 #ffd1da #c13515 #b32505 #ffffff typography
the quick brown fox jumps over the lazy dog
the quick brown fox jumps over the lazy dog
the quick brown fox jumps over the lazy dog — body text at reading size.
design.md source
---
version: alpha
name: Airbnb-design-analysis
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:
… components
display headline
body copy from airbnb tokens — the default reading size for paragraphs and ui descriptions.
feature headline
a sample card surface with heading and body copy styled from component tokens.
what is in this design system?
colors, typography, spacing, and component patterns sourced from publicly visible brand tokens.
const theme = {
primary: "#ff385c",
font: ""Airbnb Cereal VF", system-ui, sans-serif",
};extracted from publicly visible design tokens. sourced via VoltAgent/awesome-design-md. no ownership claim on airbnb's visual identity.