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

# 受 Airbnb 启发的设计系统

> Category: 电商与零售
> 旅游市场平台。温暖珊瑚色调，以摄影为核心，圆角 UI。

## 1. 视觉主题与氛围

Airbnb 2026 年的设计如同一本恰好做成了 App 的旅行杂志——纯净的白色画布让位于全幅摄影，界面本身退隐其后，让房源照片自由呼吸。标志性的 Rausch 珊瑚粉（`#ff385c`）用得克制却无处不在：搜索 CTA、活跃标签指示器、主要操作按钮，偶尔点缀在价格或心愿单收藏心形图标上。其余部分是严格的灰度体系，`#222222` 承载了几乎所有文本。

这套系统之所以一眼认出是 Airbnb，在于它对内容投注的*信任*。房源照片以英雄尺寸展示，4:3 比例、全幅圆角处理。分类切换通过三选项卡选择器实现（民宿 / 体验 / 服务），搭配 3D 渲染的插画图标（坡屋顶小屋、热气球、服务铃）——实体感、触感十足，近乎玩具质感——配上清晰的 `Airbnb Cereal VF` 标签文字。这是罕见的消费类产品，能让 3D 渲染与纯排版 UI 共存而毫无违和感。

最新登场的界面是**体验**产品线——相同的视觉风格，但卡片密度更高，摄影更丰富，中央锚定的预订面板带有固定右侧栏定价。房间和体验的详情页都遵循严格的模板：全幅英雄图片网格 → 叠加的圆角预订卡片（滚动时固定） → 设施介绍 → 评价（"房客最爱"奖项以一个大号居中的 `4.81` 评分搭配月桂花环展示）→ 地图 → 房东简介 → 说明条款。无论预订房间还是游艇之旅，节奏始终如一。

**核心特征：**
- Rausch 珊瑚粉（`#ff385c`）作为单一强调品牌色，仅用于主要 CTA 和搜索按钮
- 4:3 / 16:9 全幅摄影，搭配细腻的圆角处理（14–20px），作为核心视觉语言
- 3D 渲染分类图标搭配排版标签——系统中唯一允许插画的场所
- 圆形 `50%` 图标按钮（返回箭头、分享、收藏、轮播箭头）散布全界面
- `Airbnb Cereal VF` 承载所有标签，从 8px 法律脚注到 28px 区块标题——单字体家族系统
- 产品层级色彩编码：Airbnb Plus（品红 `#92174d`）、Airbnb Luxe（深紫 `#460479`）、Airbnb（Rausch 珊瑚）
- "房客最爱"奖项锁定组合——超大居中评分数字夹在两侧月桂花环之间，是系统中最具辨识度的设计时刻之一
- 固定预订面板，桌面端以价格 → 日期 → 人数的叠加形式固定于右侧栏，移动端转换为底部锚定的"预订"栏
- 移动端固定底部导航（探索 / 心愿单 / 登录），活跃状态使用 Rausch 色调

## 2. 色彩体系与用途

### 主色
- **Rausch**（`#ff385c`）：品牌标志性珊瑚粉。CSS 变量 `--palette-bg-primary-core`。用于：主要"预订"按钮、搜索提交按钮、活跃标签下划线、心愿单爱心填充、价格强调。每个页面上视觉优先级最高的单一颜色。

### 辅助色与强调色
- **深 Rausch**（`#e00b41`）：饱和度更高的变体。CSS 变量 `--palette-bg-tertiary-core`。用于按下/激活按钮状态和渐变终止色。
- **Plus 品红**（`#92174d`）：CSS 变量 `--palette-bg-primary-plus`。Airbnb Plus 产品层级的品牌色——面向精选高端房源的产品线。
- **Luxe 紫**（`#460479`）：CSS 变量 `--palette-bg-primary-luxe`。Airbnb Luxe 产品层级的品牌色——面向别墅/庄园级别租赁。
- **信息蓝**（`#428bff`）：CSS 变量 `--palette-text-legal`。用于法律/信息类链接（条款、隐私、说明）——系统中唯一的非单色链接颜色。

### 表面色与背景色
- **画布白**（`#ffffff`）：默认页面背景。每张卡片、每个容器、每个详情页都从这里开始。
- **云雾灰**（`#f7f7f7`）：页脚背景、地图视图包装器以及希望退居主白之后的"其他"区域使用的微妙底面色调。
- **发丝灰**（`#dddddd`）：无处不在的 1px 边框色——分隔卡片、设施行、评价面板、页脚列。布局系统的基础色。

