# Design System Inspiration of Airbnb

A warm, generous consumer marketplace anchored on a clean white canvas with Airbnb Rausch (#ff385c) as the single brand voltage. Cereal VF runs at modest weights so photography and rounded shapes carry the visual heft. Buttons are softly rounded, the search bar is a full pill, and the search-orb glows in Rausch.

Guest favorite
♥
⌕
Cottage in Wilmington
$182 night · ★ 4.92
01 — COLOR PALETTE

## Rausch + ink + soft greys

A single accent (Rausch) carries every primary moment. The rest of the palette is white canvas, ink text, and three tiers of grey hairlines. Sub-brand purple and magenta are scoped to Luxe and Plus only.

### Brand

primary (Rausch)
#ff385c
All primary CTAs, search orb, heart save state, brand wordmark.
primary-active
#e00b41
Press state on Rausch CTAs.
primary-disabled
#ffd1da
Disabled CTA tint.
luxe
#460479
Sub-brand accent — Airbnb Luxe only.
plus
#92174d
Sub-brand accent — Airbnb Plus only.

### Surface

canvas
#ffffff
Default page surface — every public page.
surface-soft
#f7f7f7
Disabled fields, sub-nav hover, filter band.
surface-strong
#f2f2f2
Circular icon button surface.

### Hairlines & Borders

hairline
#dddddd
Default 1px divider. Search bar, footer, tables.
hairline-soft
#ebebeb
Lighter divider for editorial body.
border-strong
#c1c1c1
Disabled outline buttons, focused input outlines.

### Text

ink
#222222
Display, body, primary nav links.
body
#3f3f3f
Long-form review and amenity copy.
muted
#6a6a6a
Sub-titles, footer sub-labels, "View all" links.
muted-soft
#929292
Disabled link text. Used sparingly.

### Semantic

error
#c13515
Inline form-validation error text.
legal-link
#428bff
Inline legal links (Privacy, Terms).
02 — TYPOGRAPHY SCALE

## Airbnb Cereal VF · modest weights

Display sizes sit at 22–28px in weight 500/600 — the system trusts photography over typographic muscle. Inter is used here as a substitute for Cereal VF.

rating-display64px / 700 / 1.1 / -1px
4.81
display-xl28px / 700 / 1.43
Inspiration for future getaways
display-lg22px / 500 / 1.18 / -0.44px
Close to Fethiye Aliyah Bali Beach
display-md21px / 700 / 1.43
What this place offers
display-sm20px / 600 / 1.20 / -0.18px
Things to know
title-md16px / 600 / 1.25
Wilmington
title-sm16px / 500 / 1.25
Support
body-md16px / 400 / 1.5
A quiet villa, garden, and direct beach access. Walk to the village square in eight minutes.
body-sm14px / 400 / 1.43
Cottage rentals · Mar 12–18 · $182 night
caption14px / 500 / 1.29
Where · When · Who
caption-sm13px / 400 / 1.23
© 2026 Airbnb, Inc. · Privacy · Terms · Your Privacy Choices
badge11px / 600 / 1.18
Guest favorite
uppercase-tag8px / 700 / 1.25 / 0.32px (uppercase)
NEW
button-md16px / 500 / 1.25
Reserve
nav-link16px / 600 / 1.25
Homes · Experiences · Services
03 — BUTTON VARIANTS

## Rausch primary, ink outline secondary

All buttons are 8px corner radius (`{rounded.sm}`). Pill variants step up to fully-rounded for category strips and featured cells.

button-primary
Rausch / on-primary white / 8px radius
button-primary-active
primary-active deeper red
button-primary-disabled
button-secondary
canvas / ink / 1px ink outline
button-tertiary-text
Underlined ink — modal close, "Show more"
button-pill-rausch
Pill 9999px radius, 14px label
04 — TOP NAV + PRODUCT TABS

## Three product tabs: Homes · Experiences · Services

Each tab carries a 32px hand-illustrated icon. Active tab uses a 2px ink underline. NEW tag pin is a tiny rounded pill in uppercase 8px / 700.

🏠
Homes
🎈NEW
Experiences
🛎NEW
Services
05 — SEARCH BAR

## Pill-shaped global search with three segments

9999px radius, 64px height, white surface, 1px hairline border with the system's single shadow tier applied. Internally divided into Where / When / Who segments. Right edge terminates in a circular Rausch search orb.

Where
Search destinations
When
Add dates
Who
Add guests
06 — CATEGORY STRIP

## Inline category tabs

Beneath the search bar on listing pages: a horizontal row of tap-targets in `{typography.button-sm}` muted, with a 2px ink underline marking the active selection.

Popular
Arts & culture
Beach
Mountains
Outdoors
Things to do
Travel tips & inspiration
Airbnb-friendly apartments
07 — PROPERTY CARDS

## Photo-first property cards

A 1:1 photo plate with `{rounded.md}` 14px corner clipping, "Guest favorite" floating badge top-left, heart icon top-right, and a four-line meta block beneath: title, location, dates, price.

Guest favorite
♡
Wilmington
★ 4.92
Cottage rentals
Mar 12 – 18
$182 night
Guest favorite
♡
Key West
★ 4.81
Monthly rentals
Apr 2 – 22
$240 night
Guest favorite
♡
Athens
★ 4.95
Condo rentals
May 4 – 11
$167 night
♡
Pocono Mountains
★ 4.74
House rentals
Jun 18 – 25
$298 night
08 — EXPERIENCE CARDS

## 4:5 aspect cards with NEW tag

Taller-aspect than property cards. Single-line title beneath the photo. New experiences carry a tiny NEW pin top-left.

NEW
♡
Sunset cooking class · Athens
From $48 / person
NEW
♡
Half-day surf lesson · Pocono
From $72 / person
♡
Olive grove walk · Crete
From $35 / person
NEW
♡
Pottery studio · Lisbon
From $58 / person
09 — RATING DISPLAY

## The signature listing-detail moment

A 64px / 700 rating number flanked by laurel-wreath ornaments. The single typographically loud moment in the entire system. Guest-favorite tagline and stat row beneath.

4.81

Guest favorite — One of the most loved homes on Airbnb based on ratings, reviews, and reliability.

4.9
Cleanliness
4.8
Accuracy
4.9
Check-in
4.8
Communication
4.7
Value
10 — AMENITIES + REVIEWS

## What this place offers

Two-column amenity list at desktop, 1-column at mobile. Each row pairs a 24×24px icon plate with the amenity label in `{typography.body-md}`.

Wifi · 200 Mbps
Beach access — beachfront
Free parking on premises
Air conditioning
Kitchen
Workspace — dedicated
Pool
Pets allowed

### Reviews

Mira
2 weeks ago · 1 year on Airbnb

A quiet villa, garden, and direct beach access. The host was responsive and the kitchen was perfectly equipped for a long stay.

Daniel
1 month ago · 3 years on Airbnb

Photos were honest. The neighborhood is walkable in the evening and the host left a hand-drawn map of the local market.

11 — HOST + RESERVATION CARDS

## Listing detail: 2-column with sticky reservation rail

Left column carries amenities, reviews, and host card. Right column is the sticky `{component.reservation-card}` — nightly price, date selector, guest stepper, primary CTA, fee breakdown.

Hosted by Eylem
Superhost · 4 years hosting · Speaks English, Turkish

Eylem is a Superhost — Superhosts are experienced, highly rated hosts who are committed to providing great stays.

$182 night
Check-in
Mar 12, 2026
Checkout
Mar 18, 2026
Guests
2 adults
$182 × 6 nights$1,092
Cleaning fee$48
Service fee$165
Total before taxes$1,305
12 — DATE PICKER

## Circular day cells, ink fill on selected

40×40px circular cells. Selected days get an ink fill with white text; range states sit on a soft-grey lozenge.

Mo
Tu
We
Th
Fr
Sa
Su
25
26
27
28
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
13 — FORMS

## Floating-label text inputs

56px height, 1px hairline outline that thickens to 2px ink on focus. The label floats to the top inside the input.

Guests
Email address
Phone number
Message to host
14 — CITY LINK GRID

## Inspiration for future getaways

Homepage's signature grid. 6-column at desktop, each cell is a city name in `{typography.title-md}` over a category sub-label in `{typography.body-sm}` muted.

Wilmington
Cottage rentals
Key West
Monthly rentals
Cleveland
Villa rentals
London
Condo rentals
Barcelona
Condo rentals
Memphis
Vacation rentals
Pocono Mountains
House rentals
Athens
Condo rentals
Maui
Villa rentals
St. Petersburg
Vacation rentals
North Myrtle Beach
Villa rentals
Portland
Apartment rentals
15 — SPACING SCALE

4px base with a 2px micro-step. Major sections at 64px.

xxs · 2px
xs · 4px
sm · 8px
md · 12px
base · 16px
lg · 24px
xl · 32px
xxl · 48px
section · 64px
16 — BORDER RADIUS

Soft, generous rounding. Buttons at 8px, cards at 14px, search bar fully pill (9999px).

0 · none
4 · xs
8 · sm
14 · md
20 · lg
32 · xl
full
17 — ELEVATION & DEPTH

Essentially one shadow tier. Most surfaces are flat — depth comes from photography and rounded clipping.

##### Flat / Canvas

Body, hero, footer, all editorial bands — 95% of surfaces.

##### Card hover float

The single shadow tier — search bar at rest, hovered property cards, dropdown menus.

##### Rounded clipping

Photo cards rely on `{rounded.md}` corner clipping for "card" feel without a shadow.

18 — RESPONSIVE BEHAVIOR

Name | Width | Key Changes
--- | --- | ---
Mobile | < 744px | Hamburger nav; product tabs hide behind sheet; search bar collapses to a single tappable pill; property cards 1-up; reservation collapses to sticky bottom bar.
Tablet | 744–1128px | Top nav keeps tabs; search bar narrows; property cards 2-up; reservation card stays sticky right-rail.
Desktop | 1128–1440px | Full top nav with three tabs centered; full-width search bar; property cards 4-up; city grid 6-column.
Wide | > 1440px | Listing/search content caps at 1440px; editorial caps at 1280px.

375
mobile
600
small phone
744
tablet
1128
laptop
1280
desktop
1440
wide

#### Touch Targets

- Primary CTAs at minimum 48 × 48px (above WCAG AAA).
- Search orb is 48 × 48px circular — the most-tapped element on the page.
- Heart save button 32 × 32px circular — borderline AAA, compensated by 12px photo padding.
- Date-picker day cells are 40 × 40px circular.

#### Collapsing Strategy

- Top product tabs collapse into a hamburger sheet below 744px.
- Search bar's 3 segments collapse into a single-tap entry on mobile.
- Property and city grids drop column counts cleanly — never reflow rows.
- Reservation card switches from sticky right-rail to sticky bottom bar on mobile.