Airbnb

Overview

Airbnb is the canonical example of a generous, photography-led consumer marketplace. The base canvas is **pure white** (`{colors.canvas}` — #ffffff) with deep near-black ink (`{colors.ink}` — #222222) for headlines and body, and a single voltage of **Rausch** (`{colors.primary}` — #ff385c) carrying every primary CTA, the search-button orb, the heart save state, and inline brand links. There is no secondary brand color in mainline marketing — the **Luxe purple** (`{colors.luxe}` — #460479) and **Plus magenta** (`{colors.plus}` — #92174d) tokens are sub-brand accents that only appear inside Airbnb Luxe / Plus contexts.

Type runs **Airbnb Cereal VF** (a custom variable font Airbnb licenses), with **Circular** as the historic in-house fallback and a system stack underneath. Cereal sits at modest weights — display headlines render at 22–28px in weight 500–600, not the heavy 700+ weights that financial or enterprise systems lean on. The hero h1 ("Inspiration for future getaways") on the homepage is just 28px / 700, which would feel small on a typical SaaS page; here it works because the layout leans on photography (city collage, property cards) for visual weight rather than typographic muscle.

The shape language is **soft**. Buttons are 8px radius (`{rounded.sm}`), property cards are ~14px (`{rounded.md}`), the search bar is fully pill-shaped (`{rounded.full}`), wishlist hearts and search orbs are circles (`{rounded.full}`), and category strip rounded corners run at 32px (`{rounded.xl}`). There is essentially no hard corner anywhere except the body grid itself — every interactive element is rounded.

**Key Characteristics:**

• Single accent color: `{colors.primary}` (#ff385c — "Rausch") carries every primary CTA, the search orb, the heart save state, and the brand wordmark. Used scarcely — most pages are 90% white + ink with one or two Rausch moments.
• Custom variable type: `Airbnb Cereal VF`. Display weights sit at 500–700, body at 400. Modest weight is intentional — the system trusts photography for visual heft.
• Three-product top nav: Homes, Experiences, Services — each with a hand-illustrated 32px icon and "NEW" badges (`{component.new-tag}`) on the two newer products. Active tab uses an underline rule (`{component.product-tab-active}`).
• Pill-shaped global search bar: white surface, fully rounded (`{rounded.full}`), divided by 1px hairlines into Where / When / Who segments, terminated by a circular Rausch search orb (`{component.search-orb}`).
• Property cards are photo-first: aspect-ratio rectangles with `{rounded.md}` corner clipping, swipeable image carousel, "Guest favorite" floating badge top-left, heart icon top-right, then 4–5 lines of meta beneath.
• Editorial dropdowns (footer, language picker) are clean text columns over the white canvas — no card surface, no shadow.
• The design system caps elevation at one shadow tier (`box-shadow: rgba(0,0,0,0.02) 0 0 0 1px, rgba(0,0,0,0.04) 0 2px 6px, rgba(0,0,0,0.1) 0 4px 8px`) — used on hover-floated cards and search/account dropdowns.
• 8px base spacing system, with major sections at `{spacing.section}` (64px) — generous but not airy enough to feel editorial-magazine; the marketplace density wants more cards per scroll.

Colors

Brand & Accent

• **Rausch** (`{colors.primary}` — #ff385c): The single brand color. Used for primary CTA backgrounds (Reserve, Continue), the search orb, the heart save state on property cards, and inline brand links. The most recognizable color in consumer travel.
• **Rausch Active** (`{colors.primary-active}` — #e00b41): The press / pointer-down variant — slightly more saturated. Used on `{component.button-primary-active}`.
• **Rausch Disabled** (`{colors.primary-disabled}` — #ffd1da): A pale tint used on disabled CTAs.
• **Luxe Purple** (`{colors.luxe}` — #460479): Sub-brand accent for Airbnb Luxe. Only appears inside Luxe-branded surfaces — never in mainline marketing.
• **Plus Magenta** (`{colors.plus}` — #92174d): Sub-brand accent for Airbnb Plus. Same scoping as Luxe — sub-product only.

Surface

• **Canvas** (`{colors.canvas}` — #ffffff): The default page floor for every public page. Airbnb does not have a dark mode on the public web.
• **Surface Soft** (`{colors.surface-soft}` — #f7f7f7): The lightest fill — used on disabled fields, sub-nav hover backgrounds, and the inline search filter band.
• **Surface Strong** (`{colors.surface-strong}` — #f2f2f2): Slightly heavier fill — circular icon-button surface (e.g., the breadcrumb back-arrow and listing toolbar buttons).

Hairlines & Borders

• **Hairline** (`{colors.hairline}` — #dddddd): The default 1px border tone — search bar dividers, table separators, footer column splitters, card 1px borders.
• **Hairline Soft** (`{colors.hairline-soft}` — #ebebeb): A lighter divider used on long-scrolling editorial body separators.
• **Border Strong** (`{colors.border-strong}` — #c1c1c1): A heavier stroke used on disabled outline buttons and form input outlines after focus.

Text

• **Ink** (`{colors.ink}` — #222222): The dominant text color on light surfaces. Display headlines, body paragraphs, primary nav links, and most inline link text. Never pure black.
• **Body** (`{colors.body}` — #3f3f3f): A secondary running-text color used inside long-form review and amenity copy where ink would feel too heavy.
• **Muted** (`{colors.muted}` — #6a6a6a): Sub-titles inside city link blocks ("Cottage rentals", "Villa rentals"), inactive product-tab labels, footer category sub-labels, "View all" links.
• **Muted Soft** (`{colors.muted-soft}` — #929292): Disabled link text. Used very sparingly.
• **Star Rating** (`{colors.star-rating}` — #222222): The same ink token — Airbnb's star icon and "4.81" rating numbers all render in ink rather than a yellow/gold color, which is a deliberate brand choice (yellow stars feel cheap in travel context).
• **On Primary** (`{colors.on-primary}` — #ffffff): White text on Rausch CTAs.

Semantic

• **Error** (`{colors.primary-error-text}` — #c13515): Inline error text for form validation. Distinct from Rausch — slightly darker, more saturated red.
• **Error Hover** (`{colors.primary-error-text-hover}` — #b32505): Darkens on link hover.
• **Legal Link Blue** (`{colors.legal-link}` — #428bff): Inline links inside legal copy (Privacy, Terms). Only used inside the legal sub-band.

Scrim

• **Scrim** (`{colors.scrim}` — #000000 at 50% opacity): The global modal backdrop tone — date picker, login dialog, language picker. Stored as the base hex; opacity is applied at render time.

Typography

Font Family

The system runs **Airbnb Cereal VF** for everything — display, body, navigation, captions, microcopy. Fallbacks walk `Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif`. **Circular** is the historic in-house typeface still kept as the first non-variable fallback; system stacks back it up.

There is no separate display family. The variable font carries the entire scale.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |

|---|---|---|---|---|---|

| `{typography.rating-display}` | 64px | 700 | 1.1 | -1px | Listing detail rating display ("4.81") |

| `{typography.display-xl}` | 28px | 700 | 1.43 | 0 | Homepage h1 ("Inspiration for future getaways") |

| `{typography.display-lg}` | 22px | 500 | 1.18 | -0.44px | Listing detail h1 ("Close to Fethiye Aliyah Bali Beach…") |

| `{typography.display-md}` | 21px | 700 | 1.43 | 0 | Section heads inside listing detail ("What this place offers") |

| `{typography.display-sm}` | 20px | 600 | 1.20 | -0.18px | Sub-section titles ("Things to know") |

| `{typography.title-md}` | 16px | 600 | 1.25 | 0 | City link block titles ("Wilmington", "Athens") |

| `{typography.title-sm}` | 16px | 500 | 1.25 | 0 | Footer column heads ("Support", "Hosting", "Airbnb") |

| `{typography.body-md}` | 16px | 400 | 1.5 | 0 | Default running-text inside listing copy |

| `{typography.body-sm}` | 14px | 400 | 1.43 | 0 | Card meta lines, dates, prices, distance text |

| `{typography.caption}` | 14px | 500 | 1.29 | 0 | Search field segment labels ("Where", "When", "Who") |

| `{typography.caption-sm}` | 13px | 400 | 1.23 | 0 | Footer legal line ("© 2026 Airbnb, Inc.") |

| `{typography.badge}` | 11px | 600 | 1.18 | 0 | "Guest favorite" floating badge text |

| `{typography.micro-label}` | 12px | 700 | 1.33 | 0 | Card amenity micro-labels ("Inline 6") |

| `{typography.uppercase-tag}` | 8px | 700 | 1.25 | 0.32px (uppercase) | "NEW" badge on product nav tabs |

| `{typography.button-md}` | 16px | 500 | 1.25 | 0 | Primary CTA button labels |

| `{typography.button-sm}` | 14px | 500 | 1.29 | 0 | Pill button labels (category strip) |

| `{typography.link}` | 14px | 400 | 1.43 | 0 | Inline body links |

| `{typography.nav-link}` | 16px | 600 | 1.25 | 0 | Top product-nav labels (Homes, Experiences, Services) |

Principles

Display weights stay modest. The homepage h1 at 28px / 700 is deliberately small — it tucks under the search bar so photography and the city-link grid carry visual hierarchy. The listing-detail h1 at 22px / 500 is even quieter; the listing photo banner does the work above it.

The single typographically loud moment in the entire system is the **rating display** (`{typography.rating-display}` — 64px / 700) on listing pages. That is the only place the system trusts type alone to carry hierarchy — rating numbers are a peak trust signal, so they get the loudest treatment.

Note on Font Substitutes

If Airbnb Cereal VF and Circular are unavailable, **Inter** is the closest open-source substitute. Adjust display headlines down by ~2% in line-height to match Cereal's slightly tighter cap height; otherwise the proportions transfer cleanly.

Layout

Spacing System

• **Base unit:** 4px (with 2px micro-step).
• **Tokens:** `{spacing.xxs}` 2px · `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.md}` 12px · `{spacing.base}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 48px · `{spacing.section}` 64px.
• **Section padding (vertical):** `{spacing.section}` (64px) for major page bands; tighter than typical SaaS marketing (80–96px) because marketplace pages need higher card density per scroll.
• **Card internal padding:** `{spacing.lg}` (24px) for `{component.host-card}` and `{component.reservation-card}`; `{spacing.base}` (16px) for property-card meta block; `{spacing.sm}` (8px) for caption / date-row gutters.
• **Gutters:** `{spacing.base}` (16px) between cards in the homepage city grid; `{spacing.lg}` (24px) inside footer column gutters; `{spacing.xs}` (4px) on dense category-strip dividers.

Grid & Container

• **Max content width:** ~1280px centered on the homepage and editorial pages. Listing detail pages cap closer to 1080px to keep the photo banner and reservation rail readable.
• **City link grid (homepage footer):** 6-column grid at desktop with each cell housing a city name in `{typography.title-md}` and a category sub-label in `{typography.body-sm}` muted.
• **Listing detail:** 2-column with photo / amenity body on the left (~64% width) and a sticky reservation card (`{component.reservation-card}`) on the right (~32%).
• **Footer:** 3-column link list (Support / Hosting / Airbnb) at desktop, collapsing to 1-column on mobile.

Whitespace Philosophy

The system gives editorial bands 64px of vertical breathing room but compresses card grids — property and city-link cards sit just 16px apart. The contrast is intentional: the page reads as "open hero, dense marketplace below," reinforcing the marketplace nature without overwhelming the visitor at the fold.

Elevation

The system has essentially **one shadow tier** plus the flat baseline.

• **Flat (no shadow):** Body, hero, footer, all editorial bands — 95% of surfaces.
• **Card hover float:** `box-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` — applied to property cards on pointer hover, the search bar at rest, and the dropdown menus (account menu, language picker, date picker). This is the single shadow definition in the entire system.
• **Modal scrim:** `{colors.scrim}` rendered at 50% opacity — the global modal backdrop. Used on date pickers, login dialogs, language picker.

There are no progressive elevation tiers — the system either has the one shadow or none. Depth comes from photography, the white-on-white surface separation, and rounded-corner clipping rather than from layered shadows.

Components

Buttons

**`button-primary`** — Rausch fill, white text, 8px radius, 14×24px padding, 48px height, weight 500. The most common CTA across the system: "Reserve", "Continue", "Search", account-flow primaries.

**`button-primary-active`** — The press state. Background flips to `{colors.primary-active}`. No transform, no shadow change.

**`button-primary-disabled`** — Pale Rausch tint at #ffd1da with white text. Cursor not-allowed.

**`button-secondary`** — White fill with ink text and a 1px ink outline. 8px radius. Used for "Save", "Cancel", and inverse CTAs over Rausch surfaces.

**`button-tertiary-text`** — Plain ink text, no surface, no border. Underlined on hover. Used for "Show more" type links and modal close labels.

**`button-pill-rausch`** — A pill-shaped Rausch CTA used on featured cells (e.g., "Become a host" sub-CTA) — 9999px radius, 10×20px padding, 14px label.

Search Surface

**`search-bar-pill`** — The signature global search bar. White fill, 9999px radius, 64px height, 1px hairline 1px-shadow border. Internally divided by vertical hairline rules into `{component.search-field-segment}` cells (Where / When / Who). Each segment holds an uppercase caption label above a placeholder line in `{typography.caption}`.

**`search-orb`** — The circular Rausch orb terminating the right edge of the search bar. 48×48px, fully rounded, white magnifying-glass icon centered. The hottest single color moment on the homepage.

Top Navigation

**`top-nav`** — White surface, 80px height, 1px bottom hairline. The Airbnb wordmark sits flush left, the three product tabs (Homes / Experiences / Services) sit in the dead center, and account utilities (host link, language globe, account menu) sit flush right.

**`product-tab-active`** — Ink label in `{typography.nav-link}`, 32px hand-illustrated icon, 2px ink underline rule beneath the icon-label pair.

**`product-tab-inactive`** — Muted label, illustrated icon, no underline. Becomes active on click.

**`new-tag`** — A tiny rounded-pill badge (`{rounded.full}`) anchored top-right of an icon, carrying the uppercase "NEW" label in `{typography.uppercase-tag}` (8px / 700 with 0.32px tracking, uppercase). Used on Experiences and Services to signal recency.

Listing Cards

**`property-card`** — A photo-first card. 1:1 aspect-ratio image with `{rounded.md}` corner clipping, image carousel dots overlay, "Guest favorite" floating badge top-left (`{component.guest-favorite-badge}`), and a heart icon top-right (`{component.icon-button-circle}` in default outlined state, Rausch-filled when saved). Beneath the image: 4–5 lines of meta — title (`{typography.title-md}`), distance / dates (`{typography.body-sm}` muted), and price ("$X night") right-aligned.

**`property-card-photo`** — The photo plate itself, separated as a token because some surfaces (wishlist, search results) reuse just the photo without the meta block.

**`experience-card`** — A taller-aspect card (4:5) for experience listings. Same `{rounded.md}` clipping, floating "NEW" badge top-left, heart top-right, and a single-line title beneath.

**`guest-favorite-badge`** — White rounded pill (`{rounded.full}`) at 11px / 600 weight. Sits over the photo with the system's only shadow tier applied for elevation.

Listing Detail

**`rating-display-card`** — The signature listing-detail moment. A 64px / 700 rating number ("4.81") flanked left and right by tiny laurel-wreath SVG ornaments. Beneath the rating: "Guest favorite" tagline and a row of ink stat columns. The largest typographic weight in the whole system.

**`amenity-row`** — A 1-column list of amenity icons + ink labels in `{typography.body-md}`. 12px row padding, no border between rows; section is closed by a 1px hairline divider above and below.

**`reviews-card`** — A 2-column grid of review excerpts. Each column holds an author row (avatar, name, date) above a 3-line excerpt with "Show more" tertiary link.

**`host-card`** — A white card with `{rounded.md}` rounding and 24px padding holding a host avatar, name, "Superhost" badge, response-rate stat, and a "Contact host" `{component.button-secondary}`.

**`reservation-card`** — The sticky right-rail card on listing detail pages. White surface, `{rounded.md}` rounding, 1px hairline border, 1px shadow tier elevation, 24px padding. Contains: nightly price (`{typography.display-md}` ink), date-range selector, guest-count stepper, "Reserve" primary CTA full-width, and a fee breakdown stack beneath in `{typography.body-sm}`.

Date Picker

**`date-picker-day`** — A 40×40px circular cell carrying the day number in `{typography.body-sm}`. Default state is transparent fill, ink text.

**`date-picker-day-selected`** — Ink fill, white text, full circle (`{rounded.full}`). Range states between two selected days carry a `{colors.surface-soft}` lozenge background that connects them.

Forms

**`text-input`** — White surface, 1px hairline outline, `{rounded.sm}` 8px radius, 56px height, 14×12px padding. Stacked label above (in `{typography.caption}` muted), placeholder text in `{typography.body-md}` muted. On focus, the border thickens to 2px ink and the border color flips to `{colors.ink}` — no glow, no ring.

Footer

**`footer-light`** — White surface (matches the page canvas — Airbnb has no contrast footer), 48×80px padding. Three columns of link blocks (Support / Hosting / Airbnb), separated by generous 24px gutters. Each column heads with a `{typography.title-sm}` ink label and stacks `{component.footer-link}` rows in `{typography.body-sm}` ink.

**`legal-band`** — A bottom strip beneath the footer columns carrying the copyright line, language picker (globe icon + "English (US)" link), currency picker, and social icons (Facebook, X, Instagram). All text in muted `{colors.muted}` at `{typography.caption-sm}`.

Responsive Behavior

| Name | Width | Key Changes |

|---|---|---|

| Mobile | < 744px | Top nav collapses to logo + hamburger; product tabs hide behind a sheet; search bar collapses to a single tappable pill; property cards stack 1-up; city grid 1-column; listing detail collapses reservation card to a sticky bottom bar. |

| Tablet | 744–1128px | Top nav keeps product tabs but search bar narrows; property cards 2-up; city grid 2–3 column; reservation card stays sticky right-rail at narrower width. |

| Desktop | 1128–1440px | Full top nav with three product tabs centered; search bar at full pill width with all 3 segments visible; property cards 4-up; city grid 6-column; listing detail 2-column with reservation rail. |

| Wide | > 1440px | Content width caps at 1440px on listing/search pages and ~1280px on editorial; gutters absorb the rest. |

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 is 32×32px circular — borderline for AAA but compensated by a generous 12px padding inside the photo card.
• 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 that opens a full-screen search overlay on mobile.
• Property and city-link grids drop column counts cleanly at each breakpoint — never reflow rows; always reduce columns.
• Reservation card on listing detail switches from sticky right-rail to a sticky bottom bar on mobile, carrying just the "Reserve" CTA + nightly price summary.

Known Gaps

• **Hover state colors:** intentionally not documented per the global no-hover policy — Airbnb's actual `:hover` styling for property cards is a subtle elevation lift, but precise extraction is unreliable.
• **Loading states / skeleton screens:** not visible on the extracted surfaces.
• **Map view styling:** the search-results map uses Mapbox-tinted tiles with custom Rausch markers; not captured here.
• **Form input error states:** error text color (`{colors.primary-error-text}`) is documented, but the full input outline + helper-text combination on validation failure was not visible in the captured surfaces.
• **Sub-brand palettes:** Luxe (`{colors.luxe}`) and Plus (`{colors.plus}`) are documented as tokens, but their full sub-system (typography overrides, surface treatment) lives on separate sub-domains and is not captured here.

개요

에어비앤비는 사진 중심의 관대한 소비자 시장의 전형적인 예입니다. 기본 캔버스는 **순백색**(`` — #ffffff)이며 헤드라인과 본문에는 진한 검정에 가까운 잉크(`` — #222222)가 포함되어 있으며 모든 기본 CTA를 전달하는 **Rausch**(`` — #ff385c)의 단일 전압, 검색 버튼 구, 하트 저장 상태 및 인라인 브랜드 링크. 메인라인 마케팅에는 보조 브랜드 색상이 없습니다. **Luxe 보라색**(`` — #460479) 및 **Plus magenta**(`` — #92174d) 토큰은 Airbnb Luxe / Plus 컨텍스트 내에서만 표시되는 하위 브랜드 강조색입니다.

Type은 **Airbnb Cereal VF**(맞춤형 가변 글꼴 Airbnb 라이선스)를 실행하며, **Circular**는 역사적인 사내 폴백이고 그 아래에는 시스템 스택이 있습니다. 시리얼은 적당한 무게로 표시됩니다. 디스플레이 헤드라인은 금융 또는 기업 시스템이 의존하는 무거운 700개 이상의 무게가 아닌 무게 500~600에서 22~28px로 렌더링됩니다. 홈페이지의 영웅 h1("Inspiration for future getaways")은 28px/700에 불과하며 일반적인 SaaS 페이지에서는 작게 느껴질 수 있습니다. 여기서는 레이아웃이 인쇄상의 힘보다는 시각적 무게를 위해 사진(도시 콜라주, 속성 카드)에 의존하기 때문에 작동합니다.

모양 언어는 **소프트**입니다. 버튼은 반경 8픽셀(``), 속성 카드는 ~14픽셀(``), 검색 표시줄은 완전한 알약 모양(``), 위시리스트 하트 및 검색 구는 원(``), 카테고리 스트립 둥근 모서리는 32픽셀(``)입니다. 본문 그리드 자체를 제외하면 본질적으로 딱딱한 모서리가 없습니다. 모든 대화형 요소는 둥글게 처리되어 있습니다.

**주요 특성:**

• 단일 강조 색상: `` (#ff385c — "Rausch")은 모든 기본 CTA, 검색 구, 하트 세이브 상태 및 브랜드 워드마크를 포함합니다. 거의 사용되지 않음 - 대부분의 페이지는 90% 흰색 + 잉크로 구성되어 있으며 Rausch 순간이 한두 번 있습니다.
• 맞춤 변수 유형: `Airbnb Cereal VF`. 디스플레이 무게는 500~700, 본체는 400입니다. 적당한 무게는 의도된 것입니다. 시스템은 시각적 무게를 위해 사진을 신뢰합니다.
• 3가지 제품 상단 탐색: 홈, 경험, 서비스 - 각각 손으로 그린 32px 아이콘과 두 가지 최신 제품에 'NEW' 배지(``)가 있습니다. 활성 탭은 밑줄 규칙(``)을 사용합니다.
• 알약 모양의 전역 검색 표시줄: 흰색 표면, 완전히 둥근 모양(``), 1px 가는선으로 Where/When/Who 세그먼트로 나누어지고 원형 Rausch 검색 구(``)로 종료됩니다.
• 속성 카드는 사진 우선입니다. `` 모서리 자르기가 포함된 가로세로 비율 직사각형, 스와이프할 수 있는 이미지 캐러셀, 왼쪽 상단에 '게스트 즐겨찾기' 플로팅 배지, 오른쪽 상단에 하트 아이콘, 그 아래에 4~5줄의 메타데이터가 있습니다.
• 편집 드롭다운(바닥글, 언어 선택기)은 흰색 캔버스 위의 깨끗한 텍스트 열입니다. 카드 표면이나 그림자가 없습니다.
• 디자인 시스템은 높이를 하나의 섀도우 계층(`box-shadow: rgba(0,0,0,0.02) 0 0 0 1px, rgba(0,0,0,0.04) 0 2px 6px, rgba(0,0,0,0.1) 0 4px 8px`)으로 제한합니다. 호버 플로팅 카드 및 검색/계정 드롭다운에 사용됩니다.
• 8px 기본 간격 시스템, ``(64px)에 주요 섹션 포함 — 넉넉하지만 편집 잡지처럼 느껴질 만큼 통풍이 잘 되지는 않습니다. 시장 밀도는 스크롤당 더 많은 카드를 원합니다.

색상

브랜드 및 액센트

• **Rausch** (`` — #ff385c): 단일 브랜드 색상입니다. 기본 CTA 배경(예약, 계속), 검색 구체, 속성 카드의 하트 저장 상태 및 인라인 브랜드 링크에 사용됩니다. 소비자 여행에서 가장 눈에 띄는 색상입니다.
• **Rausch Active** (`` — #e00b41): 누르기/포인터다운 변형 — 약간 더 포화됩니다. ``.
에 사용됨
• **Rausch 비활성화됨** (`` — #ffd1da): 비활성화된 CTA에 사용되는 옅은 색조입니다.
• **Luxe Purple** (`` — #460479): Airbnb Luxe의 하위 브랜드 악센트입니다. Luxe 브랜드 표면에만 표시되며 메인라인 마케팅에는 표시되지 않습니다.
• **Plus Magenta** (`` — #92174d): Airbnb Plus의 하위 브랜드 악센트입니다. Luxe와 동일한 범위 — 하위 제품만 해당.

표면

• **캔버스** (`` — #ffffff): 모든 공개 페이지의 기본 페이지 층입니다. 에어비앤비에는 공개 웹에 다크 모드가 없습니다.
• **부드러운 표면** (`` — #f7f7f7): 가장 밝은 채우기 — 비활성화된 필드, 하위 탐색 호버 배경 및 인라인 검색 필터 밴드에 사용됩니다.
• **표면이 강함** (`` — #f2f2f2): 약간 더 두꺼운 채우기 — 원형 아이콘 버튼 표면(예: 이동 경로 뒤로 화살표 및 목록 도구 모음 버튼).

가는선 및 테두리

• **가는 선** (`` — #dddddd): 기본 1px 테두리 톤 — 검색 창 구분선, 표 구분선, 바닥글 열 분할기, 카드 1px 테두리.
• **헤어라인 소프트**(`` — #ebebeb): 긴 스크롤 편집 본문 구분 기호에 사용되는 더 가벼운 구분선입니다.
• **테두리 강함**(`` — #c1c1c1): 비활성화된 윤곽선 버튼과 포커스 후 양식 입력 윤곽선에 더 무거운 스트로크가 사용됩니다.

텍스트

• **잉크** (`` — #222222): 밝은 표면의 주요 텍스트 색상입니다. 헤드라인, 본문 단락, 기본 탐색 링크 및 대부분의 인라인 링크 텍스트를 표시합니다. 절대로 순수한 검정색이 아닙니다.
• **본문**(`` — #3f3f3f): 잉크가 너무 무거워 보일 수 있는 장문 리뷰 및 편의 시설 문구 내부에 사용되는 보조 실행 텍스트 색상입니다.
• **음소거됨**(`` — #6a6a6a): 도시 링크 블록 내부의 하위 제목('코티지 임대', '빌라 임대'), 비활성 제품 탭 라벨, 바닥글 카테고리 하위 라벨, '모두 보기' 링크.
• **음소거 소프트**(`` — #929292): 링크 텍스트가 비활성화되었습니다. 매우 드물게 사용됩니다.
• **별점**(`` — #222222): 동일한 잉크 토큰 — Airbnb의 별표 아이콘과 "4.81" 등급 번호는 모두 노란색/금색이 아닌 잉크로 렌더링됩니다. 이는 의도적인 브랜드 선택입니다(노란색 별은 여행 맥락에서 저렴하다고 느낍니다).
• **기본**(`` — #ffffff): Rausch CTA의 흰색 텍스트.

의미

• **오류** (`` — #c13515): 양식 유효성 검사를 위한 인라인 오류 텍스트입니다. Rausch와는 다릅니다. 약간 더 어둡고 채도가 더 높은 빨간색입니다.
• **호버 오류**(`` — #b32505): 링크를 호버하면 어두워집니다.
• **법적 링크 블루**(`` — #428bff): 법적 사본 내부의 인라인 링크(개인정보 보호, 약관). 합법적인 하위 밴드 내에서만 사용됩니다.

스크림

• **스크림** (50% 불투명도에서 `` — #000000): 전역 모달 배경음 — 날짜 선택기, 로그인 대화 상자, 언어 선택기. 기본 16진수로 저장됩니다. 불투명도는 렌더링 시 적용됩니다.

타이포그래피

글꼴군

시스템은 디스플레이, 본문, 탐색, 캡션, 마이크로카피 등 모든 항목에 대해 **Airbnb Cereal VF**를 실행합니다. 폴백은 `Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif`을 수행합니다. **원형**은 여전히 ​​최초의 비변수 폴백으로 유지되는 역사적인 내부 서체입니다. 시스템 스택이 이를 백업합니다.

별도의 디스플레이 제품군이 없습니다. 가변 글꼴은 전체 규모를 전달합니다.

계층

| 토큰 | 사이즈 | 무게 | 라인 높이 | 문자 간격 | |

사용

|---|---|---|---|---|---|

| _`` | 64px | 700 | 1.1 | -1픽셀 | 목록 세부 평가 표시("4.81") |

| _`` | 28px | 700 | 1.43 | 0 | 홈페이지 h1("향후 휴가를 위한 영감") |

| _`` | 22px | 500 | 1.18 | -0.44px | 숙소 세부정보 h1("페티예 알리야 발리 해변과 가깝습니다…") |

| _`` | 21px | 700 | 1.43 | 0 | 목록 세부정보 내부의 섹션 제목('이 장소에서 제공하는 서비스') |

| _`` | 20픽셀 | 600 | 1.20 | -0.18px | 하위 섹션 제목('알아야 할 사항') |

| _`` | 16px | 600 | 1.25 | 0 | 도시 링크 블록 제목("Wilmington", "Athens") |

| _`` | 16px | 500 | 1.25 | 0 | 바닥글 열 머리글("지원", "호스팅", "에어비앤비") |

| _`` | 16px | 400 | 1.5 | 0 | 목록 사본 내부의 기본 실행 텍스트 |

| _`` | 14px | 400 | 1.43 | 0 | 카드 메타 라인, 날짜, 가격, 거리 텍스트 |

| _`` | 14px | 500 | 1.29 | 0 | 검색 필드 세그먼트 라벨("어디", "언제", "누구") |

| _`` | 13px | 400 | 1.23 | 0 | 바닥글 법률 조항('© 2026 Airbnb, Inc.') |

| _`` | 11px | 600 | 1.18 | 0 | "게스트가 가장 좋아하는" 플로팅 배지 텍스트 |

| _`` | 12px | 700 | 1.33 | 0 | 카드 편의용품 마이크로 라벨("인라인 6") |

| _`` | 8픽셀 | 700 | 1.25 | 0.32px(대문자) | 제품 탐색 탭의 "NEW" 배지 |

| _`` | 16px | 500 | 1.25 | 0 | 기본 CTA 버튼 라벨 |

| _`` | 14px | 500 | 1.29 | 0 | 알약 버튼 라벨(카테고리 스트립) |

| _`` | 14px | 400 | 1.43 | 0 | 인라인 본문 링크 |

| _`` | 16px | 600 | 1.25 | 0 | 상위 제품 탐색 라벨(홈, 경험, 서비스) |

원칙

디스플레이 가중치는 적당하게 유지됩니다. 28px/700의 홈페이지 h1은 의도적으로 작습니다. 검색 창 아래에 들어가므로 사진과 도시 링크 그리드가 시각적 계층 구조를 갖습니다. 22px/500의 목록 세부정보 h1은 훨씬 더 조용합니다. 위의 작업은 목록 사진 배너가 수행합니다.

전체 시스템에서 인쇄상으로 큰 소리가 나는 순간은 목록 페이지의 **등급 표시**(`` — 64px / 700)입니다. 이는 시스템이 계층 구조를 전달하기 위해 유형만을 신뢰하는 유일한 장소입니다. 등급 수치는 최고 신뢰 신호이므로 가장 큰 대우를 받습니다.

글꼴 대체에 대한 참고사항

Airbnb Cereal VF 및 Circular를 사용할 수 없는 경우 **Inter**가 가장 가까운 오픈 소스 대체물입니다. Cereal의 약간 더 좁은 캡 높이와 일치하도록 디스플레이 헤드라인을 줄 높이에서 ~2%까지 조정합니다. 그렇지 않으면 비율이 깔끔하게 전달됩니다.

레이아웃

간격 시스템

• **기본 단위:** 4px(2px 마이크로 스텝 포함).
• **토큰:** `` 2px · `` 4px · `` 8px · `` 12px · `` 16px · `` 24px · `` 32px · `` 48px · `` 64px.
• **섹션 패딩(세로):** 주요 페이지 밴드의 경우 ``(64px); 마켓플레이스 페이지에는 스크롤당 더 높은 카드 밀도가 필요하기 때문에 일반적인 SaaS 마케팅(80~96px)보다 엄격합니다.
• **카드 내부 패딩:** `` 및 ``의 경우 ``(24px); 속성 카드 메타 블록의 경우 _``(16px); 캡션/날짜 행 여백용 ``(8px).
• **홈통:** ``(16px) 홈페이지 도시 그리드의 카드 사이; ``(24px) 바닥글 열 거터 내부; ``(4px) 조밀한 카테고리 스트립 구분선.

그리드 및 컨테이너

• **최대 콘텐츠 너비:** 홈페이지 및 편집 페이지 중심으로 ~1280px. 사진 배너와 예약 창을 쉽게 읽을 수 있도록 목록 세부 정보 페이지의 최대 크기는 1080픽셀에 가까워졌습니다.
• **도시 링크 그리드(홈페이지 바닥글):** 각 셀에 ``에 도시 이름이 있고 ``에 카테고리 하위 라벨이 포함되어 있는 데스크톱의 6열 그리드입니다.
• **숙소 세부정보:** 왼쪽(~64% 너비)에 사진/편의시설 본체가 있는 2열, 오른쪽(~32%)에 고정 예약 카드(``)가 있습니다.
• **바닥글:** 데스크톱의 3열 링크 목록(지원/호스팅/에어비앤비), 모바일에서는 1열로 축소됩니다.

공백 철학

시스템은 편집 밴드에 64px의 수직 호흡 공간을 제공하지만 카드 그리드를 압축합니다. 즉, 부동산과 시티 링크 카드의 간격은 16px에 불과합니다. 대조는 의도적인 것입니다. 페이지는 "열린 영웅, 아래 밀집된 시장"으로 읽혀 방문자를 압도하지 않고 시장 특성을 강화합니다.

고도

시스템에는 기본적으로 **하나의 섀도우 계층**과 평면 기준선이 있습니다.

• **플랫(그림자 없음):** 본문, 영웅, 바닥글, 모든 편집 밴드 — 표면의 95%.
• **카드 가리키기 부동:** `box-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` — 포인터 가리키기 시 속성 카드, 정지된 검색 창 및 드롭다운 메뉴(계정 메뉴, 언어 선택기, 날짜 선택기)에 적용됩니다. 이는 전체 시스템의 단일 그림자 정의입니다.
• **모달 스크림:** `` 50% 불투명도로 렌더링 — 전역 모달 배경입니다. 날짜 선택기, 로그인 대화상자, 언어 선택기에 사용됩니다.

점진적인 상승 계층은 없습니다. 시스템에 그림자가 하나 있거나 전혀 없습니다. 깊이는 겹쳐진 그림자보다는 사진, 흰색-흰색 표면 분리, 둥근 모서리 클리핑에서 비롯됩니다.

구성요소

버튼

**`button-primary`** — Rausch 채우기, 흰색 텍스트, 8px 반경, 14×24px 패딩, 48px 높이, 무게 500. 시스템 전체에서 가장 일반적인 CTA: "예약", "계속", "검색", 계정 흐름 기본.

**`button-primary-active`** — 프레스 상태. 배경이 ``으로 반전됩니다. 변환 없음, 그림자 변경 없음.

**`button-primary-disabled`** — #ffd1da의 창백한 Rausch 색조와 흰색 텍스트. 커서가 허용되지 않습니다.

**`button-secondary`** — 잉크 텍스트와 1px 잉크 윤곽선으로 흰색 채우기. 8px 반경. Rausch 표면에 대한 '저장', '취소' 및 역CTA에 사용됩니다.

**`button-tertiary-text`** — 일반 잉크 텍스트, 표면 없음, 테두리 없음. 마우스를 올리면 밑줄이 그어집니다. "더 보기" 유형 링크 및 모달 닫기 레이블에 사용됩니다.

**`button-pill-rausch`** — 추천 셀에 사용되는 알약 모양의 Rausch CTA(예: "호스트 되기" 하위 CTA) — 9999픽셀 반경, 10×20픽셀 패딩, 14픽셀 라벨.

검색 표면

_**`search-bar-pill`** — 시그니처 글로벌 검색 창입니다. 흰색 채우기, 반경 9999px, 높이 64px, 가는선 1px, 그림자 테두리 1px. 내부적으로 수직 가는 선 규칙에 의해 `` 셀(어디/언제/누가)로 구분됩니다. 각 세그먼트에는 ``.

의 자리 표시자 줄 위에 대문자 캡션 레이블이 있습니다.

**`search-orb`** — 검색 창의 오른쪽 가장자리를 끝내는 원형 Rausch 구입니다. 48×48px, 완전히 둥근 모양, 중앙에 흰색 돋보기 아이콘. 홈페이지에서 가장 핫한 단색의 순간.

상단 탐색

**`top-nav`** — 흰색 표면, 높이 80px, 하단 가는선 1px. 에어비앤비 워드마크는 왼쪽 높이에 있고, 세 가지 제품 탭(홈/체험/서비스)은 중앙에 있으며, 계정 유틸리티(호스트 링크, 언어 지구본, 계정 메뉴)는 오른쪽 높이에 있습니다.

**`product-tab-active`** — ``의 잉크 라벨, 32px 손으로 그린 아이콘, 아이콘 라벨 쌍 아래에 2px 잉크 밑줄 규칙.

**`product-tab-inactive`** — 음소거된 라벨, 그림 아이콘, 밑줄 없음. 클릭 시 활성화됩니다.

**`new-tag`** — 작은 둥근 알약 배지(``)가 아이콘 오른쪽 상단에 고정되어 있으며 ``(8px/700, 0.32px 추적, 대문자)에 대문자 "NEW" 레이블이 있습니다. 최신성을 알리기 위해 경험 및 서비스에 사용됩니다.

목록 카드

**`property-card`** — 사진 우선 카드입니다. `` 모서리 자르기, 이미지 캐러셀 도트 오버레이, 왼쪽 상단에 "게스트 즐겨찾기" 부동 배지(``) 및 오른쪽 상단에 하트 아이콘(기본 윤곽선 상태에서는 ``, 저장 시 Rausch로 채워짐)이 포함된 1:1 종횡비 이미지. 이미지 아래: 4~5줄의 메타 — 제목(``), 거리/날짜(`` 음소거), 가격("$X박") 오른쪽 정렬

_**`property-card-photo`** — 일부 표면(위시리스트, 검색 결과)은 메타 블록 없이 사진만 재사용하기 때문에 토큰으로 분리된 사진 플레이트 자체입니다.

**`experience-card`** — 경험 목록을 위한 더 큰 가로 세로 비율의 카드(4:5)입니다. 동일한 _`` 클리핑, 왼쪽 위 부동 "NEW" 배지, 오른쪽 위 하트 및 아래에 한 줄 제목.

_**`guest-favorite-badge`** — 11px/600 무게의 흰색 둥근 알약(``). 시스템의 유일한 그림자 계층이 고도에 적용된 사진 위에 위치합니다.

목록 세부정보

**`rating-display-card`** — 서명 목록 세부 사항 순간입니다. 64px/700 등급 번호("4.81")가 왼쪽과 오른쪽에 작은 월계관 SVG 장식으로 표시되어 있습니다. 평가 아래: "게스트 즐겨찾기" 태그라인과 일련의 잉크 통계 열. 전체 시스템에서 가장 큰 활자체 두께입니다.

_**`amenity-row`** — ``의 편의 시설 아이콘 + 잉크 라벨이 포함된 1열 목록입니다. 12px 행 패딩, 행 사이에 테두리 없음; 섹션은 위와 아래에 1픽셀의 가는 선 구분선으로 닫혀 있습니다.

**`reviews-card`** — 리뷰 발췌 내용을 담은 2열 그리드입니다. 각 열에는 "더 보기" 3차 링크가 포함된 3줄 발췌문 위에 작성자 행(아바타, 이름, 날짜)이 있습니다.

**`host-card`** — 호스트 아바타, 이름, "슈퍼호스트" 배지, 응답률 통계 및 "연락처 호스트"가 포함된 `` 반올림 및 24px 패딩이 포함된 흰색 카드 ``.

**`reservation-card`** — 목록 세부정보 페이지의 고정 오른쪽 레일 카드입니다. 흰색 표면, `` 반올림, 1px 가는선 테두리, 1px 그림자 계층 고도, 24px 패딩. 포함 내용: 1박 요금(`` 잉크), 날짜 범위 선택기, 게스트 수 스테퍼, "예약" 기본 CTA 전체 너비 및 ``의 수수료 내역 스택 아래.

날짜 선택기

_**`date-picker-day`** — ``의 날짜 번호를 포함하는 40×40px 원형 셀입니다. 기본 상태는 투명 채우기, 잉크 텍스트입니다.

_**`date-picker-day-selected`** — 잉크 채우기, 흰색 텍스트, 완전한 원(``). 선택한 두 날짜 사이의 범위 상태에는 두 날짜를 연결하는 `` 마름모꼴 배경이 있습니다.

양식

_**`text-input`** — 흰색 표면, 1px 가는선 윤곽선, `` 8px 반경, 56px 높이, 14×12px 패딩. 위의 스택 라벨(`` 음소거), ``의 자리 표시자 텍스트가 음소거되었습니다. 초점이 맞춰지면 테두리가 2px 잉크로 두꺼워지고 테두리 색상이 ``으로 반전됩니다. 광선도 없고 링도 없습니다.

바닥글

_**`footer-light`** — 흰색 표면(페이지 캔버스와 일치 — Airbnb에는 대조 바닥글이 없음), 48×80px 패딩. 3개의 링크 블록 열(지원/호스팅/에어비앤비)은 넉넉한 24px 여백으로 구분됩니다. 각 열은 `` 잉크 레이블로 시작하고 `` 잉크에 `` 행을 쌓습니다.

_**`legal-band`** — 저작권 줄, 언어 선택기(지구본 아이콘 + "영어(미국)" 링크), 통화 선택기 및 소셜 아이콘(Facebook, X, Instagram)이 포함된 바닥글 열 아래의 하단 스트립입니다. ``.

에서 음소거된 ``의 모든 텍스트

반응적 행동

| 이름 | 폭 | 주요 변경 사항 |

|---|---|---|

| 모바일 | _< 744px | Top nav collapses to logo + hamburger; product tabs hide behind a sheet; search bar collapses to a single tappable pill; property cards stack 1-up; city grid 1-column; listing detail collapses reservation card to a sticky bottom bar. |

| 태블릿 | 744~1128px | 상단 탐색은 제품 탭을 유지하지만 검색 창은 좁아집니다. 속성 카드 2개; 도시 그리드 2-3 열; 예약 카드는 더 좁은 너비의 오른쪽 레일에 고정되어 있습니다. |_

| 데스크탑 | 1128~1440px | 중앙에 3개의 제품 탭이 있는 전체 상단 탐색 기능. 3개의 세그먼트가 모두 표시되는 전체 알약 너비의 검색 창; 속성 카드 4개; 도시 그리드 6열; 예약 레일이 포함된 세부정보 2열 목록입니다. |

| 와이드 | > 1440px | 콘텐츠 너비는 목록/검색 페이지에서 1440px, 편집 페이지에서 최대 1280px로 제한됩니다. 홈통은 나머지를 흡수합니다. |_

터치 대상

• 기본 CTA는 최소 48×48픽셀(WCAG AAA 이상)입니다.
• 검색 구는 48×48픽셀의 원형으로, 페이지에서 가장 많이 탭된 요소입니다.
• 하트 저장 버튼은 32×32픽셀 원형입니다. AAA의 경계선이지만 포토 카드 내부의 넉넉한 12픽셀 패딩으로 보완됩니다.
• 날짜 선택기 날짜 셀은 40×40픽셀 원형입니다.

축소 전략

• 상위 제품 탭은 744픽셀 아래의 햄버거 시트로 축소됩니다.
• 검색창의 3개 세그먼트는 모바일에서 전체 화면 검색 오버레이를 여는 단일 탭 항목으로 축소됩니다.
• 속성 및 도시 링크 그리드는 각 중단점에서 열 수를 깔끔하게 삭제합니다. 행을 리플로우하지 않습니다. 항상 열을 줄이세요.
• 목록 세부정보의 예약 카드는 고정 오른쪽 레일에서 모바일의 고정 하단 표시줄로 전환되며 "예약" CTA + 1박 요금 요약만 포함됩니다.

알려진 격차

• **호버 상태 색상:** 전역 호버 금지 정책에 따라 의도적으로 문서화되지 않았습니다. — 숙소 카드에 대한 Airbnb의 실제 `:hover` 스타일은 미묘한 고도 상승이지만 정확한 추출은 신뢰할 수 없습니다.
• **로드 상태/스켈레톤 화면:** 추출된 표면에는 표시되지 않습니다.
• **지도 보기 스타일:** 검색 결과 지도는 맞춤 Rausch 마커와 함께 Mapbox 색상 타일을 사용합니다. 여기에는 캡처되지 않았습니다.
• **양식 입력 오류 상태:** 오류 텍스트 색상(``)이 문서화되어 있지만 유효성 검사 실패 시 전체 입력 개요 + 도우미 텍스트 조합이 캡처된 표면에 표시되지 않았습니다.
• **하위 브랜드 팔레트:** Luxe(``) 및 Plus(``)는 토큰으로 문서화되어 있지만 전체 하위 시스템(타이포그래피 재정의, 표면 처리)은 별도의 하위 도메인에 있으며 여기에 캡처되지 않습니다.

概要

Airbnb は、写真主導の寛大な消費者マーケットプレイスの典型的な例です。ベース キャンバスは **純白** (`` — #ffffff) で、見出しと本文には濃い黒に近いインク (`` — #222222) が使用され、すべてのプライマリ CTA を運ぶ **Rausch** (`` — #ff385c) の単一電圧が使用されます。検索ボタンのオーブ、ハートの保存状態、インライン ブランド リンク。メインラインのマーケティングには二次的なブランドカラーはありません。**Luxe パープル** (`` — #460479) および **Plus magenta** (`` — #92174d) トークンは、Airbnb Luxe / Plus コンテキスト内でのみ表示されるサブブランドのアクセントです。

Type は **Airbnb Cereal VF** (Airbnb のカスタム可変フォント ライセンス) を実行し、**Circular** を歴史的な社内フォールバックとして使用し、その下にシステム スタックを置きます。シリアルのウェイトは控えめです。ディスプレイの見出しは、金融システムやエンタープライズ システムが依存する 700 以上の重いウェイトではなく、ウェイト 500 ～ 600 の 22 ～ 28 ピクセルでレンダリングされます。ホームページ上のヒーロー h1 (「将来の休暇へのインスピレーション」) はわずか 28 ピクセル / 700 で、一般的な SaaS ページでは小さく感じるでしょう。ここでうまく機能するのは、レイアウトがタイポグラフィーの要素ではなく、視覚的な重みとして写真 (都市のコラージュ、プロパティ カード) に依存しているためです。

_図形言語は**ソフト**です。ボタンの半径は 8 ピクセル (``)、プロパティ カードは約 14 ピクセル (``)、検索バーは完全な丸薬の形 (``)、ウィッシュリストのハートと検索オーブは円 (``)、カテゴリ ストリップの丸い角は 32 ピクセルです。 (``)。ボディ グリッド自体以外には基本的にハード コーナーはありません。すべてのインタラクティブな要素は丸みを帯びています。

**主な特徴:**

• 単一のアクセント カラー: `` (#ff385c — "Rausch") には、すべてのプライマリ CTA、検索オーブ、ハート保存状態、およびブランド ワードマークが含まれます。ほとんど使用されていません - ほとんどのページは 90% 白 + インクで、ラウシュ モーメントが 1 つまたは 2 つあります。
• カスタム変数タイプ: `Airbnb Cereal VF`。ディスプレイのウェイトは 500 ～ 700、本体のウェイトは 400 です。適度なウェイトは意図的です。システムは視覚的な重さに関して写真を信頼しています。
• 3 製品のトップ ナビゲーション: ホーム、エクスペリエンス、サービス — それぞれ、2 つの新しい製品に手書きの 32 ピクセルのアイコンと「NEW」バッジ (``) が付いています。アクティブなタブでは下線ルール (``) が使用されています。
• 錠剤型のグローバル検索バー: 白い表面、完全に丸い (``)、1 ピクセルのヘアラインでどこ/いつ/誰のセグメントに分割され、円形の Rausch 検索オーブ (``) で終了します。
• プロパティ カードは写真優先です。__CODEBCK_483___ コーナー クリッピングを備えたアスペクト比の長方形、スワイプ可能な画像カルーセル、左上に「ゲストのお気に入り」フローティング バッジ、右上にハート アイコン、その下に 4 ～ 5 行のメタがあります。
• 編集ドロップダウン (フッター、言語ピッカー) は、白いキャンバス上のクリーンなテキスト列です。カード表面や影はありません。
• デザイン システムは、1 つのシャドウ層 (`box-shadow: rgba(0,0,0,0.02) 0 0 0 1px, rgba(0,0,0,0.04) 0 2px 6px, rgba(0,0,0,0.1) 0 4px 8px`) で高度を制限します。これは、ホバーフローティング カードおよび検索/アカウント ドロップダウンで使用されます。
• 8px の基本スペース システム、主なセクションは `` (64px) です。ゆったりしていますが、雑誌編集者であると感じるほど風通しが良いわけではありません。マーケットプレイスの密度が高いため、スクロールあたりにより多くのカードが必要です。

色

ブランドとアクセント_

• **Rausch** (`` — #ff385c): ブランドの単一カラー。 プライマリ CTA 背景 (予約、続行)、検索オーブ、プロパティ カードのハート保存状態、およびインライン ブランド リンクに使用されます。消費者の旅行において最も認識されやすい色。
• **Rausch Active** (`` — #e00b41): プレス/ポインターダウンのバリアント — わずかに飽和度が高くなります。 ``.
で使用されます
• **Rausch 無効** (`` — #ffd1da): 無効な CTA で使用される淡い色合い。
• **Luxe Purple** (`` — #460479): Airbnb Luxe のサブブランド アクセント。 Luxe ブランドの表面内にのみ表示され、メインラインのマーケティングには決して表示されません。
• **Plus Magenta** (`` — #92174d): Airbnb Plus のサブブランド アクセント。 Luxe と同じ範囲 — サブ製品のみ。

サーフェス

• **キャンバス** (`` — #ffffff): すべてのパブリック ページのデフォルトのページ フロア。 Airbnb には公開ウェブ上でダークモードがありません。
• **Surface Soft** (`` — #f7f7f7): 最も明るい塗りつぶし — 無効なフィールド、サブナビゲーション ホバーの背景、およびインライン検索フィルター バンドで使用されます。
• **表面が強い** (`` — #f2f2f2): 塗りつぶしが少し重い — 円形のアイコン ボタンの表面 (パンくずリストの戻る矢印やリスト ツールバー ボタンなど)。

ヘアラインと境界線

• **ヘアライン** (`` — #dddddd): デフォルトの 1 ピクセルの境界線 — 検索バーの区切り線、テーブルの区切り線、フッター列の分割線、カードの 1 ピクセルの境界線。
• **ヘアライン ソフト** (`` — #ebebeb): 長いスクロールの編集本文セパレーターで使用される軽量のディバイダー。
• **強い境界線** (`` — #c1c1c1): フォーカス後の無効なアウトライン ボタンとフォーム入力アウトラインに使用される重いストローク。

テキスト

• **インク** (`` — #222222): ライト サーフェス上の主要なテキストの色。見出し、本文段落、主要なナビゲーション リンク、およびほとんどのインライン リンク テキストを表示します。決して純粋な黒ではありません。
• **本文** (`` — #3f3f3f): インクが重すぎると感じられる長文レビューおよびアメニティ コピー内で使用される二次的な実行テキストの色。
• **ミュート** (`` — #6a6a6a): 都市リンク ブロック内のサブタイトル (「コテージ レンタル」、「ヴィラ レンタル」)、非アクティブな商品タブ ラベル、フッター カテゴリ サブラベル、「すべて表示」リンク。
• **ミュートソフト** (`` — #929292): リンクテキストが無効になりました。非常に控えめに使用されます。
• **星評価** (`` — #222222): 同じインクトークン — Airbnb の星アイコンと「4.81」の評価数値はすべて、黄色/金色ではなくインクで表示されます。これはブランドの意図的な選択です (黄色の星は旅行の文脈では安っぽく感じられます)。
• **プライマリ上** (`` — #ffffff): Rausch CTA の白いテキスト。

セマンティック

• **エラー** (`` — #c13515): フォーム検証のインライン エラー テキスト。ラウシュとは異なります - わずかに暗く、より飽和した赤です。
• **ホバーエラー** (`` — #b32505): リンクにホバーすると暗くなります。
• **法的リンク ブルー** (`` — #428bff): 法的コピー内のインライン リンク (プライバシー、規約)。 法的なサブバンド内でのみ使用されます。

スクリム

• _**Scrim** (`` — #000000、不透明度 50%): グローバル モーダル背景トーン — 日付ピッカー、ログイン ダイアログ、言語ピッカー。基本ヘクスとして保存されます。不透明度はレンダリング時に適用されます。

タイポグラフィ

フォント ファミリー

システムは、表示、本文、ナビゲーション、キャプション、マイクロコピーなど、すべてにおいて **Airbnb Cereal VF** を実行します。フォールバックは__CODEBCK_508___を歩きます。 **Circular** は、最初の非可変フォールバックとして今も保持されている歴史的な社内書体です。システム スタックがそれをバックアップします。

個別の表示ファミリーはありません。可変フォントにはスケール全体が含まれます。

階層_

|トークン |サイズ |重量 |行の高さ |文字間隔 | |

を使用します

|---|---|---|---|---|---|

| `` | 64ピクセル | 700 | 1.1 | -1ピクセル |リスティング詳細評価表示 (「4.81」) |

| `` | 28ピクセル | 700 | 1.43 | 0 |ホームページ h1 (「将来の休暇のためのインスピレーション」) |

| `` | 22ピクセル | 500 | 1.18 | -0.44ピクセル |リスティング詳細 h1 (「フェティエ アリヤ バリ ビーチに近い…」) |

| `` | 21ピクセル | 700 | 1.43 | 0 |リスト詳細内のセクション見出し (「この場所が提供するもの」) |

| `` | 20ピクセル | 600 | 1.20 | -0.18ピクセル |サブセクションのタイトル (「知っておくべきこと」) |

| `` | 16ピクセル | 600 | 1.25 | 0 |シティ リンク ブロックのタイトル (「ウィルミントン」、「アテネ」) |

| `` | 16ピクセル | 500 | 1.25 | 0 |フッター列の見出し (「サポート」、「ホスティング」、「Airbnb」) |

| `` | 16ピクセル | 400 | 1.5 | 0 |リストのコピー内のデフォルトの実行テキスト |

| `` | 14ピクセル | 400 | 1.43 | 0 |カードのメタ行、日付、価格、距離テキスト |

| `` | 14ピクセル | 500 | 1.29 | 0 |検索フィールド セグメント ラベル (「どこで」、「いつ」、「誰が」) |

| `` | 13ピクセル | 400 | 1.23 | 0 |フッターの法的境界線 (「© 2026 Airbnb, Inc.」) |

| `` | 11ピクセル | 600 | 1.18 | 0 | 「ゲストのお気に入り」フローティング バッジ テキスト |

| `` | 12ピクセル | 700 | 1.33 | 0 |カード アメニティ マイクロラベル (「インライン 6」) |

| `` | 8ピクセル | 700 | 1.25 | 0.32px (大文字) |製品ナビゲーション タブの「NEW」バッジ |

| `` | 16ピクセル | 500 | 1.25 | 0 |プライマリ CTA ボタンのラベル |

| `` | 14ピクセル | 500 | 1.29 | 0 |ピル ボタンのラベル (カテゴリ ストリップ) |

| `` | 14ピクセル | 400 | 1.43 | 0 |インライン本文リンク |

| `` | 16ピクセル | 600 | 1.25 | 0 |トップのプロダクト ナビゲーション ラベル (住宅、エクスペリエンス、サービス) |

原則

表示ウェイトは控えめなままです。ホームページの h1 は 28 ピクセル / 700 で、意図的に小さくなっています。検索バーの下に隠れているため、写真と都市リンク グリッドが視覚的な階層を伝えます。 22px / 500 の listing-detail h1 はさらに静かです。リスティング写真バナーはその上で機能します。

システム全体の中で唯一誤字が目立つ瞬間は、リスト ページの **評価表示** (`` — 64px / 700) です。 これは、システムが階層を維持するためにタイプのみを信頼する唯一の場所です。評価数値は信頼のピーク信号であるため、最も大声で扱われます。

フォントの代替に関する注意

Airbnb Cereal VF と Circular が利用できない場合は、**Inter** が最も近いオープンソースの代替品となります。 Cereal のわずかにタイトなキャップの高さに合わせて、表示見出しの行の高さを最大 2% 低く調整します。それ以外の場合は、比率がきれいに転送されます。

レイアウト

間隔システム

• **基本単位:** 4 ピクセル (2 ピクセルのマイクロステップ付き)。
• **トークン:** `` 2px · `` 4px · `` 8px · `` 12px · `` 16px · `` 24px · `` 32px · `` 48px · `` 64px.
• **セクション パディング (垂直):** 主要なページ バンドの場合は `` (64 ピクセル)。マーケットプレイスのページはスクロールごとに高いカード密度が必要なため、一般的な SaaS マーケティング (80 ～ 96 ピクセル) よりも狭いです。
• **カードの内部パディング:** `` および `` の場合は `` (24 ピクセル)。 `` (16px) プロパティカードメタブロック用。 `` (8px) キャプション/日付行の余白用。
• **余白:** `` (16 ピクセル) ホームページの都市グリッドのカード間。 `` (24px) フッター列の余白内。 `` (4px) 高密度カテゴリストリップ分割線。

グリッドとコンテナ

• **コンテンツの最大幅:** ホームページと編集ページを中心に ~1280 ピクセル。写真バナーと予約レールを読みやすくするために、リストの詳細ページの上限は 1080 ピクセルに近くなります。
• **シティ リンク グリッド (ホームページ フッター):** デスクトップの 6 列グリッド。各セルには__CODEBCK_546___ に都市名が、__CODEBCK_547___ にはカテゴリ サブラベルが含まれます。
• **リスティングの詳細:** 2 列で、左側に写真/アメニティの本文 (幅約 64%)、右側 (約 32%) に粘着性の予約カード (``) が表示されます。
• **フッター:** デスクトップでは 3 列のリンク リスト (サポート / ホスティング / Airbnb)、モバイルでは 1 列に折りたたまれます。

ホワイトスペースの哲学

このシステムは編集バンドに垂直方向の 64 ピクセルのスペースを与えますが、カード グリッドは圧縮されます。プロパティ カードと都市リンク カードはわずか 16 ピクセル離れて配置されます。このコントラストは意図的なものです。ページには「オープンなヒーロー、その下に密集したマーケットプレイス」と表示されており、フォールドの訪問者を圧倒することなくマーケットプレイスの性質を強化しています。

標高

_システムには基本的に **1 つのシャドウ層** とフラット ベースラインがあります。

• **フラット (影なし):** 本文、ヒーロー、フッター、すべての編集バンド — 表面の 95%。
• **カード ホバー フロート:** `box-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` - ポインター ホバー時のプロパティ カード、静止時の検索バー、およびドロップダウン メニュー (アカウント メニュー、言語ピッカー、日付ピッカー) に適用されます。これは、システム全体における単一のシャドウ定義です。
• **モーダル スクリム:** `` は 50% の不透明度でレンダリングされます — グローバル モーダル背景。日付ピッカー、ログイン ダイアログ、言語ピッカーで使用されます。

_段階的な昇格階層はありません。システムには 1 つのシャドウがあるか、まったく存在しません。 奥行きは、重ねられた影ではなく、写真、白地に白の表面の分離、丸い角のクリッピングから生まれます。

コンポーネント

ボタン

**`button-primary`** — ラウシュ塗りつぶし、白いテキスト、半径 8 ピクセル、パディング 14×24 ピクセル、高さ 48 ピクセル、重さ 500。システム全体で最も一般的な CTA: 「予約」、「続行」、「検索」、アカウント フローのプライマリ。

**`button-primary-active`** — プレス状態。背景が__CODEBCK_553___に切り替わります。変換も影の変更もありません。

_**`button-primary-disabled`** — #ffd1da の淡いラウシュ色と白いテキスト。カーソルは使用できません。

**`button-secondary`** — インク テキストと 1 ピクセルのインク アウトラインで白を塗りつぶします。半径8ピクセル。 「保存」、「キャンセル」、および Rausch サーフェス上の逆 CTA に使用されます。

**`button-tertiary-text`** — プレーン インク テキスト、表面、境界線なし。ホバーすると下線が付きます。 「もっと見る」タイプのリンクとモーダル終了ラベルに使用されます。

**`button-pill-rausch`** — 注目のセルで使用される錠剤型の Rausch CTA (例: 「ホストになる」サブ CTA) — 半径 9999 ピクセル、パディング 10×20 ピクセル、ラベル 14 ピクセル

検索画面

**`search-bar-pill`** — 特徴的なグローバル検索バー。白い塗りつぶし、半径 9999 ピクセル、高さ 64 ピクセル、ヘアライン 1 ピクセル、影の境界線 1 ピクセル。内部的には垂直ヘアライン ルールによって `` セルに分割されます (どこで / いつ / 誰が)。各セグメントには、__CODEBCK_560___.

のプレースホルダー行の上に大文字のキャプション ラベルが保持されます。

**`search-orb`** — 検索バーの右端で終わる円形のラウシュ オーブ。 48×48 ピクセル、完全に丸い、白い虫眼鏡アイコンが中央にあります。ホームページ上で最もホットな単色の瞬間。

トップナビゲーション_

_**`top-nav`** — 白い表面、高さ 80 ピクセル、下部のヘアライン 1 ピクセル。 Airbnb のワードマークは左端に配置され、3 つの製品タブ (ホーム / エクスペリエンス / サービス) は中央に配置され、アカウント ユーティリティ (ホスト リンク、言語グローブ、アカウント メニュー) は右端に配置されています。

_**`product-tab-active`** — `` のインク ラベル、32 ピクセルの手描きアイコン、アイコンとラベルのペアの下に 2 ピクセルのインク下線ルール。

**`product-tab-inactive`** — ミュートされたラベル、イラスト付きアイコン、下線なし。クリックするとアクティブになります。

**`new-tag`** — 小さな丸い錠剤バッジ (``) がアイコンの右上に固定されており、__CODEBCK_568___ (8 ピクセル / 700、0.32 ピクセルのトラッキング、大文字) で大文字の「NEW」ラベルが付いています。最新性を知らせるためにエクスペリエンスとサービスで使用されます。

リストカード

_**`property-card`** — 写真優先のカード。 `` コーナー クリッピング、画像カルーセル ドット オーバーレイ、左上に「ゲストのお気に入り」フローティング バッジ (``)、右上にハート アイコン (デフォルトのアウトライン状態では``、保存時にラウシュで塗りつぶされる) を備えたアスペクト比 1:1 の画像。画像の下: 4 ～ 5 行のメタ — タイトル (``)、距離/日付 (`` ミュート)、および価格 (「$X 泊」) が右揃えです。

**`property-card-photo`** — 一部のサーフェス (ウィッシュリスト、検索結果) はメタ ブロックなしで写真のみを再利用するため、写真プレート自体はトークンとして分離されます。

_**`experience-card`** — エクスペリエンス リスト用の縦長のカード (4:5)。同じ `` のクリッピング、左上にフローティング「NEW」バッジ、右上にハート、その下に 1 行のタイトル。

**`guest-favorite-badge`** — 11px / 600 ウェイトの白い丸い錠剤 (``)。 システムの唯一のシャドウ層を高度に適用して写真の上に配置します。

リストの詳細

**`rating-display-card`** — 署名リストの詳細の瞬間。 64 ピクセル / 700 の評価番号 (「4.81」) の左右には、小さな月桂冠の SVG 装飾が配置されています。評価の下: 「ゲストのお気に入り」というキャッチフレーズとインク統計列の行。システム全体で最大のタイポグラフィック ウェイト。

_**`amenity-row`** — `` のアメニティ アイコンとインク ラベルの 1 列のリスト。 12 ピクセルの行パディング、行間の境界線なし。セクションは上下 1 ピクセルのヘアラインの区切り線で閉じられています。

**`reviews-card`** — レビューの抜粋の 2 列グリッド。各列には、「もっと見る」の 3 番目のリンクを含む 3 行の抜粋の上に作成者の行 (アバター、名前、日付) が含まれています。

**`host-card`** — `` の四捨五入と 24 ピクセルのパディングを備えた白いカードには、ホストのアバター、名前、「スーパーホスト」バッジ、応答率統計、および「ホストへの連絡」が含まれています ``.

_**`reservation-card`** — リスト詳細ページの右側のレールに貼り付けられたカード。白いサーフェス、__CODEBCK_588___ の丸め、1 ピクセルのヘアライン境界、1 ピクセルのシャドウ層の標高、24 ピクセルのパディング。内容: 1 泊あたりの料金 (`` インク)、日付範囲セレクター、ゲスト数ステッパー、全幅の「予約」プライマリ CTA、__CODEBCK_590___.

の下にある料金内訳スタック

日付ピッカー

**`date-picker-day`** — `` の日番号を含む 40×40 ピクセルの円形セル。デフォルトの状態は透明な塗りつぶし、インク テキストです。

_**`date-picker-day-selected`** — インク塗りつぶし、白いテキスト、完全な円 (``)。選択した 2 日の間の範囲の状態には、それらを接続する__CODEBCK_595___ 菱形の背景が表示されます。

フォーム

**`text-input`** — 白いサーフェス、ヘアライン アウトライン 1 ピクセル、__CODEBCK_597___ 半径 8 ピクセル、高さ 56 ピクセル、パディング 14×12 ピクセル。上に積み重ねられたラベル (__CODEBCK_598___ でミュート)、__CODEBCK_599___ のプレースホルダー テキストはミュートされています。フォーカスが当たると、境界線が 2 ピクセルのインクに太くなり、境界線の色が `` に変わります。グローもリングもありません。

フッター

_**`footer-light`** — 白い表面 (ページのキャンバスと一致 — Airbnb にはコントラスト フッターがありません)、48 × 80 ピクセルのパディング。 24 ピクセルのたっぷりとした余白で区切られた 3 列のリンク ブロック (サポート / ホスティング / Airbnb)。各列の先頭には `` インク ラベルが付けられ、__CODEBCK_603___ 行が `` インクでスタックされます。

**`legal-band`** — 著作権行、言語ピッカー (地球アイコン + 「英語 (米国)」リンク)、通貨ピッカー、およびソーシャル アイコン (Facebook、X、Instagram) を含むフッター列の下の下部ストリップ。 ``.

でミュートされた `` 内のすべてのテキスト

応答動作

|名前 |幅 |主な変更点 |

|---|---|---|

|モバイル | < 744px | Top nav collapses to logo + hamburger; product tabs hide behind a sheet; search bar collapses to a single tappable pill; property cards stack 1-up; city grid 1-column; listing detail collapses reservation card to a sticky bottom bar. |

|タブレット | 744–1128ピクセル |トップナビゲーションには製品タブが表示されますが、検索バーは狭くなります。プロパティカード 2 アップ。都市グリッド 2 ～ 3 列。予約カードは幅が狭くても右レールに粘着したままになります。 |

|デスクトップ | 1128–1440ピクセル | 3 つの製品タブが中央に配置されたフルトップ ナビゲーション。検索バーは丸薬の全幅で、3 つのセグメントすべてが表示されます。プロパティカード 4 アップ。都市グリッド 6 列。リスト詳細 2 列、予約レール付き。 |

|ワイド | > 1440ピクセル |コンテンツの幅の上限は、リスト/検索ページでは 1440 ピクセル、エディトリアルでは最大 1280 ピクセルです。側溝が残りを吸収します。 |

タッチターゲット

• 最低 48×48 ピクセルのプライマリ CTA (WCAG AAA 以上)。
• 検索オーブは 48×48 ピクセルの円形で、ページ上で最もタップされた要素です。
• ハート保存ボタンは 32×32 ピクセルの円形で、AAA の境界線ですが、写真カード内のたっぷり 12 ピクセルのパディングで補われています。
• 日付ピッカーの日のセルは 40×40 ピクセルの円形です。

戦略の崩壊

• 上位の商品タブは、744 ピクセル未満のハンバーガー シートに折りたたまれます。
• 検索バーの 3 つのセグメントは、シングルタップのエントリに折りたたまれ、モバイルで全画面の検索オーバーレイが開きます。
• _プロパティ グリッドとシティ リンク グリッドは、各ブレークポイントで列数をきれいに削除します。行をリフローすることはありません。常に列を減らします。
• リスティング詳細の予約カードが、モバイルでは固定の右レールから固定の下部バーに切り替わり、「予約」CTA と 1 泊あたりの料金概要のみが表示されます。

既知のギャップ

• **ホバー状態の色:** グローバルなノーホバーポリシーに従って意図的に文書化されていません — Airbnb の実際のプロパティカードの__CODEBCK_608___ スタイルは微妙な標高リフトですが、正確な抽出は信頼できません。
• **状態/スケルトン画面の読み込み:** 抽出されたサーフェスには表示されません。
• **マップ ビューのスタイル:** 検索結果のマップでは、カスタム Rausch マーカーを含む Mapbox の色合いのタイルが使用されます。ここにはキャプチャされていません。
• **フォーム入力エラーの状態:** エラー テキストの色 (``) は文書化されていますが、検証失敗時の完全な入力アウトラインとヘルパー テキストの組み合わせは、キャプチャされたサーフェスに表示されませんでした。
• **サブブランド パレット:** Luxe (``) と Plus (``) はトークンとして文書化されていますが、それらの完全なサブシステム (タイポグラフィーのオーバーライド、表面処理) は別のサブドメインに存在するため、ここではキャプチャされません。

Visual Identity & Brand Recognition

What makes Airbnb's design system memorable is not any single element but the cohesive interaction of its parts. The #ff385c brand color, the consistent use of Airbnb Cereal VF across touchpoints, and the predictable component patterns create a recognizable visual language that users come to trust. This kind of systematic brand building is what distinguishes professionally managed design systems from ad-hoc visual decisions. It signals to users that the same care applied to the visual surface extends to the underlying product quality.

Visual Identity & Brand Recognition

What makes Airbnb's design system memorable is not any single element but the cohesive interaction of its parts. The #ff385c brand color, the consistent use of Airbnb Cereal VF across touchpoints, and the predictable component patterns create a recognizable visual language that users come to trust. This kind of systematic brand building is what distinguishes professionally managed design systems from ad-hoc visual decisions. It signals to users that the same care applied to the visual surface extends to the underlying product quality.

Visual Identity & Brand Recognition

What makes Airbnb's design system memorable is not any single element but the cohesive interaction of its parts. The #ff385c brand color, the consistent use of Airbnb Cereal VF across touchpoints, and the predictable component patterns create a recognizable visual language that users come to trust. This kind of systematic brand building is what distinguishes professionally managed design systems from ad-hoc visual decisions. It signals to users that the same care applied to the visual surface extends to the underlying product quality.

Related Design Systems

Explore similar design languages from the same category:

• Notion Design System
• Figma Design System
• Clickhouse Design System
• Slack Design System