### 中性色与文字色
- **墨黑**（`#222222`）：CSS 变量 `--palette-text-primary`。系统的近黑色。所有标题、正文段落、导航标签、价格文字均使用此色。占页面全部文字的约 90%。
- **炭灰**（`#3f3f3f`）：CSS 变量 `--palette-text-focused`。用于聚焦状态输入框文字和次级强调文案。
- **灰烬**（`#6a6a6a`）：CSS 变量 `--palette-bg-tertiary-hover`。次级标签、城市名下方"乡村租赁"类副标题文案、低调页脚链接。
- **静默灰**（`#929292`）：CSS 变量 `--palette-text-link-disabled`。禁用按钮和低优先级元数据。
- **石灰**（`#c1c1c1`）：三级分隔线、图标描边、占位头像。

### 语义色与强调色
- **错误红**（`#c13515`）：CSS 变量 `--palette-text-primary-error`。表单验证错误、危险操作警告。
- **深错误色**（`#b32505`）：CSS 变量 `--palette-text-secondary-error-hover`。错误状态的按下/激活变体。
- **半透明黑**（`rgba(0, 0, 0, 0.24)`）：CSS 变量 `--palette-text-material-disabled`。禁用 Material 风格标签。

### 渐变系统
Airbnb 的品牌渐变使用极为克制，通常只出现在品牌文字标识和搜索按钮的品牌化时刻：

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

这道珊瑚色→品红的渐变是"品牌时刻"——从不用于整块表面，仅作为狭窄的胶囊填充或品牌 logo 处理。

## 3. 排版规则

### 字体家族
- **Airbnb Cereal VF**（主要且唯一）：承载整套系统的专有可变字重无衬线字体。回退顺序：`Circular, -apple-system, system-ui, Roboto, Helvetica Neue, sans-serif`。

提取的 token 中观察到的字重：500、600、700。没有 400 常规体——系统的"正文"字重是 500，使每段文字都带有一种微妙的额外厚度，读起来自信而笃定。

OpenType 特性：`salt`（样式替代）用于紧凑的 11px 和 14px 600 字重标签——可能用于更紧凑的数字和特殊字符造型。未观察到连字或分数数字特性。

### 层级体系

| 角色 | 尺寸 | 字重 | 行高 | 字间距 | 备注 |
|------|------|--------|-------------|----------------|-------|
| 区块标题 | 28px / 1.75rem | 700 | 1.43 | 0 | "未来出行灵感" — 页面级标题 |
| 子区块标题 | 22px / 1.38rem | 500 | 1.18 | -0.44px | "房源提供的服务"、"认识房东" — 内容分隔标题 |
| 卡片标题 | 21px / 1.31rem | 700 | 1.43 | 0 | 评价面板标题、卡片主标题 |
| 房源标题 | 20px / 1.25rem | 600 | 1.20 | -0.18px | "小团体游艇之旅，畅饮红酒与水果" — 详情页房源标题 |
| 副标题粗体 | 16px / 1.00rem | 600 | 1.25 | 0 | 房东姓名、城市名称 |
| 正文中等 | 16px / 1.00rem | 500 | 1.25 | 0 | 详情页主要正文 |
| 大号按钮 | 16px / 1.00rem | 500 | 1.25 | 0 | "预订"、"成为房东" |
| 默认按钮 | 14px / 0.88rem | 500 | 1.29 | 0 | 标准按钮标签 |
| 链接 | 14px / 0.88rem | 500 | 1.43 | 0 | 导航链接、页脚链接 |
| 说明文字中等 | 14px / 0.88rem | 500 | 1.29 | 0 | 元数据、副标题行（"乡村租赁"、"别墅租赁"） |
| 说明文字粗体 | 14px / 0.88rem | 600 | 1.43 | 0 | 启用 `salt` 特性——数字统计、小字强调 |
| 小号说明文字 | 13px / 0.81rem | 400 | 1.23 | 0 | 评价日期、微型元数据 |
| 微型默认 | 12px / 0.75rem | 400 | 1.33 | 0 | 页脚免责声明、法律微型文案 |
| 微型粗体 | 12px / 0.75rem | 700 | 1.33 | 0 | "新"标签胶囊 |
| 徽章大写 | 11px / 0.69rem | 600 | 1.18 | 0 | `salt` 特性——紧凑的分类/状态徽章 |
| 上标 | 8px / 0.50rem | 700 | 1.25 | 0.32px | 大写——价格脚注、小数尾数 |

