🏡Design🌊Beachfront🏙️Cities⛰️Amazing views🏕️Camping✨New🏊Pools🛖Cabins
Extracted DESIGN.md

Airbnb as a Design System Preview

The tokens are extracted, but the composition follows the Airbnb interface more closely: sticky header, central segmented search, category rail, image-centered stay cards, wishlist heart, badges, and map CTA.

Accent
#FF385C
Ink
#222222
Background
#F7F7F7
Border
#DDDDDD

Airbnb-style stay cards

Cards stay flat. The image is the container, metadata is tightly set below. This makes the preview feel closer to Airbnb without copying the site exactly.

Guest favorite
Design loft in Lisbon★ 4.91
Hosted by Sofia · 2,143 km away
Jun 12–17
186 € night
Lake house in Como★ 4.88
Lake and mountain view
Jul 3–8
244 € night
New
Cabin in South Tyrol★ 4.96
Minimalist · Wood · Quiet
Aug 20–25
312 € night
Studio in Copenhagen★ 4.82
Design district · Near metro
Sep 1–6
129 € night

01 / Colors

Semantic roles from the Airbnb extraction. Red remains accent, not body text color.

accent#FF385C
accent dark#E00B41
ink#222222
canvas#FFFFFF
background#F7F7F7
border#DDDDDD
muted text#6A6A6A
skeleton#EBEBEB
success#038026
warning bg#FFF4E5
error#C13515
muted surface#F2F2F2

02 / Typography

Airbnb Cereal/Circular-like UI typography: compact, friendly, strong in cards and search.

Display / Search-led travel UIWhere to next?

48px · 700 · 1.04 · -0.04em

Headline 28/700h1
Section 22/700h2
Card title 15/500card
Meta 12/500meta

03 / Buttons, Forms, Badges

The components stay in the Airbnb product context: pills, round search, clear meta states.

Buttons

Form controls

Badges

Guest favoriteSuperhostOnly 1 leftNot available

04 / Brand-specific product patterns

The preview shows Airbnb-specific composition patterns instead of generic design system tiles.

Segmented search capsuleWhere, Check-in, Check-out, Guests.
Stay image cardPhoto as card, meta below.
Rating / Guest FavoriteTrust signal as pill badge.
Wishlist overlayHeart on media surface.
Map/List togglePrice pins and fixed map CTA.

05 / Spacing

Scale for header, search bar, listing grid, and compact card metadata.

4px
8px
12px
16px
24px
32px
48px

06 / Radius

Airbnb lives from consistent pill and card rounding.

4px
8px
12px
16px
24px
pill

07 / Elevation

Cards stay flat. Shadows sit on search, popovers, controls, and map pins.

Flat card
Search
Control
Popover

08 / Extracted component tokens

Copyable tokens for an Airbnb-inspired implementation.

--airbnb-accent: #FF385C;
--airbnb-accent-dark: #E00B41;
--airbnb-ink: #222222;
--airbnb-canvas: #FFFFFF;
--airbnb-bg: #F7F7F7;
--airbnb-border: #DDDDDD;
--airbnb-muted: #6A6A6A;
--search-radius: 999px;
--search-shadow: 0 1px 2px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.05);
--card-radius: 16px;
--listing-grid-gap: 24px;
--category-rail-height: 76px;
--map-cta-radius: 999px;
Source: www.designmd-store.com