精選 · 開放 · 免費

Airbnb

簡潔、強調信賴感的旅行市集介面，以攝影為核心。

01

設計氣質 DNA

一個連結全球、提供獨特住宿與體驗的社群市集。

02

色彩

以高對比中性色為基底，搭配單一鮮明的品牌強調色。

03

字型

humanist-sans

• display28px · 700
• heading16px · 700
• body14px · 400
• caption12px · 400

04

間距

8px 垂直節奏，搭配充裕的內距。

05

表面 (圓角 / 陰影 / 邊線)

1px solid rgba(0, 0, 0, 0.08)

rgba(0, 0, 0, 0.04) 0px 2px 6px 0px · rgba(0, 0, 0, 0.1) 0px 4px 8px 0px · rgba(0, 0, 0, 0.1) 0px 8px 24px 0px

06

版面

全寬頂部導覽列，中央配置搜尋欄，下方採用多欄卡片網格。

07

動效與互動

hover 狀態下的變形與 box-shadow 過渡效果。 · 輪播時的流暢滑動過渡。

透過 box-shadow 或 opacity 進行微妙的抬升變化。 · 主要按鈕與卡片的縮放變形。

08

組件

• button 藥丸形狀，採用實心黑底白字，或鮮明的圓形粉色搜尋圖示。
• card 以圖片為主的圓角卡片，帶有愛心圖示，下方僅保留極簡文字。
• chip 帶有黑色邊框與白色背景的藥丸形標籤。
• input 大型藥丸形搜尋欄，帶有柔和陰影與顯眼的粉色操作按鈕。
• hero 簡約的導覽列，搭配顯眼的多欄位搜尋小工具。

09

文案語氣與禁用清單

• 語氣 友善、引人入勝且專業。
• 標題風格 直接、清晰且口語化。
• 按鈕文案 以行動為導向且簡潔（例如：開始搜尋）。

• 避免使用深色背景——截圖顯示佈局以白色和淺灰色為主。
• 避免使用襯線字體——截圖顯示整體採用乾淨、現代的無襯線字體。
• 避免使用複雜、多彩的色盤——截圖顯示色盤以單色為主，僅搭配單一粉色強調。
• 避免在卡片上使用銳利的方形圓角——截圖顯示圖片與按鈕皆採用寬鬆的圓角。
• 避免使用厚重、實心的邊框——截圖顯示僅使用非常輕薄、細微的邊框或 box-shadow。
• 避免使用大段、密集的文字區塊——截圖顯示留有充裕的留白，以及簡短、易於掃讀的文字元素。
• 避免: 技術術語
• 避免: 過於正式的語言
• 避免: 強勢的銷售手法

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko