爱彼迎 Airbnb

version: alpha name: Airbnb-design-analysis description: A warm, generous consumer marketplace anchored on a clean white canvas and Airbnb Rausch (#ff385c), the single brand voltage that carries every primary CTA, search-button orb, and rating dot. Type runs Airbnb Cereal VF at modest weights — display sits at 22–28px in weight 500/600 rather than the heavy 700+ that fintech and enterprise systems use; the brand trusts photography and generous whitespace over typographic muscle. Three product entries (Homes, Experiences, Services) sit in the top nav with hand-illustrated 32-icon glyphs and "NEW" badges, signaling a marketplace expansion rather than a feature dump. Pill-shaped search bars ({rounded.full}), softly rounded property cards ({rounded.lg} ~14px), and 32px button radii read as friendly and human — there is no hard corner anywhere except the body grid.

colors: primary: "#ff385c" primary-active: "#e00b41" primary-disabled: "#ffd1da" primary-error-text: "#c13515" primary-error-text-hover: "#b32505" luxe: "#460479" plus: "#92174d" ink: "#222222" body: "#3f3f3f" muted: "#6a6a6a" muted-soft: "#929292" hairline: "#dddddd" hairline-soft: "#ebebeb" border-strong: "#c1c1c1" canvas: "#ffffff" surface-soft: "#f7f7f7" surface-card: "#ffffff" surface-strong: "#f2f2f2" on-primary: "#ffffff" on-dark: "#ffffff" legal-link: "#428bff" star-rating: "#222222" scrim: "#000000"

typography: display-xl: fontFamily: "'Airbnb Cereal VF', Circular, -apple-system, system-ui, Roboto, 'Helvetica Neue', sans-serif" fontSize: 28px fontWeight: 700 lineHeight: 1.43 letterSpacing: 0 display-lg: fontFamily: "'Airbnb Cereal VF', Circular, sans-serif" fontSize: 22px fontWeight: 500 lineHeight: 1.18 letterSpacing: -0.44px display-md: fontFamily: "'Airbnb Cereal VF', Circular, sans-serif" fontSize: 21px fontWeight: 700 lineHeight: 1.43 letterSpacing: 0 display-sm: fontFamily: "'Airbnb Cereal VF', Circular, sans-serif" fontSize: 20px fontWeight: 600 lineHeight: 1.20 letterSpacing: -0.18px title-md: fontFamily: "'Airbnb Cereal VF', Circular, sans-serif" fontSize: 16px fontWeight: 600 lineHeight: 1.25 letterSpacing: 0 title-sm: fontFamily: "'Airbnb Cereal VF', Circular, sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 1.25 letterSpacing: 0 rating-display: fontFamily: "'Airbnb Cereal VF', Circular, sans-serif" fontSize: 64px fontWeight: 700 lineHeight: 1.1 letterSpacing: -1px body-md: fontFamily: "'Airbnb Cereal VF', Circular, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 body-sm: fontFamily: "'Airbnb Cereal VF', Circular, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.43 letterSpacing: 0 caption: fontFamily: "'Airbnb Cereal VF', Circular, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1.29 letterSpacing: 0 caption-sm: fontFamily: "'Airbnb Cereal VF', Circular, sans-serif" fontSize: 13px fontWeight: 400 lineHeight: 1.23 letterSpacing: 0 badge: fontFamily: "'Airbnb Cereal VF', Circular, sans-serif" fontSize: 11px fontWeight: 600 lineHeight: 1.18 letterSpacing: 0 micro-label: fontFamily: "'Airbnb Cereal VF', Circular, sans-serif" fontSize: 12px fontWeight: 700 lineHeight: 1.33 letterSpacing: 0 uppercase-tag: fontFamily: "'Airbnb Cereal VF', Circular, sans-serif" fontSize: 8px fontWeight: 700 lineHeight: 1.25 letterSpacing: 0.32px textTransform: uppercase button-md: fontFamily: "'Airbnb Cereal VF', Circular, sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 1.25 letterSpacing: 0 button-sm: fontFamily: "'Airbnb Cereal VF', Circular, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1.29 letterSpacing: 0 link: fontFamily: "'Airbnb Cereal VF', Circular, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.43 letterSpacing: 0 nav-link: fontFamily: "'Airbnb Cereal VF', Circular, sans-serif" fontSize: 16px fontWeight: 600 lineHeight: 1.25 letterSpacing: 0

rounded: none: 0px xs: 4px sm: 8px md: 14px lg: 20px xl: 32px full: 9999px

spacing: xxs: 2px xs: 4px sm: 8px md: 12px base: 16px lg: 24px xl: 32px xxl: 48px section: 64px

components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: 14px 24px height: 48px button-primary-active: backgroundColor: "{colors.primary-active}" textColor: "{colors.on-primary}" rounded: "{rounded.sm}" button-primary-disabled: backgroundColor: "{colors.primary-disabled}" textColor: "{colors.on-primary}" rounded: "{rounded.sm}" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: 13px 23px height: 48px button-tertiary-text: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.button-md}" button-pill-rausch: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-sm}" rounded: "{rounded.full}" padding: 10px 20px search-orb: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" rounded: "{rounded.full}" height: 48px icon-button-circle: backgroundColor: "{colors.surface-strong}" textColor: "{colors.ink}" rounded: "{rounded.full}" height: 32px icon-button-outline: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.full}" height: 40px top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.nav-link}" height: 80px product-tab-active: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.none}" product-tab-inactive: backgroundColor: transparent textColor: "{colors.muted}" typography: "{typography.nav-link}" search-bar-pill: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.full}" padding: 14px 24px height: 64px search-field-segment: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.caption}" padding: 8px 24px category-strip: backgroundColor: "{colors.canvas}" textColor: "{colors.muted}" typography: "{typography.button-sm}" category-tab-active: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.button-sm}" rounded: "{rounded.none}" property-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.md}" property-card-photo: rounded: "{rounded.md}" experience-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.title-md}" rounded: "{rounded.md}" city-link-block: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.title-sm}" rating-display-card: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.rating-display}" guest-favorite-badge: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.badge}" rounded: "{rounded.full}" padding: 4px 10px new-tag: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.uppercase-tag}" rounded: "{rounded.full}" padding: 2px 6px amenity-row: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.body-md}" padding: 12px 0 reviews-card: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.body-sm}" host-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.md}" padding: 24px reservation-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: 24px date-picker-day: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.full}" date-picker-day-selected: backgroundColor: "{colors.ink}" textColor: "{colors.on-dark}" rounded: "{rounded.full}" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: 14px 12px height: 56px footer-light: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" padding: 48px 80px footer-link: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.body-sm}" legal-band: backgroundColor: "{colors.canvas}" textColor: "{colors.muted}" typography: "{typography.caption-sm}"

