open-design/design-systems/airbnb/DESIGN.md

Design System Inspired by Airbnb

Category: E-Commerce & Retail Travel marketplace. Warm coral accent, photography-driven, rounded UI.

1. Visual Theme & Atmosphere

Airbnb's 2026 design feels like a travel magazine that happens to be an app — pristine white canvases give way to full-bleed photography, and the interface itself disappears so the listings can breathe. The signature Rausch coral-pink (#ff385c) is used sparingly but unmistakably: search CTA, active tab indicator, primary action button, the occasional price or wishlist heart. Everything else is a disciplined grayscale, with #222222 carrying almost every line of text.

What makes the system unmistakably Airbnb is how much faith it places in content. Property photos are displayed at hero scale, 4:3 with edge-to-edge radius treatment. Category switching happens through a tri-tab picker (Homes / Experiences / Services) that uses 3D rendered illustrated icons (a pitched-roof house, a hot-air balloon, a service bell) — physical, tactile, almost toy-like — paired with crisp Airbnb Cereal VF labels. This is the rare consumer product where 3D renders and purely typographic UI coexist without tension.

The newest surface is the Experiences product line — same chrome, but richer card density, more photography, and a center-anchored booking panel with sticky right-rail pricing. Listing detail pages (both rooms and experiences) follow a tight template: full-bleed hero image grid → overlapping rounded booking card (sticky on scroll) → amenities → reviews (Guest Favorite awards use a big centered 4.81 rating with a laurel-wreath lockup) → map → host profile → disclosures. The rhythm is consistent whether you're booking a room or a yacht tour.

Key Characteristics:

