Airbnb

---
version: alpha
name: "Airbnb"
description: "Airbnb 的 DESIGN.md 中文参考模板，保留原始 design token 与专业术语，覆盖 color system、typography、layout、components、motion 与 interaction states。"
language: zh-CN
sourceLanguage: en
---

## 概览
Airbnb 是宽松、以摄影驱动的消费型 marketplace 的典型代表。基础画布是 **pure white** (`{colors.canvas}` — #ffffff)，标题与正文使用深近黑墨色 (`{colors.ink}` — #222222)，并由单一强度的 **Rausch** (`{colors.primary}` — #ff385c) 承载所有 primary CTA、搜索按钮圆点、心形收藏状态以及正文中的品牌链接。主线营销中没有第二个品牌色；**Luxe purple** (`{colors.luxe}` — #460479) 与 **Plus magenta** (`{colors.plus}` — #92174d) 是子品牌强调色，只出现在 Airbnb Luxe / Plus 场景内。

字体系统使用 **Airbnb Cereal VF**（Airbnb 授权的定制可变字体），以 **Circular** 作为历史上的内部 fallback，并在其下接系统字体栈。Cereal 的字重保持克制：display headline 通常是 22–28px、500–600 weight，而不是金融或企业系统常用的 700+ 重字重。首页 hero h1（"Inspiration for future getaways"）只有 28px / 700，放在典型 SaaS 页面上会显得偏小；在这里成立，是因为布局把视觉重量交给摄影（城市拼贴、房源卡片），而不是依赖强势排版。

形状语言是 **柔和的**。按钮使用 8px radius (`{rounded.sm}`)，房源卡片约 14px (`{rounded.md}`)，搜索栏是完整 pill shape (`{rounded.full}`)，wishlist heart 与 search orb 都是圆形 (`{rounded.full}`)，分类条圆角达到 32px (`{rounded.xl}`)。除了页面主体网格本身，几乎没有硬直角；每个可交互元素都经过圆角处理。

**Key Characteristics:**
- 单一强调色：`{colors.primary}` (#ff385c — "Rausch") 承载所有 primary CTA、search orb、heart save state 和品牌 wordmark。使用非常克制：大多数页面约 90% 是 white + ink，只出现一两个 Rausch 时刻。
- 定制可变字体：`Airbnb Cereal VF`。Display 字重位于 500–700，body 为 400。克制字重是有意为之，因为系统信任摄影承担视觉重量。
- 三产品顶部导航：Homes、Experiences、Services；每项都有手绘风格 32px icon，两个较新的产品带有 "NEW" badge (`{component.new-tag}`)。Active tab 使用 underline rule (`{component.product-tab-active}`)。
- Pill-shaped global search bar：white surface、全圆角 (`{rounded.full}`)，内部由 1px hairline 分割成 Where / When / Who segment，右端以圆形 Rausch search orb (`{component.search-orb}`) 收束。
- 房源卡片 photo-first：固定比例矩形，使用 `{rounded.md}` 裁切圆角，带可滑动 image carousel；左上角是 "Guest favorite" floating badge，右上角是 heart icon，下方放 4–5 行 meta 信息。
- Editorial dropdowns（footer、language picker）是在白色画布上的干净文本列；没有 card surface，也没有 shadow。
- Design system 将 elevation 限制在一个 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`)；用于 hover 浮起的卡片以及 search/account dropdown。
- 8px base spacing system，主要 section 使用 `{spacing.section}` (64px)；宽松但没有 editorial magazine 那么空，因为 marketplace 的密度需要每屏展示更多卡片。

## Colors

### Brand & Accent
- **Rausch** (`{colors.primary}` — #ff385c): 单一品牌色。用于 primary CTA 背景（Reserve、Continue）、search orb、房源卡片的 heart save state，以及正文中的品牌链接。这是消费旅行领域最具辨识度的颜色之一。
- **Rausch Active** (`{colors.primary-active}` — #e00b41): press / pointer-down 变体，饱和度略高。用于 `{component.button-primary-active}`。
- **Rausch Disabled** (`{colors.primary-disabled}` — #ffd1da): 用于 disabled CTA 的浅色 tint。
- **Luxe Purple** (`{colors.luxe}` — #460479): Airbnb Luxe 的子品牌强调色。只出现在 Luxe 品牌 surface 中，不用于主线营销。
- **Plus Magenta** (`{colors.plus}` — #92174d): Airbnb Plus 的子品牌强调色。作用域与 Luxe 相同，只用于子产品。

### Surface
- **Canvas** (`{colors.canvas}` — #ffffff): 所有公开页面的默认 page floor。Airbnb 公共 Web 没有 dark mode。
- **Surface Soft** (`{colors.surface-soft}` — #f7f7f7): 最浅的 fill；用于 disabled field、sub-nav hover background，以及 inline search filter band。
- **Surface Strong** (`{colors.surface-strong}` — #f2f2f2): 稍重一点的 fill；用于 circular icon-button surface，例如 breadcrumb back-arrow 和 listing toolbar button。

### Hairlines & Borders
- **Hairline** (`{colors.hairline}` — #dddddd): 默认 1px border tone；用于 search bar divider、table separator、footer column splitter、card 1px border。
- **Hairline Soft** (`{colors.hairline-soft}` — #ebebeb): 更浅的 divider，用于长滚动 editorial body separator。
- **Border Strong** (`{colors.border-strong}` — #c1c1c1): 更重的 stroke，用于 disabled outline button 和 focus 后的 form input outline。

### Text
- **Ink** (`{colors.ink}` — #222222): Light surface 上的主导文本色。用于 display headline、body paragraph、primary nav link 和大多数 inline link text。永远不是 pure black。
- **Body** (`{colors.body}` — #3f3f3f): 次级 running-text color，用于长篇 review 和 amenity copy，避免 ink 显得过重。
- **Muted** (`{colors.muted}` — #6a6a6a): 用于 city link block 内的 subtitle（"Cottage rentals"、"Villa rentals"）、inactive product-tab label、footer category sub-label、"View all" link。
- **Muted Soft** (`{colors.muted-soft}` — #929292): Disabled link text。使用非常少。
- **Star Rating** (`{colors.star-rating}` — #222222): 与 ink 相同的 token；Airbnb 的 star icon 和 "4.81" rating number 都渲染为 ink，而不是黄/金色，这是刻意的品牌选择（黄色星星在旅行语境中会显得廉价）。
- **On Primary** (`{colors.on-primary}` — #ffffff): Rausch CTA 上的白色文本。

### Semantic Colors
- **Error** (`{colors.primary-error-text}` — #c13515): Form validation 的 inline error text。不同于 Rausch；略暗、饱和度更高的红色。
- **Error Hover** (`{colors.primary-error-text-hover}` — #b32505): Link hover 时变暗。
- **Legal Link Blue** (`{colors.legal-link}` — #428bff): Legal copy（Privacy、Terms）中的 inline link。只用于 legal sub-band。

### Scrim
- **Scrim** (`{colors.scrim}` — #000000 at 50% opacity): 全局 modal backdrop tone；用于 date picker、login dialog、language picker。以基础 hex 存储，opacity 在渲染时应用。

## Typography

### Font Family
整个系统都使用 **Airbnb Cereal VF**，覆盖 display、body、navigation、caption 和 microcopy。Fallback 顺序是 `Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif`。**Circular** 是历史上的内部字体，仍作为第一个非可变字体 fallback；系统字体栈作为最终兜底。

没有单独的 display family。可变字体承担完整字号体系。

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | 用途 |
|---|---|---|---|---|---|
| `{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 | Listing detail 内部 section head ("What this place offers") |
| `{typography.display-sm}` | 20px | 600 | 1.20 | -0.18px | Sub-section title ("Things to know") |
| `{typography.title-md}` | 16px | 600 | 1.25 | 0 | City link block title ("Wilmington", "Athens") |
| `{typography.title-sm}` | 16px | 500 | 1.25 | 0 | Footer column head ("Support", "Hosting", "Airbnb") |
| `{typography.body-md}` | 16px | 400 | 1.5 | 0 | Listing copy 中的默认 running text |
| `{typography.body-sm}` | 14px | 400 | 1.43 | 0 | Card meta line、date、price、distance text |
| `{typography.caption}` | 14px | 500 | 1.29 | 0 | Search field segment label ("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-label ("Inline 6") |
| `{typography.uppercase-tag}` | 8px | 700 | 1.25 | 0.32px (uppercase) | Product nav tab 上的 "NEW" badge |
| `{typography.button-md}` | 16px | 500 | 1.25 | 0 | Primary CTA button label |
| `{typography.button-sm}` | 14px | 500 | 1.29 | 0 | Pill button label（category strip） |
| `{typography.link}` | 14px | 400 | 1.43 | 0 | Inline body link |
| `{typography.nav-link}` | 16px | 600 | 1.25 | 0 | 顶部 product-nav label（Homes、Experiences、Services） |

### Principles
Display 字重保持克制。首页 h1 的 28px / 700 是刻意偏小的；它收在 search bar 下方，让摄影与 city-link grid 承担视觉层级。Listing-detail h1 的 22px / 500 更安静；上方的 listing photo banner 才是视觉主角。

整个系统唯一排版上真正响亮的时刻，是 listing page 上的 **rating display** (`{typography.rating-display}` — 64px / 700)。这是系统唯一让文字单独承担层级的位置；rating number 是高强度信任信号，因此获得最响亮的处理。

### Font Substitutes
如果 Airbnb Cereal VF 和 Circular 不可用，**Inter** 是最接近的开源替代。将 display headline 的 line-height 下调约 2%，以匹配 Cereal 略紧的 cap height；除此之外比例可以平滑迁移。

## 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):** 主要 page band 使用 `{spacing.section}` (64px)；比典型 SaaS marketing 的 80–96px 更紧，因为 marketplace 页面需要更高的每屏卡片密度。
- **Card internal padding:** `{component.host-card}` 和 `{component.reservation-card}` 使用 `{spacing.lg}` (24px)；property-card meta block 使用 `{spacing.base}` (16px)；caption / date-row gutter 使用 `{spacing.sm}` (8px)。
- **Gutters:** 首页 city grid 中卡片之间为 `{spacing.base}` (16px)；footer column gutter 内部为 `{spacing.lg}` (24px)；密集 category-strip divider 使用 `{spacing.xs}` (4px)。

### Grid & Container
- **Max content width:** 首页和 editorial page 居中约 1280px。Listing detail page 更接近 1080px，以保持 photo banner 和 reservation rail 的可读性。
- **City link grid (homepage footer):** Desktop 端为 6-column grid；每个 cell 包含 `{typography.title-md}` 的 city name，以及 muted `{typography.body-sm}` 的 category sub-label。
- **Listing detail:** 2-column；左侧是 photo / amenity body（约 64% 宽），右侧是 sticky reservation card (`{component.reservation-card}`，约 32%)。
- **Footer:** Desktop 端为 3-column link list（Support / Hosting / Airbnb），mobile 端折叠为 1-column。

### Whitespace Philosophy
系统给 editorial band 64px 的垂直呼吸空间，但压缩 card grid；property card 和 city-link card 之间只有 16px。这个对比是有意的：页面读起来像“开放的 hero，下方是密集 marketplace”，既强化 marketplace 属性，又不在首屏压迫用户。

## Elevation

系统本质上只有 **一个 shadow tier**，再加上 flat baseline。

- **Flat (no shadow):** Body、hero、footer、所有 editorial band；覆盖 95% 的 surface。
- **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`；用于 property card 的 pointer hover、静止状态的 search bar，以及 dropdown menu（account menu、language picker、date picker）。这是整个系统中唯一的 shadow definition。
- **Modal scrim:** `{colors.scrim}` 以 50% opacity 渲染，作为全局 modal backdrop。用于 date picker、login dialog、language picker。

没有渐进式 elevation tier；系统要么使用这一个 shadow，要么完全没有。深度来自摄影、white-on-white 的 surface separation 和圆角裁切，而不是层层叠加的阴影。

## Components

### Buttons

**`button-primary`** — Rausch fill、白色文字、8px radius、14×24px padding、48px height、500 weight。系统中最常见的 CTA："Reserve"、"Continue"、"Search" 以及 account-flow primary。

**`button-primary-active`** — Press state。背景切换为 `{colors.primary-active}`。没有 transform，也没有 shadow change。

**`button-primary-disabled`** — #ffd1da 的浅 Rausch tint，搭配白色文本。Cursor not-allowed。

**`button-secondary`** — White fill、ink text、1px ink outline。8px radius。用于 "Save"、"Cancel"，以及 Rausch surface 上的 inverse CTA。

**`button-tertiary-text`** — 纯 ink text，没有 surface，没有 border。Hover 时加 underline。用于 "Show more" 类链接和 modal close label。

**`button-pill-rausch`** — 用于 featured cell 的 pill-shaped Rausch CTA（例如 "Become a host" sub-CTA）；9999px radius、10×20px padding、14px label。

### Search Surface

**`search-bar-pill`** — 标志性的 global search bar。White fill、9999px radius、64px height、1px hairline 1px-shadow border。内部由 vertical hairline rule 分割为 `{component.search-field-segment}` cell（Where / When / Who）。每个 segment 上方是 uppercase caption label，下方是 `{typography.caption}` 的 placeholder line。

**`search-orb`** — 位于 search bar 右端的圆形 Rausch orb。48×48px、全圆角，居中放白色 magnifying-glass icon。这是首页最强的单一色彩时刻。

### Top Navigation

**`top-nav`** — White surface、80px height、1px bottom hairline。Airbnb wordmark 左对齐，三个 product tab（Homes / Experiences / Services）居中，account utilities（host link、language globe、account menu）右对齐。

**`product-tab-active`** — `{typography.nav-link}` 的 ink label，32px hand-illustrated icon，icon-label pair 下方有 2px ink underline rule。

**`product-tab-inactive`** — Muted label、illustrated icon、没有 underline。Click 后变为 active。

**`new-tag`** — 一个 tiny rounded-pill badge (`{rounded.full}`)，锚定在 icon 右上角，承载 `{typography.uppercase-tag}` 的 uppercase "NEW" label（8px / 700，0.32px tracking，uppercase）。用于 Experiences 和 Services，提示它们较新。

### Listing Cards

**`property-card`** — Photo-first card。1:1 aspect-ratio image，使用 `{rounded.md}` corner clipping，叠加 image carousel dot；左上角是 "Guest favorite" floating badge (`{component.guest-favorite-badge}`)，右上角是 heart icon（默认 outlined state 的 `{component.icon-button-circle}`，saved 时 Rausch-filled）。图片下方是 4–5 行 meta：title (`{typography.title-md}`)、distance / dates（muted `{typography.body-sm}`），以及右对齐的 price ("$X night")。

**`property-card-photo`** — Photo plate 本身。它被单独拆成 token，因为某些 surface（wishlist、search results）只复用图片，不使用 meta block。

**`experience-card`** — 用于 experience listing 的更高比例卡片（4:5）。同样使用 `{rounded.md}` clipping，左上角 floating "NEW" badge，右上角 heart，下方单行 title。

**`guest-favorite-badge`** — White rounded pill (`{rounded.full}`)，11px / 600 weight。覆盖在照片上，并应用系统唯一 shadow tier 来提供 elevation。

### Listing Detail

**`rating-display-card`** — Listing-detail 的标志性时刻。64px / 700 的 rating number ("4.81") 左右配有小型 laurel-wreath SVG ornament。Rating 下方是 "Guest favorite" tagline 和一排 ink stat column。这是整个系统中最大的排版重量。

**`amenity-row`** — 1-column list，由 amenity icon + `{typography.body-md}` 的 ink label 构成。Row padding 为 12px，行与行之间没有 border；section 上下由 1px hairline divider 收束。

**`reviews-card`** — Review excerpt 的 2-column grid。每列包含 author row（avatar、name、date），下方是 3-line excerpt，并带 "Show more" tertiary link。

**`host-card`** — White card，使用 `{rounded.md}` rounding 和 24px padding，包含 host avatar、name、"Superhost" badge、response-rate stat，以及 "Contact host" `{component.button-secondary}`。

**`reservation-card`** — Listing detail page 的 sticky right-rail card。White surface、`{rounded.md}` rounding、1px hairline border、1px shadow tier elevation、24px padding。包含 nightly price（ink `{typography.display-md}`）、date-range selector、guest-count stepper、full-width "Reserve" primary CTA，以及下方 `{typography.body-sm}` 的 fee breakdown stack。

### Date Picker

**`date-picker-day`** — 40×40px circular cell，使用 `{typography.body-sm}` 显示日期数字。默认状态为 transparent fill、ink text。

**`date-picker-day-selected`** — Ink fill、white text、full circle (`{rounded.full}`)。两个 selected day 之间的 range state 使用 `{colors.surface-soft}` lozenge background 连接。

### Forms

**`text-input`** — White surface、1px hairline outline、`{rounded.sm}` 8px radius、56px height、14×12px padding。上方是 stacked label（muted `{typography.caption}`），placeholder text 使用 muted `{typography.body-md}`。Focus 时 border 加粗为 2px ink，并切换到 `{colors.ink}`；没有 glow，也没有 ring。

### Footer

**`footer-light`** — White surface（与 page canvas 一致，Airbnb 没有 contrast footer），48×80px padding。三列 link block（Support / Hosting / Airbnb），由宽松的 24px gutter 分隔。每列以 `{typography.title-sm}` ink label 作为 column head，并堆叠 `{typography.body-sm}` ink 的 `{component.footer-link}` row。

**`legal-band`** — Footer column 下方的 bottom strip，包含 copyright line、language picker（globe icon + "English (US)" link）、currency picker 和 social icon（Facebook、X、Instagram）。所有文本都使用 muted `{colors.muted}` 和 `{typography.caption-sm}`。

## Responsive Behavior

| Name | Width | 关键变化 |
|---|---|---|
| Mobile | < 744px | Top nav 折叠为 logo + hamburger；product tabs 隐藏到 sheet 中；search bar 折叠为单个 tappable pill；property card 1-up 堆叠；city grid 变为 1-column；listing detail 将 reservation card 折叠为 sticky bottom bar。 |
| Tablet | 744–1128px | Top nav 保留 product tabs，但 search bar 变窄；property card 2-up；city grid 为 2–3 column；reservation card 以更窄宽度保留 sticky right-rail。 |
| Desktop | 1128–1440px | 完整 top nav，三个 product tab 居中；search bar 为完整 pill width，3 个 segment 全部可见；property card 4-up；city grid 6-column；listing detail 为带 reservation rail 的 2-column。 |
| Wide | > 1440px | Listing/search page 的 content width capped at 1440px，editorial 约 1280px；剩余空间由 gutter 吸收。 |

### Touch Targets
- Primary CTA 最小 48×48px（高于 WCAG AAA）。
- Search orb 是 48×48px circular，是页面上最常被点击的元素。
- Heart save button 是 32×32px circular；对 AAA 来说接近边界，但 photo card 内部的 12px padding 做了补偿。
- Date-picker day cell 是 40×40px circular。

### Collapsing Strategy
- Top product tabs 在 744px 以下折叠进 hamburger sheet。
- Search bar 的 3 个 segment 在 mobile 上折叠成 single-tap entry，打开 full-screen search overlay。
- Property 和 city-link grid 在每个 breakpoint 干净地下调 column count；不重新打乱行，只减少列数。
- Listing detail 上的 reservation card 在 mobile 上从 sticky right-rail 切换为 sticky bottom bar，只承载 "Reserve" CTA + nightly price summary。

## Known Gaps

- **Hover state colors:** 按照全局 no-hover policy，刻意不记录；Airbnb 实际的 property card `:hover` 样式是轻微 elevation lift，但精确提取不可靠。
- **Loading states / skeleton screens:** 在已提取 surface 中不可见。
- **Map view styling:** Search-results map 使用 Mapbox-tinted tile 和自定义 Rausch marker；此处未捕捉。
- **Form input error states:** 已记录 error text color (`{colors.primary-error-text}`)，但 validation failure 时完整的 input outline + helper-text 组合在捕捉 surface 中不可见。
- **Sub-brand palettes:** Luxe (`{colors.luxe}`) 和 Plus (`{colors.plus}`) 已作为 token 记录，但完整子系统（typography override、surface treatment）位于独立 sub-domain，此处未捕捉。