概述

Airbnb 是面向消费市场的、以摄影为视觉核心的、慷慨型市场平台的典范。基础画布是纯白（{colors.canvas} — #ffffff），搭配深近黑墨色（{colors.ink} — #222222）用于标题与正文，并以单一的Rausch（炽红）（{colors.primary} — #ff385c）承载每一个主要 CTA、搜索按钮球体、收藏状态，以及内联品牌链接。主线营销页面中不存在第二品牌色——Luxe 紫（{colors.luxe} — #460479）和 Plus 洋红（{colors.plus} — #92174d）这两个令牌仅作为子品牌点缀色，只在 Airbnb Luxe / Plus 的语境下出现。

字体采用 Airbnb Cereal VF（Airbnb 授权使用的定制可变字体），回退到历史上自研的 Circular，再之下是系统字体栈。Cereal 以克制的字重运行——显示标题在 22–28px、500–600 字重之间，而不是金融或企业系统所偏好的 700+ 重磅。首页 h1（"Inspiration for future getaways"）只有 28px / 700，这在典型 SaaS 页面中会显得偏小；但在此处是可行的，因为布局依靠摄影（城市拼贴、房源卡片）而非字体力度来承载视觉重量。

形态语言是柔和的。按钮使用 8px 圆角（{rounded.sm}），房源卡片约 14px（{rounded.md}），搜索栏为完整胶囊形（{rounded.full}），心愿单爱心与搜索按钮球为圆形（{rounded.full}），分类条圆角为 32px（{rounded.xl}）。除了正文栅格本身，几乎没有任何硬直的拐角——每一个交互元素都是圆润的。