### 原则
- **一个字体家族，多种字重。** Airbnb Cereal VF 处理从 8px 法律文字到 28px 页面标题的一切——视觉标识来自字体家族本身，而非混用字体。
- **500 是新的 400。** 系统的"常规"字重是 500，使每段文字比网页默认值稍显自信。
- **仅展示型文字使用负字间距。** 20px 以上的标题将字间距压缩 -0.18 至 -0.44px，以呈现雕琢感；正文尺寸保持 0 字间距以确保可读性。
- **标题行高紧凑，正文宽松。** 展示型文字行高为 1.18–1.25（紧凑）；正文和说明文字放宽至 1.43 以提升长篇阅读舒适度。
- **除 8px 外不使用全大写。** 系统中唯一的大写转换是 8px 上标——其他地方一律使用句首大写搭配微妙的字重变化来完成强调。

### 关于字体替代方案的说明
Airbnb Cereal VF 是专有字体。最接近的开源替代品是 **Circular Std**（仍为商业字体）或 **Inter**（免费，Google Fonts），在展示尺寸下减少约 -0.01em 的字间距。若需严格品牌保真，文档化的回退链（`Circular, -apple-system, system-ui`）在 macOS/iOS 上渲染效果尚可，因为 `system-ui` 会解析为比例相近的旧金山字体。

## 4. 组件样式

### 按钮

**主要 CTA**（"预订"、"搜索"、"添加日期"）
- 背景：Rausch `#ff385c`
- 文字：画布白 `#ffffff`，Airbnb Cereal 500，16px
- 内边距：约 14px 垂直，24px 水平
- 圆角：8px（矩形）或 50%（圆形图标变体）
- 边框：无
- 激活/按下：`transform: scale(0.92)` 加 2px `#222222` 聚焦环 `0 0 0 2px`

**次级按钮**（"成为房东"，描边三级操作）
- 背景：`#ffffff`
- 文字：墨黑 `#222222`，Airbnb Cereal 500，14–16px
- 内边距：10px 16px
- 圆角：20px（胶囊）或 8px（矩形）
- 边框：1px solid 发丝灰 `#dddddd`

**仅图标圆形按钮**（返回箭头、分享、收藏、轮播控制）
- 背景：`#f2f2f2`（略偏白）或白色加 1px 半透明黑边框
- 图标：`#222222` 描边，16–20px
- 尺寸：直径 32–44px
- 圆角：50%
- 激活/按下：`transform: scale(0.92)`；微妙 4px 白色环 `0 0 0 4px rgb(255,255,255)` 用于与彩色摄影背景分离

**禁用按钮**
- 背景：`#f2f2f2`
- 文字：石灰 `#c1c1c1`
- 透明度：0.5

**胶囊标签按钮**（分类选择器"民宿 / 体验 / 服务"）
- 背景：透明
- 文字：墨黑 `#222222`，Airbnb Cereal 500，16px
- 内边距：8px 14px
- 活跃状态：标签下方 2px 墨黑下划线
- 搭配标签上方 36–48px 3D 渲染插画图标

### 卡片与容器

**房源卡片**（主页网格、搜索结果）
- 背景：`#ffffff`
- 圆角：图片 14px，文字直接位于透明背景下方
- 图片：4:3 比例，全幅，相同 14px 圆角
- 内边距：外部容器无内边距；图片与元数据行之间 12px 间距
- 阴影：无——分隔依靠留白和照片固有的圆角实现
- 元数据模式：第一行城市/地区（16px 600），第二行距离/时长（14px 500 灰烬色），第三行日期范围，底部价格行含"每晚"

**详情页预订面板**（房间/体验页面的固定右侧栏）
- 背景：`#ffffff`
- 圆角：14–20px
- 边框：1px solid 发丝灰 `#dddddd`
- 阴影：`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
- 宽度：约 370px，固定于视口顶部以下 120–140px
- 内容：价格标题 → 日期选择器 → 房客下拉 → 主要 CTA → "尚未收费"脚注

**设施网格卡片**（房源详情页）
- 背景：`#ffffff`
- 边框：行级 1px solid 发丝灰 `#dddddd`（非每项）
- 内边距：每行设施垂直 16px
- 图标 + 标签模式：左侧 24px 描边图标，右侧 16px 500 字重标签

**评价卡片**（详情页单条评价）
- 背景：`#ffffff`，无边框
- 内边距：0（依赖网格间距）
- 内容：40px 圆形头像 + 16px 600 字重姓名 + 14px 400 灰烬色日期同行，下方 14px 500 正文段落

### 输入框与表单

**搜索栏**（主页主搜索）
- 背景：`#ffffff`
- 边框：1px solid 发丝灰 `#dddddd` 包裹三个分段（地点 / 时间 / 人数）
- 圆角：32px（完整胶囊）
- 阴影：`rgba(0, 0, 0, 0.04) 0 2px 6px 0` — 微妙悬浮感
- 结构：三段式，细垂直分隔线分隔，每段上方有 12px 500 标签，下方有 14px 500 占位符
- 提交：右端 Rausch 圆形图标按钮，直径 48px

**文字输入框**（通用表单）
- 背景：`#ffffff`
- 边框：1px solid 发丝灰 `#dddddd`
- 圆角：8px
- 内边距：14px 16px
- 聚焦：边框切换为墨黑，添加 `0 0 0 2px` 黑色外环
- 错误：边框切换为 `#c13515`（错误红），辅助文字使用同色

**日期选择器**
- 日历网格：7 列布局，圆形 `50%` 日期单元格，宽 40–44px
- 已选范围：墨黑 `#222222` 背景配白色数字
- 起止锚点：较大填充圆；中间日期使用云雾灰 `#f7f7f7` 色调

### 导航

**顶部导航（桌面端）**
- 高度：约 80px
- 背景：`#ffffff`
- 左侧：Rausch 色 Airbnb 品牌文字+logo 组合（102×32px）
- 中央：三选项卡分类选择器（民宿 / 体验 / 服务），每个标签上方有 36–48px 3D 图标，下方 16px 500 标签；活跃标签有 2px 墨黑下划线
- 右侧："成为房东"文字链接，然后 32px 圆形地球（语言），然后 36px 汉堡头像菜单
- 底部边框：1px solid 发丝灰 `#dddddd`

**顶部导航（移动端）**
- 全宽搜索胶囊占据单行："开始搜索"占位符搭配小型搜索图标
- 下方：三选项卡分类选择器持续显示（民宿 / 体验 / 服务）——插画图标缩小至约 28px
- 底部固定标签栏：探索（活跃状态 Rausch）/ 心愿单 / 登录——24px 图标上方 12px 标签

**房源详情次级导航**
- 滚动过英雄图片后出现的固定水平锚点链接（照片 · 设施 · 评价 · 位置 · 房东）
- 高度：56px
- 底部边框：1px solid 发丝灰

### 图片处理

- **主要宽高比**：首页房源网格 4:3，体验英雄摄影 16:9，头像 1:1
- **圆角**：房源网格图片 14px，详情页英雄照片框 20px，头像 `50%`
- **详情页图片网格**：五照片网格，左侧单张大图（50% 宽）加右侧 2×2 四小图，共享 20px 外圆角容器
- **懒加载**：大量使用 `loading="lazy"` 配模糊占位预览
- **轮播**：32px 圆形箭头按钮覆盖图片垂直居中；圆点指示器位于底边上方 12px

### 标志性组件

**"房客最爱"奖项锁定组合**（高评分房源详情页突出展示）
- 居中评分数字，700 字重，44–56px
- 左右各一个手绘月桂花环 SVG 插图，约 48px 高
- 下方："房客最爱"标签，12px 700 大写，字间距 0.32px，副标签 14px 500 灰烬色
- 全宽区块，无容器边框——直接置于白色画布

**三选项卡分类选择器**（出现在每个浏览界面顶部）
- 三个标签：民宿 / 体验 / 服务
- 每个标签：约 48px 高的 3D 渲染插画图标（房屋、气球、服务铃）上方，下方 16px 500 标签
- 体验和服务当前携带小型深海军蓝"新"标签（图标右上角浮动的 12px 700 白色文字深蓝背景）
- 活跃标签：标签下方 2px 墨黑下划线

**灵感城市网格**（首页"未来出行灵感"）
- 桌面端 6 列目的地链接网格，移动端 2 列
- 每格：第一行 16px 600 城市名，第二行 14px 500 灰烬色租赁类型副标题（"乡村租赁"、"别墅租赁"）
- 无图片——纯文字网格
- 上方按分类标签（热门 / 艺术与文化 / 海滩 / 山地 / 户外 / 娱乐活动 / 旅行灵感 / Airbnb 友好公寓）——活跃标签有 2px 下划线和字重变化