• Rausch coral-pink (#ff385c) as a single-accent brand color, used only for primary CTAs and the search button
• Full-bleed photography at 4:3 / 16:9 with gentle corner rounding (14–20px) as the primary visual vocabulary
• 3D rendered category icons paired with typographic tabs — the one place the system allows illustration
• Circular 50% icon buttons (back arrow, share, favorite, carousel arrows) scattered throughout
• Airbnb Cereal VF carries every label, from 8px legal footnote to 28px section heading — a single-family system
• Product-tier color coding: Airbnb Plus (magenta #92174d), Airbnb Luxe (deep purple #460479), Airbnb (Rausch coral)
• Guest Favorite award lockup — centered giant rating number between two laurel wreaths, one of the most recognizable moments in the system
• Sticky booking panel with a price → dates → guests stack, pinned to the right rail on desktop, transforming to a bottom-anchored "Reserve" bar on mobile
• Sticky bottom mobile navigation (Explore / Wishlists / Log in) with an active-state Rausch tint

2. Color Palette & Roles

Primary

• Rausch (#ff385c): The brand's signature coral-pink. CSS variable --palette-bg-primary-core. Used for: primary "Reserve" button, search submit button, active tab underline, wishlist heart fill, pricing emphasis. The single highest-visibility color on every page.

Secondary & Accent

• Deep Rausch (#e00b41): A more saturated variant. CSS variable --palette-bg-tertiary-core. Used for pressed/active button states and gradient terminal stops.
• Plus Magenta (#92174d): CSS variable --palette-bg-primary-plus. The brand color for the Airbnb Plus product tier — a higher-end curated-listing offering.
• Luxe Purple (#460479): CSS variable --palette-bg-primary-luxe. The brand color for the Airbnb Luxe product tier — villa/estate-level rentals.
• Info Blue (#428bff): CSS variable --palette-text-legal. Used for legal/informational links (terms, privacy, disclosures) — the only non-monochrome link color in the system.

Surface & Background

• Canvas White (#ffffff): The default page background. Every card, every container, every detail page starts here.
• Soft Cloud (#f7f7f7): Subtle subsurface tint used on footer backgrounds, map-view wrappers, and "everything else" sections that want to step back from the primary white.
• Hairline Gray (#dddddd): Ubiquitous 1px border color — separates cards, amenity rows, review panels, footer columns. The workhorse of the layout system.

Neutrals & Text

• Ink Black (#222222): CSS variable --palette-text-primary. The system's near-black. Every heading, every body paragraph, every nav label, every price. Used for ~90% of all text on a page.
• Charcoal (#3f3f3f): CSS variable --palette-text-focused. Used in focused-state input text and one-step-down emphasis copy.
• Ash Gray (#6a6a6a): CSS variable --palette-bg-tertiary-hover. Secondary labels, "Cottage rentals" subtitle-style copy under city names, muted footer links.
• Mute Gray (#929292): CSS variable --palette-text-link-disabled. Disabled buttons and low-priority metadata.
• Stone Gray (#c1c1c1): Tertiary dividers, icon strokes, placeholder avatars.

Semantic & Accent

• Error Red (#c13515): CSS variable --palette-text-primary-error. Form validation errors, destructive-action warnings.
• Deep Error (#b32505): CSS variable --palette-text-secondary-error-hover. Pressed/active variants of error states.
• Translucent Black (rgba(0, 0, 0, 0.24)): CSS variable --palette-text-material-disabled. Disabled material-style labels.

Gradient System

Airbnb's brand gradient appears sparingly, typically only on the wordmark and the search-button branded moment:

linear-gradient(90deg, #ff385c 0%, #e00b41 50%, #92174d 100%)

This coral → magenta sweep is the "branded moment" — never used as a full surface, only as a narrow pill fill or logo treatment.

3. Typography Rules

Font Family

• Airbnb Cereal VF (primary and only): The proprietary variable-weight sans-serif that carries the entire system. Fallbacks (in order): Circular, -apple-system, system-ui, Roboto, Helvetica Neue, sans-serif.

Weights observed in the extracted tokens: 500, 600, 700. No 400-regular — the system's "body" weight is 500, which gives every block of text a subtle extra density that reads as confident and deliberate.

OpenType features: salt (stylistic alternates) is used on the compact 11px and 14px 600-weight labels — likely for tighter numerals and special-character shaping. No ligature or fractional-numeral features observed.

Hierarchy

Role	Size	Weight	Line Height	Letter Spacing	Notes
Section Heading	28px / 1.75rem	700	1.43	0	"Inspiration for future getaways" — page-level headings
Subsection Heading	22px / 1.38rem	500	1.18	-0.44px	"What this place offers", "Meet the hosts" — content dividers
Card Title	21px / 1.31rem	700	1.43	0	Review panel headings, card lead titles
Listing Title	20px / 1.25rem	600	1.20	-0.18px	"Small Group Yacht Tour, Unlimited Wine & Fruits" — listing headlines on detail pages
Subtitle Bold	16px / 1.00rem	600	1.25	0	Host name, city name
Body Medium	16px / 1.00rem	500	1.25	0	Primary body copy on detail pages
Button Large	16px / 1.00rem	500	1.25	0	"Reserve", "Become a host"
Button Default	14px / 0.88rem	500	1.29	0	Standard button labels
Link	14px / 0.88rem	500	1.43	0	Nav links, footer links
Caption Medium	14px / 0.88rem	500	1.29	0	Metadata, subtitle lines ("Cottage rentals", "Villa rentals")
Caption Bold	14px / 0.88rem	600	1.43	0	salt feature enabled — numeric stats, small-text emphasis
Caption Small	13px / 0.81rem	400	1.23	0	Review dates, micro-metadata
Micro Default	12px / 0.75rem	400	1.33	0	Footer disclaimers, legal micro-copy
Micro Bold	12px / 0.75rem	700	1.33	0	"NEW" pill labels
Badge Uppercase	11px / 0.69rem	600	1.18	0	salt feature — compact category/status badges
Superscript	8px / 0.50rem	700	1.25	0.32px	Uppercase — price footnotes, decimal tails

Principles

• One family, many weights. Airbnb Cereal VF handles everything from 8px legal to 28px page headings — the visual identity comes from the family itself, not from typeface mixing.
• 500 is the new 400. The system's "regular" weight is 500, giving every paragraph a slightly more confident texture than the web default.
• Negative tracking on display type only. Headings 20px+ compress tracking by -0.18 to -0.44px to feel chiseled; body sizes stay at 0 tracking for readability.
• Tight line-heights for headlines, generous for body. Display type runs at 1.18–1.25 (tight); body and caption open up to 1.43 for long-form comfort.
• No all-caps except at 8px. The only uppercase transform in the system is the 8px superscript — everywhere else, sentence case with subtle weight shifts does the work.

Note on Font Substitutes

Airbnb Cereal VF is proprietary. The closest open-source substitute is Circular Std (still commercial) or Inter (free, Google Fonts) with letter-spacing reduced by -0.01em at display sizes. For strict brand fidelity, the documented fallback chain (Circular, -apple-system, system-ui) renders acceptably on macOS/iOS where system-ui resolves to San Francisco, which has similar proportions.

4. Component Stylings

Buttons

Primary CTA ("Reserve", "Search", "Add dates")

• Background: Rausch #ff385c
• Text: Canvas White #ffffff, Airbnb Cereal 500, 16px
• Padding: ~14px vertical, 24px horizontal
• Radius: 8px (rectangular) or 50% (circular icon variant)
• Border: none
• Active/pressed: transform: scale(0.92) plus a 2px #222222 focus ring at 0 0 0 2px

Secondary Button ("Become a host", outlined tertiary actions)

• Background: #ffffff
• Text: Ink Black #222222, Airbnb Cereal 500, 14–16px
• Padding: 10px 16px
• Radius: 20px (pill) or 8px (rectangular)
• Border: 1px solid Hairline Gray #dddddd

Icon-Only Circular Button (back arrow, share, favorite, carousel controls)

• Background: #f2f2f2 (slightly off-white) or white with 1px translucent black border
• Icon: #222222 outline stroke, 16–20px
• Size: 32–44px diameter
• Radius: 50%
• Active/pressed: transform: scale(0.92); subtle 4px white ring 0 0 0 4px rgb(255,255,255) to separate from colorful photography backgrounds

Disabled Button

• Background: #f2f2f2
• Text: Stone Gray #c1c1c1
• Opacity: 0.5

Pill Tab Button (category selector "Homes / Experiences / Services")

• Background: transparent
• Text: Ink Black #222222, Airbnb Cereal 500, 16px
• Padding: 8px 14px
• Active state: 2px Ink Black underline beneath the label
• Paired with a 36–48px 3D-rendered illustrated icon above the label

Cards & Containers

Listing Card (homepage grid, search results)

• Background: #ffffff
• Radius: 14px on the image, text sits directly below on transparent background
• Image: 4:3 aspect ratio, full-bleed, rounded with the same 14px radius
• Padding: none on the outer container; 12px spacing between image and metadata rows
• Shadow: none — separation comes from whitespace and the intrinsic radius of the photograph
• Metadata pattern: City/region on line 1 (16px 600), distance/duration on line 2 (14px 500 Ash Gray), date range on line 3, price row with "per night" at the bottom

Detail Page Booking Panel (sticky right rail on room/experience pages)

• Background: #ffffff
• Radius: 14–20px
• Border: 1px solid Hairline Gray #dddddd
• 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 — a stacked three-layer subtle elevation
• Padding: 24px
• Width: ~370px, pinned 120–140px below the viewport top
• Content: price headline → date picker → guest dropdown → primary CTA → "You won't be charged yet" footnote

Amenity Grid Card (on listing detail pages)

• Background: #ffffff
• Border: 1px solid Hairline Gray #dddddd at the row level (not per item)
• Padding: 16px vertical per amenity row
• Icon + label pattern: 24px outline icon on the left, 16px 500-weight label on the right

Review Card (individual review on detail pages)

• Background: #ffffff, no border
• Padding: 0 (relies on grid gaps)
• Content: 40px circular avatar + 16px 600-weight name + 14px 400 Ash Gray date on one row, then 14px 500 body paragraph below

Inputs & Forms

Search Bar (primary home page)

• Background: #ffffff
• Border: 1px solid Hairline Gray #dddddd wrapping all three segments (Where / When / Who)
• Radius: 32px (full pill)
• Shadow: rgba(0, 0, 0, 0.04) 0 2px 6px 0 — subtle floating feel
• Structure: three segments divided by thin vertical dividers, each segment has a 12px 500 label above a 14px 500 placeholder
• Submit: Rausch circular icon button at the right edge, 48px diameter

Text Input (generic forms)

• Background: #ffffff
• Border: 1px solid Hairline Gray #dddddd
• Radius: 8px
• Padding: 14px 16px
• Focus: border switches to Ink Black, adds 0 0 0 2px black outer ring
• Error: border switches to #c13515 (Error Red), helper text uses same color

Date Picker

• Calendar grid: 7-column layout, circular 50% day cells 40–44px wide
• Selected range: Ink Black #222222 background with white numerals
• Start/end anchors: larger filled circles; middle dates use Soft Cloud #f7f7f7 tint

Navigation

Top Nav (Desktop)

• Height: ~80px
• Background: #ffffff
• Left: Airbnb wordmark+logo lockup in Rausch (102×32px)
• Center: tri-tab category picker (Homes / Experiences / Services) with 36–48px 3D icons stacked above 16px 500 labels; active tab has a 2px Ink Black underline
• Right: "Become a host" text link, then 32px circular globe (language), then 36px hamburger avatar menu
• Border-bottom: 1px solid Hairline Gray #dddddd

Top Nav (Mobile)

• Single-row search pill occupies full width: "Start your search" placeholder with a small magnifier icon
• Below: tri-tab category picker persists (Homes / Experiences / Services) — illustrated icons shrink to ~28px
• Bottom-fixed tab bar: Explore (active state Rausch) / Wishlists / Log in — 24px icons above 12px labels

Listing Detail Secondary Nav

• Sticky horizontal scroll of anchor links (Photos · Amenities · Reviews · Location · Host) appears on scroll past the hero image
• Height: 56px
• Border-bottom: 1px solid Hairline Gray

Image Treatment

• Primary aspect ratios: 4:3 for homepage listing grids, 16:9 for experience hero photography, 1:1 for avatars
• Radius: 14px on listing-grid images, 20px on detail-page hero photo frames, 50% on avatars
• Image grid on detail pages: five-photo grid with a single large-left image (50% width) and four smaller photos in a 2×2 grid on the right, all sharing the 20px outer rounded container
• Lazy loading: heavy use of loading="lazy" with blurred placeholder previews
• Carousel: circular 32px arrow buttons overlay the image, centered vertically; dot indicators sit 12px above the bottom edge

Signature Components

Guest Favorite Award Lockup (featured prominently on high-rated listing detail pages)

• Centered rating number rendered at 44–56px 700-weight
• Two hand-drawn laurel-wreath SVG illustrations flanking left and right at ~48px tall
• Below: "Guest Favorite" label at 12px 700 uppercase with 0.32px tracking, and a short sub-label at 14px 500 Ash Gray
• Full-width block, no container border — sits directly on white canvas

Tri-Tab Category Picker (appears at the top of every browse surface)

• Three tabs: Homes / Experiences / Services
• Each tab: 3D-rendered illustrated icon (~48px tall) above 16px 500 label
• Experiences and Services currently carry a small navy-blue "NEW" pill (12px 700 white text on dark blue) floating top-right of the icon
• Active tab: 2px Ink Black underline beneath the label

Inspiration City Grid (homepage "Inspiration for future getaways")

• 6-column grid of destination links on desktop, 2-column on mobile
• Each cell: 16px 600 city name on line 1, 14px 500 Ash Gray rental-type subtitle on line 2 ("Cottage rentals", "Villa rentals")
• No images — text-only grid
• Tabbed above by category (Popular / Arts & culture / Beach / Mountains / Outdoors / Things to do / Travel tips & inspiration / Airbnb-friendly apartments) — active tab has 2px underline and weight shift

Reserve Sticky Card (listing detail pages)

• Stays fixed 120px below viewport top on desktop as the user scrolls past the hero
• Collapses to a full-width bottom bar on mobile with a "From $X / night" label and a Rausch "Reserve" pill
• Always shows: price headline → date display → guest selector → Rausch CTA → "You won't be charged yet" disclaimer

Experience Host Card (experience detail pages)

• Full-width rounded container with a 3:2 cover photograph at top
• Host avatar (circular, 56px) overlapping the bottom edge of the cover by 50%
• Below overlap: host name at 16px 700, host tenure at 14px 500 Ash Gray, small Rausch "Message host" pill button
• Used as the transition between reviews and the amenities/location block

"Things to know" Strip (listing detail pages)

• 3-column grid of rule/policy blocks (House rules, Safety & property, Cancellation policy)
• Each column: icon at the top, 16px 600 heading, 14px 500 Ash Gray body, "Show more" link in Ink Black underline
• Separator: 1px Hairline Gray top and bottom borders on the overall strip

5. Layout Principles

Spacing System

• Base unit: 8px
• Extracted scale: 2, 3, 4, 5.5, 6, 8, 10, 11, 12, 15, 16, 18.5, 22, 24, 32px — fine-grained with a handful of off-grid values used for pixel-perfect icon alignment
• Section padding: ~48–64px top/bottom on desktop, 24–32px on mobile
• Card internal padding: 24px on booking panels and large cards, 16px on amenity rows, 12px on listing-card metadata
• Gutter between listing cards: 24px desktop, 16px mobile
• Between stacked text rows: 4–8px (very tight — reinforces the "dense information" feel of travel listings)

Grid & Container

• Max content width: 1760–1920px on ultra-wide (Airbnb lets the grid breathe farther than most sites); 1280px on most detail pages
• Homepage listing grid: 6 columns at ≥1760px, 5 at ≥1440px, 4 at ≥1128px, 3 at ≥800px, 2 at ≥550px, 1 below
• Detail page: 2-column asymmetric — main content ~58%, sticky booking panel ~36% on the right, ~6% gutter
• Footer: 3-column Support / Hosting / Airbnb

Whitespace Philosophy

Airbnb is densely informative but never cramped. Whitespace is used to group — listing cards have 24px of gutter so each photograph reads as a distinct object, but the metadata under each card uses 4–8px gaps so the price/city/date feels like a single unit. The detail-page booking panel has 24px internal padding, but rows within (date picker, guest selector, CTA) are stacked at 12px — the boundary between the card and the page does more separation work than the content within.

Border Radius Scale

Radius	Use
4px	Inline anchor tags, tag chips
8px	Text buttons, dropdowns, small utility buttons
14px	Listing card photography, generic content containers, badges
20px	Primary rounded buttons (pill shape), large images, booking panel
32px	Search bar pill, extra-large containers
50%	All circular icon buttons, all avatars, wishlist hearts — the system's signature round geometry

6. Depth & Elevation

Level	Treatment	Use
0	No shadow	Listing cards, body content, text-only sections
1	rgba(0, 0, 0, 0.08) 0 4px 12px	Active/pressed icon buttons (e.g., back, share, favorite) — subtle lift to indicate interaction
2	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	Booking panel sticky card, modals, dropdown menus — the system's signature three-layer elevation
Focus Ring	0 0 0 2px #222222	Active-state buttons, focused search input
White Separator Ring	rgb(255, 255, 255) 0 0 0 4px	Circular buttons overlaid on photographs — a 4px white ring cleanly separates the button from colorful image backgrounds

Shadow philosophy: Airbnb uses stacked layered shadows rather than a single drop. The three-layer booking-panel shadow reads as one cohesive lift but is actually three separate shadows at different opacity/blur values — creating subtle anti-aliasing at the shadow's perimeter that feels premium without being heavy.

Decorative Depth

• Photography as depth: the system relies heavily on full-bleed photography to create visual depth; shadows and gradients are used sparingly so the photographs do the heavy lifting
• Laurel wreath lockup: the Guest Favorite award uses two SVG laurel illustrations that give the otherwise-flat rating number a ceremonial, trophy-like presence
• 3D rendered category icons: Homes/Experiences/Services icons have their own soft internal lighting and subtle cast shadows baked into the artwork — the only place the brand allows "dimensional" illustration

7. Do's and Don'ts

Do

• Reserve Rausch #ff385c for primary actions and the active-tab indicator — never dilute it with decorative uses.
• Let photography breathe — 4:3 crops with 14–20px rounded corners, no overlaid text, no gradient scrims.
• Use Ink Black #222222 for every text layer below Rausch — this is the system's near-black, never true #000000.
• Pair the tri-tab category picker's 3D illustrated icons with flat typography — don't mix illustration styles within a single surface.
• Stack three low-opacity shadows (~2%, 4%, 10%) to create the signature booking-panel elevation.
• Use Hairline Gray #dddddd 1px borders for every card-to-card and row-to-row divider.
• Treat the booking panel as sticky on desktop, collapsing to a bottom-anchored reserve bar on mobile.
• Use 4–8px spacing within metadata groups and 24px between cards — information density is intentional.

Don't

• Don't introduce secondary accent colors outside the Rausch / Plus Magenta / Luxe Purple product-tier palette.
• Don't place text inside photographs — captions always sit below the image, never overlaid.
• Don't use all-caps labels except the single 8px superscript role.
• Don't round icon buttons to anything other than 50% — circular is the system's signature geometry.
• Don't add drop shadows to listing cards — they sit on white canvas with no elevation.
• Don't use gradient backgrounds — the only gradient in the system is a narrow Rausch → magenta sweep on the wordmark.
• Don't use the 400-regular font weight — Airbnb Cereal's body weight is 500.
• Don't override Airbnb Cereal VF with a different display face — the system is intentionally single-family.

8. Responsive Behavior

Breakpoints

Airbnb declares ~60 breakpoints (design-time artifact from their component library), but the meaningful layout shifts happen at a much smaller set:

Name	Width	Key Changes
Ultra-wide	≥1760px	6-column listing grid, 1760–1920px max content width
Desktop XL	1440–1759px	5-column grid, full nav visible, sticky right-rail booking panel
Desktop	1128–1439px	4-column grid, sticky booking panel persists
Laptop	1024–1127px	3–4 column grid, category nav remains horizontal
Tablet	800–1023px	3-column grid, global search may collapse to a single-row pill
Small tablet	550–799px	2-column grid, booking panel drops to full-width inline block
Mobile	375–549px	1-column stacked layout, bottom-fixed tab bar appears (Explore / Wishlists / Log in)
Small mobile	<375px	Edge padding tightens to 16px; category-picker icons shrink to ~28px

Touch Targets

All interactive elements meet or exceed 44×44px. The circular icon button family is specifically sized 32–44px with 8–12px extended hit-area padding. The Rausch primary Reserve button is ~48px tall. The tri-tab category picker's hit area is the full label-plus-icon rectangle (typically ~64×80px per tab).

Collapsing Strategy

• Nav: Top nav keeps Airbnb wordmark + tri-tab picker on tablet and above; on mobile the picker slides just below the search pill, and the globe/avatar controls move to a bottom-anchored tab bar.
• Search bar: Three-segment pill (Where / When / Who) with a Rausch circular submit button on desktop; collapses to a single-row "Start your search" pill on mobile, tapping which opens a full-screen search sheet.
• Booking panel: Sticky right-rail on ≥1128px; inline within the main content column between 800–1127px; bottom-fixed "Reserve" pill on <800px.
• Listing grid: Reflows 6 → 5 → 4 → 3 → 2 → 1 columns across breakpoints.
• Detail-page image grid: Five-image layout (1 large + 4 small) on desktop; becomes a swipeable full-bleed carousel on mobile with page-dot indicators.
• Footer: 3-column layout collapses to stacked single-column at <800px.

Image Behavior

• loading="lazy" universal, with blurred im_w= URL-parameterized preview thumbs served first
• Responsive images use Airbnb's muscache.com CDN with im_w query parameter for width-based delivery (im_w=240, im_w=720, im_w=1200, im_w=2400)
• No art-direction crops — the same image is scaled up/down across breakpoints
• Carousels auto-advance photo height to maintain a consistent 4:3 ratio regardless of source aspect

9. Agent Prompt Guide

Quick Color Reference

• Primary CTA: "Rausch (#ff385c)"
• Page background: "Canvas White (#ffffff)"
• Subsurface: "Soft Cloud (#f7f7f7)"
• Heading / body text: "Ink Black (#222222)"
• Secondary text: "Ash Gray (#6a6a6a)"
• Border / divider: "Hairline Gray (#dddddd)"
• Error: "Error Red (#c13515)"
• Info link: "Info Blue (#428bff)"
• Luxe tier accent: "Luxe Purple (#460479)"
• Plus tier accent: "Plus Magenta (#92174d)"

Example Component Prompts

• "Create a primary Reserve button: Rausch (#ff385c) background, white Airbnb Cereal 500-weight label at 16px, 14px × 24px padding, 8px border-radius, no shadow. On active/pressed add transform: scale(0.92) with a 2px Ink Black focus ring (0 0 0 2px #222222)."
• "Build a listing card with a 4:3 full-bleed photograph at 14px border-radius, no container shadow; below the image stack three text rows with 4px gaps: city name at 16px 600 Ink Black, rental type at 14px 500 Ash Gray (#6a6a6a), and price range in 16px 500 Ink Black with a 14px per night suffix."
• "Design a sticky booking panel: white background, 14px border-radius, 1px Hairline Gray (#dddddd) border, 3-layer elevation 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), 24px padding, 370px width, pinned 120px below viewport top on desktop. Contents: price headline, date picker, guest dropdown, Rausch primary CTA, and a 12px Ash Gray You won't be charged yet disclaimer."
• "Create a tri-tab category picker: three equal-width tabs labeled Homes, Experiences, Services; each tab has a ~48px 3D-rendered illustrated icon (house, balloon, bell) above a 16px 500 Ink Black label; active tab gets a 2px Ink Black underline; add a small 12px 700 white NEW pill on a dark navy background to the top-right of the Experiences and Services icons."
• "Render the Guest Favorite award lockup: a centered rating number at 52px 700-weight Ink Black, flanked left and right by hand-drawn SVG laurel wreaths at ~48px tall; below, a 12px 700 uppercase GUEST FAVORITE label with 0.32px tracking; sub-label at 14px 500 Ash Gray; full-width block sitting directly on white canvas with no container border."

Iteration Guide

When refining existing screens generated with this design system:

1. Focus on ONE component at a time.
2. Reference specific color names and hex codes from this document (e.g., "Ink Black #222222", not "dark gray").
3. Use natural language descriptions alongside measurements ("subtle three-layer elevation" rather than a long shadow string).
4. Describe the desired "feel" ("magazine-like, photography-first" vs "dense utility").
5. Always default to Airbnb Cereal VF 500-weight for body and 600–700 for emphasis — never 400.
6. Keep Rausch pink scarce — if more than one Rausch-colored element appears per viewport, consider whether one should be neutralized.

Known Gaps

• Homepage listing grid cards: the main property-card grid (the primary visual surface of airbnb.com) was not fully captured in the extracted homepage screenshots — content loaded only partially. Listing Card specs above are inferred from the Inspiration grid structure and Airbnb's broader conventions; confirm exact aspect ratios and metadata hierarchy against the live site before production use.
• Experiences category icons: the 3D illustrated icons for Homes / Experiences / Services are served as raster assets; their exact source-file specifications (SVG vs PNG, rendered pixel dimensions) are not documented here.
• Animation and transition timings: not captured — static extraction scope.
• Dark mode: Airbnb does not ship a native dark mode in the extracted product surfaces; this document describes the single light-mode theme only.