关键特征：

• 单一点缀色：{colors.primary}（#ff385c — "Rausch"）承载每一个主要 CTA、搜索按钮球、收藏状态，以及品牌字标。使用克制——大多数页面 90% 是白色 + 墨色，仅有一两处 Rausch 时刻。
• 定制可变字体：Airbnb Cereal VF。显示字重位于 500–700，正文 400。克制的字重是有意为之——系统将视觉份量托付给摄影。
• 三大产品顶部导航：Homes、Experiences、Services——每个均配有手绘风 32px 图标和 "NEW" 徽标（{component.new-tag}），标示新两个产品。激活标签使用下划线分隔（{component.product-tab-active}）。
• 胶囊形全局搜索栏：白色表面，完整圆角（{rounded.full}），由 1px 细线划分为 Where / When / Who 三段，并以一个圆形 Rausch 搜索按钮球（{component.search-orb}）收尾。
• 房源卡片以图片为先：等高比的矩形图片带 {rounded.md} 圆角裁切，图片轮播点叠层覆盖，左上角浮置"Guest favorite"徽标，右上角爱心图标，下方为 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 基准间距系统，主要章节为 {spacing.section}（64px）——慷慨但不到杂志留白的程度；市场的密度需要在每次滚动中容纳更多卡片。

配色

品牌与点缀

• Rausch（{colors.primary} — #ff385c）：唯一的品牌色。用于主要 CTA 背景（Reserve、Continue）、搜索按钮球、房源卡片的收藏状态，以及内联品牌链接。消费旅行领域最具辨识度的颜色。
• Rausch Active（{colors.primary-active} — #e00b41）：按下/指针按下变体——略更饱和。用于 {component.button-primary-active}。
• Rausch Disabled（{colors.primary-disabled} — #ffd1da）：用于禁用 CTA 的浅色调。
• Luxe 紫（{colors.luxe} — #460479）：Airbnb Luxe 的子品牌点缀色。仅出现在 Luxe 品牌表面——不在主线营销中出现。
• Plus 洋红（{colors.plus} — #92174d）：Airbnb Plus 的子品牌点缀色。作用域同 Luxe——仅用于子产品。

表面

• Canvas（{colors.canvas} — #ffffff）：每个公开页面的默认页面底色。Airbnb 在公网没有深色模式。
• Surface Soft（{colors.surface-soft} — #f7f7f7）：最浅的填充——用于禁用字段、子导航悬停背景，以及内联搜索筛选条。
• Surface Strong（{colors.surface-strong} — #f2f2f2）：稍重一些的填充——圆形图标按钮表面（如面包屑返回箭头与房源列表工具栏按钮）。

细线与边框

• Hairline（{colors.hairline} — #dddddd）：默认的 1px 边框色调——搜索栏分隔线、表格分隔符、页脚栏分隔、卡片 1px 边框。
• Hairline Soft（{colors.hairline-soft} — #ebebeb）：用于长滚动编辑型正文分隔的更细分隔线。
• Border Strong（{colors.border-strong} — #c1c1c1）：更重的描边，用于禁用轮廓按钮以及表单输入聚焦后的边框。

文本