**预订固定卡片**（房源详情页）
- 桌面端用户滚动过英雄区域后固定于视口顶部以下 120px
- 移动端折叠为全宽底部栏，显示"$X 起/晚"标签和 Rausch "预订"胶囊
- 始终显示：价格标题 → 日期显示 → 房客选择器 → Rausch CTA → "尚未收费"免责声明

**体验房东卡片**（体验详情页）
- 全宽圆角容器，顶部带 3:2 封面照片
- 圆形房东头像（56px）与封面底边重叠 50%
- 重叠下方：房东姓名 16px 700，入驻时长 14px 500 灰烬色，小型 Rausch "联系房东"胶囊按钮
- 用作评价与设施/位置区块之间的过渡

**"须知事项"条带**（房源详情页）
- 3 列规则/政策区块（房屋规则、安全与房产、取消政策）
- 每列：顶部图标，16px 600 标题，14px 500 灰烬色正文，墨黑下划线"显示更多"链接
- 分隔线：整个条带顶部和底部 1px 发丝灰边框

## 5. 布局原则

### 间距系统
- **基础单位**：8px
- **提取的刻度**：2、3、4、5.5、6、8、10、11、12、15、16、18.5、22、24、32px——精细刻度，少量偏格值用于像素级图标对齐
- **区块内边距**：桌面端上下约 48–64px，移动端 24–32px
- **卡片内部内边距**：预订面板和大型卡片 24px，设施行 16px，房源卡片元数据 12px
- **房源卡片间距**：桌面端 24px，移动端 16px
- **堆叠文字行间距**：4–8px（极紧——强化旅游房源"信息密集"的感觉）

### 网格与容器
- **最大内容宽度**：超宽屏 1760–1920px（Airbnb 允许网格比大多数网站延伸更远）；大多数详情页 1280px
- **首页房源网格**：≥1760px 时 6 列，≥1440px 时 5 列，≥1128px 时 4 列，≥800px 时 3 列，≥550px 时 2 列，以下 1 列
- **详情页**：2 列不对称布局——主要内容约 58%，固定预订面板右侧约 36%，约 6% 间距
- **页脚**：3 列支持 / 房东 / Airbnb

### 留白哲学
Airbnb 信息密集却从不拥挤。留白用于*分组*——房源卡片有 24px 间距使每张照片作为独立对象呈现，但每张卡片下方的元数据使用 4–8px 间距，使价格/城市/日期感觉像一个整体。详情页预订面板有 24px 内部内边距，但其中的行（日期选择器、房客选择器、CTA）以 12px 堆叠——卡片与页面之间的边界比内容内部做了更多分隔工作。

### 圆角刻度
| 圆角 | 用途 |
|--------|-----|
| 4px | 内联锚点标签、标签芯片 |
| 8px | 文字按钮、下拉菜单、小型工具按钮 |
| 14px | 房源卡片摄影、通用内容容器、徽章 |
| 20px | 主要圆角按钮（胶囊形）、大型图片、预订面板 |
| 32px | 搜索栏胶囊、超大容器 |
| 50% | 所有圆形图标按钮、所有头像、心愿单爱心——系统标志性圆形几何 |

## 6. 深度与层级

| 层级 | 处理方式 | 用途 |
|-------|-----------|-----|
| 0 | 无阴影 | 房源卡片、正文内容、纯文字区块 |
| 1 | `rgba(0, 0, 0, 0.08) 0 4px 12px` | 激活/按下图标按钮（如返回、分享、收藏）——微妙抬升以表示交互 |
| 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` | 固定预订面板卡片、模态框、下拉菜单——系统标志性三层立体感 |
| 聚焦环 | `0 0 0 2px #222222` | 活跃状态按钮、聚焦搜索输入框 |
| 白色分隔环 | `rgb(255, 255, 255) 0 0 0 4px` | 叠加在照片上的圆形按钮——4px 白色环将按钮与彩色图片背景干净分离 |

阴影哲学：Airbnb 使用**堆叠分层阴影**而非单一投影。三层预订面板阴影读起来像一个整体的抬升，但实际上是三个不同透明度/模糊值的独立阴影——在阴影边缘创造微妙的抗锯齿效果，质感高级而不沉重。

