workbuddy_skills/open-design/design-systems/airbnb/DESIGN-zh-tw.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 在提取的產品介面中未發布原生深色模式；本文件僅描述單一淺色模式主題。