• Ink（{colors.ink} — #222222）：浅色表面上的主导文字色。显示标题、正文段落、主要导航链接，以及大多数内联链接文字。从不使用纯黑。
• Body（{colors.body} — #3f3f3f）：用于长篇评价与配套说明等正文中的次级文字色——避免墨色过于厚重。
• Muted（{colors.muted} — #6a6a6a）：城市链接块中的子标题（"Cottage rentals"、"Villa rentals"）、非激活的产品标签、页脚栏子标签、"View all"链接。
• Muted Soft（{colors.muted-soft} — #929292）：禁用链接文字。使用非常克制。
• Star Rating（{colors.star-rating} — #222222）：与 Ink 同一令牌——Airbnb 的星形图标和 "4.81" 评分数字都使用墨色而非黄/金色渲染，这是有意的品牌选择（在旅行语境中黄色星形显得廉价）。
• On Primary（{colors.on-primary} — #ffffff）：Rausch CTA 上的白色文字。

语义

• Error（{colors.primary-error-text} — #c13515）：表单校验的内联错误文字。与 Rausch 区分——略更深、更饱和的红色。
• Error Hover（{colors.primary-error-text-hover} — #b32505）：链接悬停时加深。
• Legal Link Blue（{colors.legal-link} — #428bff）：法律文案（隐私、条款）中的内联链接。仅在法律子栏中使用。

蒙层

• Scrim（{colors.scrim} — #000000，50% 不透明度）：全局模态背景色——日期选择器、登录对话框、语言切换器。存储为基础十六进制色，不透明度在渲染时设置。

字体排版

字体族

系统通篇使用 Airbnb Cereal VF——显示、正文、导航、说明、微文案。回退栈依次为 Circular, -apple-system, system-ui, Roboto, 'Helvetica Neue', sans-serif。Circular 是历史自研字体，仍作为非可变字体的首选回退；之后由系统字体栈兜底。

没有单独设置显示字族。可变字体承担了整个字号体系。

层级

设计原则

显示字重保持克制。首页 h1 在 28px / 700 是有意调小——它伏在搜索栏下方，让摄影与城市链接栅格承担视觉层级。房源详情 h1 在 22px / 500 更加含蓄；上方由房源横幅图片完成视觉担纲。

整个系统中唯一一个在字体上"重音"的时刻是房源详情页的评分显示（{typography.rating-display} — 64px / 700）。这是系统中唯一一处完全依靠字体本身承担层级的地方——评分数字是信任信号的峰值，因此被赋予最响亮的呈现。

字体替代说明

如果 Airbnb Cereal VF 与 Circular 都不可用，Inter 是最接近的开源替代品。将显示标题的行高下调约 2%，以匹配 Cereal 略紧的字面高度；其他比例可平移。

布局

间距系统