### 装饰性深度
- **摄影即深度**：系统大量依赖全幅摄影创造视觉深度；阴影和渐变使用极为克制，让照片承担主要工作
- **月桂花环锁定组合**："房客最爱"奖项使用两个 SVG 月桂插图，赋予原本平面的评分数字一种仪式感、如同奖杯的存在感
- **3D 渲染分类图标**：民宿/体验/服务图标内置柔和内部光照和微妙投影——系统中唯一允许"立体"插图的地方

## 7. 规范与禁忌

### 规范
- 将 Rausch `#ff385c` 保留用于主要操作和活跃标签指示器——切勿用于装饰性目的而稀释其存在感。
- 让摄影自由呼吸——4:3 裁切，14–20px 圆角，无覆盖文字，无渐变遮罩。
- 所有 Rausch 以下的文字层使用墨黑 `#222222`——这是系统的近黑色，而非纯黑 `#000000`。
- 三选项卡分类选择器的 3D 插画图标与平面排版配对——不要在同一界面内混用插画风格。
- 叠加三个低透明度阴影（约 2%、4%、10%）以创造标志性预订面板立体感。
- 所有卡片间和行间分隔线使用发丝灰 `#dddddd` 1px 边框。
- 将预订面板在桌面端设为固定，折叠为移动端底部锚定预订栏。
- 元数据组内使用 4–8px 间距，卡片间使用 24px——信息密度是有意为之的。

### 禁忌
- 不要在 Rausch / Plus 品红 / Luxe 紫产品层级调色板之外引入次级强调色。
- 不要在照片内放置文字——说明文字始终位于图片下方，而非叠加其上。
- 除 8px 上标角色外不使用全大写标签。
- 不要将图标按钮设为 50% 以外的任何圆角——圆形是系统的标志性几何形态。
- 不要为房源卡片添加投影——它们置于白色画布上，无需立体感。
- 不要使用渐变背景——系统中唯一的渐变是品牌文字标识上的窄 Rausch→品红渐变。
- 不要使用 400 常规字重——Airbnb Cereal 的正文字重是 500。
- 不要用其他展示字体覆盖 Airbnb Cereal VF——系统刻意采用单字体家族。

## 8. 响应式行为

### 断点

Airbnb 声明了约 60 个断点（来自其组件库的设计时产物），但有意义的布局变化发生在一个小得多的集合中：

| 名称 | 宽度 | 关键变化 |
|------|-------|-------------|
| 超宽屏 | ≥1760px | 6 列房源网格，1760–1920px 最大内容宽度 |
| 桌面 XL | 1440–1759px | 5 列网格，完整导航可见，固定右侧预订面板 |
| 桌面 | 1128–1439px | 4 列网格，固定预订面板持续显示 |
| 笔记本 | 1024–1127px | 3–4 列网格，分类导航保持水平 |
| 平板 | 800–1023px | 3 列网格，全局搜索可能折叠为单行胶囊 |
| 小平板 | 550–799px | 2 列网格，预订面板降至全宽内联块 |
| 移动端 | 375–549px | 1 列堆叠布局，底部固定标签栏出现（探索 / 心愿单 / 登录） |
| 小手机 | <375px | 边缘内边距收紧至 16px；分类选择器图标缩小至约 28px |

### 触控目标
所有交互元素满足或超过 44×44px。圆形图标按钮系列专门设计为 32–44px，搭配 8–12px 扩展点击区域内边距。Rausch 主要预订按钮约 48px 高。三选项卡分类选择器的点击区域是完整的标签加图标矩形（每个标签通常约 64×80px）。

### 折叠策略
- **导航**：平板及以上保留 Airbnb 品牌文字 + 三选项卡选择器；移动端选择器滑至搜索胶囊正下方，地球/头像控件移至底部固定标签栏。
- **搜索栏**：桌面端三段式胶囊（地点 / 时间 / 人数）+ Rausch 圆形提交按钮；移动端折叠为单行"开始搜索"胶囊，点击后打开全屏搜索界面。
- **预订面板**：≥1128px 时固定右侧栏；800–1127px 时内联于主内容列；<800px 时底部固定"预订"胶囊。
- **房源网格**：跨断点从 6 → 5 → 4 → 3 → 2 → 1 列重排。
- **详情页图片网格**：桌面端五图布局（1 张大图 + 4 张小图）；移动端变为可滑动全幅轮播，带页面圆点指示器。
- **页脚**：3 列布局在 <800px 时折叠为单列堆叠。

### 图片行为
- `loading="lazy"` 全局应用，配合模糊的 `im_w=` URL 参数化预览缩略图优先加载
- 响应式图片使用 Airbnb 的 `muscache.com` CDN，`im_w` 查询参数按宽度分发（`im_w=240`、`im_w=720`、`im_w=1200`、`im_w=2400`）
- 无艺术裁切——同一图片跨断点缩放
- 轮播自动调整照片高度以保持一致的 4:3 比例，无论原始宽高比如何

## 9. Agent 提示词指南

### 快速色彩参考
- 主要 CTA："Rausch (#ff385c)"
- 页面背景："Canvas White (#ffffff)"
- 底面色："Soft Cloud (#f7f7f7)"
- 标题/正文文字："Ink Black (#222222)"
- 次要文字："Ash Gray (#6a6a6a)"
- 边框/分隔线："Hairline Gray (#dddddd)"
- 错误："Error Red (#c13515)"
- 信息链接："Info Blue (#428bff)"
- Luxe 层级强调："Luxe Purple (#460479)"
- Plus 层级强调："Plus Magenta (#92174d)"

### 示例组件提示词
- "创建主要预订按钮：Rausch (#ff385c) 背景，白色 Airbnb Cereal 500 字重 16px 标签，14px × 24px 内边距，8px 圆角，无阴影。激活/按下时添加 `transform: scale(0.92)` 并带 2px 墨黑聚焦环（`0 0 0 2px #222222`）。"
- "构建房源卡片：14px 圆角的 4:3 全幅照片，无容器阴影；图片下方以 4px 间距堆叠三行文字：城市名 16px 600 墨黑，租赁类型 14px 500 灰烬色（#6a6a6a），价格范围 16px 500 墨黑，带 14px '每晚'后缀。"
- "设计固定预订面板：白色背景，14px 圆角，1px 发丝灰（#dddddd）边框，3 层立体阴影（`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 内边距，370px 宽度，桌面端固定于视口顶部以下 120px。内容：价格标题、日期选择器、房客下拉、Rausch 主要 CTA，以及 12px 灰烬色'尚未收费'免责声明。"
- "创建三选项卡分类选择器：三个等宽标签，标签为民宿、体验、服务；每个标签上方有约 48px 3D 渲染插画图标（房屋、气球、服务铃），下方 16px 500 墨黑标签；活跃标签带 2px 墨黑下划线；在体验和服务图标右上角添加小型 12px 700 白色深海军蓝背景'新'标签。"
- "渲染'房客最爱'奖项锁定组合：居中评分数字，52px 700 字重墨黑，左右各有手绘 SVG 月桂花环，约 48px 高；下方 12px 700 大写'房客最爱'标签，字间距 0.32px；副标签 14px 500 灰烬色；全宽区块直接置于白色画布上，无容器边框。"

### 迭代指南
优化使用此设计系统生成的现有界面时：
1. 每次专注于**一个组件**。
2. 引用本文档中的具体色彩名称和十六进制代码（例如"墨黑 #222222"，而非"深灰"）。
3. 搭配自然语言描述与测量值（用"微妙三层立体感"而非一长串阴影字符串）。
4. 描述期望的"感觉"（"杂志风，摄影优先" vs "密集实用"）。
5. 始终默认使用 Airbnb Cereal VF 500 字重正文，600–700 强调——不要用 400。
6. 保持 Rausch 粉色稀缺——如果每个视口出现多个 Rausch 色元素，请考虑是否其中一个应被中性化。

### 已知缺口
- **首页房源网格卡片**：主要房源卡片网格（airbnb.com 的主要视觉界面）在提取的首页截图中未能完整捕获——内容仅部分加载。上方"房源卡片"规格是根据灵感网格结构和 Airbnb 更广泛的约定推断的；在生产使用前，请对照实时网站确认精确的宽高比和元数据层级。
- **体验分类图标**：民宿/体验/服务的 3D 插画图标以光栅资源形式提供；其确切源文件规格（SVG 与 PNG、渲染像素尺寸）在此未作记录。
- **动画与过渡时长**：未捕获——属于静态提取范围。
- **深色模式**：Airbnb 在提取的产品界面中未发布原生深色模式；本文档仅描述单一浅色模式主题。