• 基础单位： 4px（含 2px 微调）。
• 令牌： {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。
• 章节内边距（垂直）： {spacing.section}（64px）用于主要页面板块；比典型 SaaS 营销页面（80–96px）更紧，因为市场页面需要在每次滚动中容纳更高密度的卡片。
• 卡片内边距： {spacing.lg}（24px）用于 {component.host-card} 与 {component.reservation-card}；{spacing.base}（16px）用于房源卡片元信息块；{spacing.sm}（8px）用于说明/日期行间距。
• 栏间距： 首页城市栅格卡片之间 {spacing.base}（16px）；页脚栏内 {spacing.lg}（24px）；密集分类条分隔 {spacing.xs}（4px）。

栅格与容器

• 最大内容宽度： 首页与编辑页约 1280px 居中。房源详情页封顶约 1080px，以保证图片横幅与预订栏的可读性。
• 首页页脚城市链接栅格： 桌面端 6 栏，每格包含 {typography.title-md} 的城市名与 {typography.body-sm} 静音色类别子标签。
• 房源详情： 双列，照片/配套左侧（约 64% 宽），右侧粘性预订卡片（{component.reservation-card}，约 32%）。
• 页脚： 桌面端 3 列链接列表（Support / Hosting / Airbnb），移动端折叠为 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——用于房源卡片指针悬停、静态搜索栏、下拉菜单（账户菜单、语言切换器、日期选择器）。整个系统中就这一条阴影定义。
• 模态蒙层： {colors.scrim} 渲染为 50% 不透明度——全局模态背景。用于日期选择器、登录对话框、语言切换器。

没有递进的层次等级——系统要么使用这一档阴影，要么完全不用。深度来自摄影、白底白面的表面区分，以及圆角裁切，而非叠加阴影。

组件

按钮

button-primary — Rausch 填充、白色文字、8px 圆角、14×24px 内边距、48px 高、字重 500。系统中最高频的 CTA："Reserve"、"Continue"、"Search"，以及账户流程主按钮。

button-primary-active — 按下态。背景切换为 {colors.primary-active}。无变换、无阴影变化。

button-primary-disabled — 浅 Rausch 色调 #ffd1da，白色文字。鼠标光标 not-allowed。

button-secondary — 白色填充，墨色文字，1px 墨色描边。8px 圆角。用于 "Save"、"Cancel"，以及 Rausch 表面上的反向 CTA。

button-tertiary-text — 纯墨色文字，无表面无边框。悬停时加下划线。用于 "Show more" 类链接以及模态关闭标签。

button-pill-rausch — 胶囊形 Rausch CTA，用于精选单元（如 "Become a host" 子 CTA）——9999px 圆角、10×20px 内边距、14px 标签。

搜索表面

search-bar-pill — 标志性的全局搜索栏。白色填充、9999px 圆角、64px 高、1px 细线 1px 阴影边框。内部由垂直细线划分为 {component.search-field-segment} 单元格（Where / When / Who）。每段上部为 {typography.caption} 的大写说明标签，下部为占位文字。

search-orb — 位于搜索栏右端的圆形 Rausch 球体。48×48px，全圆，白色放大镜图标居中。是首页上最热的单一色彩时刻。

顶部导航

top-nav — 白色表面、80px 高、底部 1px 细线。Airbnb 字标贴左对齐，三个产品标签（Homes / Experiences / Services）水平居中，账户功能（房东链接、语言地球图标、账户菜单）贴右对齐。

product-tab-active — {typography.nav-link} 的墨色标签，32px 手绘风图标，下方 2px 墨色下划线。

product-tab-inactive — 静音色标签，配手绘图标，无下划线。点击激活。

new-tag — 一个微小的圆角胶囊徽标（{rounded.full}），锚定在图标右上角，承载 {typography.uppercase-tag}（8px / 700、0.32px 字距、大写）的 "NEW" 标签。用于 Experiences 与 Services 以标示新近推出。

房源卡片

property-card — 以图片为先的卡片。1:1 长宽比图片带 {rounded.md} 圆角裁切，图片轮播指示点叠层覆盖，左上角浮置 "Guest favorite" 徽标（{component.guest-favorite-badge}），右上角爱心图标（{component.icon-button-circle}，默认描边状态，收藏后填充为 Rausch）。图片下方：4–5 行元信息——标题（{typography.title-md}）、距离/日期（{typography.body-sm} 静音色）、价格（"$X night"）右对齐。

property-card-photo — 卡片中的图片板本身，被单独抽为令牌，因为部分表面（心愿单、搜索结果）会复用纯图片而不带元信息块。

experience-card — 用于体验列表的更高长宽比卡片（4:5）。同样的 {rounded.md} 裁切，左上角浮置 "NEW" 徽标，右上角爱心，下方为单行标题。

guest-favorite-badge — 白色圆角胶囊（{rounded.full}），11px / 600 字重。浮置于图片之上，应用系统中唯一一档阴影以营造层级。

房源详情

rating-display-card — 标志性的房源详情时刻。一个 64px / 700 的评分数字（"4.81"），左右各配以微小的月桂花环 SVG 装饰。评分下方："Guest favorite" 标语以及一行墨色统计栏。系统中最大的字体力度。

amenity-row — 单列的配套图标 + {typography.body-md} 墨色标签列表。12px 行内边距，行间无边框；该区段由上下两道 1px 细线分隔封闭。

reviews-card — 双列评价摘录网格。每列顶部为作者行（头像、姓名、日期），下方为 3 行摘录与 "Show more" 三级链接。

host-card — 白色卡片，{rounded.md} 圆角、24px 内边距，包含房东头像、姓名、"Superhost" 徽标、响应率统计，以及一个 "Contact host" {component.button-secondary}。

reservation-card — 房源详情页右侧的粘性卡片。白色表面、{rounded.md} 圆角、1px 细线边框、1px 阴影层级、24px 内边距。包含：每晚价格（{typography.display-md} 墨色）、日期范围选择器、人数步进器、全宽 "Reserve" 主要 CTA，以及下方 {typography.body-sm} 的费用明细堆栈。

日期选择器

date-picker-day — 40×40px 圆形单元，承载 {typography.body-sm} 的日号。默认状态为透明填充、墨色文字。

date-picker-day-selected — 墨色填充、白色文字、完整圆形（{rounded.full}）。两个选中日之间的范围状态使用 {colors.surface-soft} 椭形背景连接。

表单

text-input — 白色表面、1px 细线描边、{rounded.sm} 8px 圆角、56px 高、14×12px 内边距。标签在上方堆叠（{typography.caption} 静音色），占位文字 {typography.body-md} 静音色。聚焦时边框加粗至 2px 墨色且边框色切换为 {colors.ink}——无光晕、无环。

页脚

footer-light — 白色表面（与页面画布一致——Airbnb 没有对比页脚），48×80px 内边距。三栏链接块（Support / Hosting / Airbnb），以 24px 栏间距分隔。每栏顶部为 {typography.title-sm} 墨色标签，下方堆叠 {component.footer-link} 行（{typography.body-sm} 墨色）。

legal-band — 页脚栏下方的底部条带，包含版权行、语言切换器（地球图标 + "English (US)" 链接）、货币选择器，以及社交图标（Facebook、X、Instagram）。所有文字为 {colors.muted} 静音色 + {typography.caption-sm}。

响应式行为

触控目标

• 主要 CTA 最小 48×48px（高于 WCAG AAA）。
• 搜索按钮球为 48×48px 圆形——页面上点击频率最高的元素。
• 收藏按钮为 32×32px 圆形——处于 AAA 边缘，但通过卡片内部 12px 内边距弥补。
• 日期选择器日期单元为 40×40px 圆形。

折叠策略

• 顶部产品标签在 744px 以下折叠为汉堡面板。
• 搜索栏的 3 段折叠为单一可点击入口，在移动端打开全屏搜索面板。
• 房源与城市链接栅格在每个断点干净地减少列数——绝不重排行，只减列。
• 房源详情的预订卡片从右侧粘性栏切换为移动端底部粘性条，仅承载 "Reserve" CTA + 每晚价格摘要。

已知缺口

• 悬停状态颜色： 按全局无悬停策略有意未文档化——Airbnb 房源卡片的实际 :hover 样式是轻微的浮起效果，但精确提取不可靠。
• 加载状态 / 骨架屏： 在已提取的表面上未出现。
• 地图视图样式： 搜索结果地图使用 Mapbox 调色瓦片与自定义 Rausch 标记；此处未捕获。
• 表单输入错误状态： 错误文字颜色（{colors.primary-error-text}）已记录，但校验失败时输入边框 + 帮助文字的完整组合在捕获的表面上未出现。
• 子品牌色板： Luxe（{colors.luxe}）与 Plus（{colors.plus}）作为令牌记录，但其完整子系统（字体排版覆写、表面处理）位于独立的子域名，未捕获于此。