精選 · 開放 · 免費

Diptyque

一個為奢華巴黎香氛品牌打造的、以編輯為首的優質電子商務體驗，以寬裕的留白、精緻的攝影與內斂的字體排印為特色。

01

設計氣質 DNA

一個策展的工藝香氛廊，每件產品都如同珍貴的文物，陳設於自然、具質感的背景之中。

02

色彩

高對比的單色 UI（黑底白字），完全讓步於編輯攝影中豐富的自然色彩調色盤。

03

字型

transitional-serif · geometric-sans

• display32px · 400
• body14px · 400
• caption12px · 400

使用過渡襯線體作為引人共鳴的標題，以建立優雅感。 · 使用幾何無襯線體作為所有功能性 UI 文字與導覽，以確保清晰度。 · 內文字號保持 14px，以維持編輯式、不雜亂的感受。

04

間距

寬裕的留白與內距定義了版面，營造出奢華與寧靜感。垂直節奏主要透過大型區塊分隔線與圖片邊距來建立。

05

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

極簡、乾淨的邊框，使用 rgba(229, 231, 235, 1)。按鈕使用 1px 實線邊框與直角，除了偶爾使用的膠囊形輸入框。

none · 互動元素上使用 inset 0px -2px 0px 0px rgba(0, 0, 0, 1)

06

版面

全出血的主視覺影像過渡至寬大邊距的置中內容區塊。網格使用克制，主要用於產品輪播，依賴單欄編輯式版面以產生衝擊力。

07

動效與互動

選單覆蓋層與橫幅的平滑透明度過渡。 · 互動元素懸停狀態的細微緩動。 · 輪播中物件定位的標準線性過渡。

文字底線或按鈕的細微邊框過渡。 · 立即狀態變更，無厚重的回饋動畫。

08

組件

• button 銳利、矩形的外框，1px 黑色邊框，大寫或混合大小寫的襯線文字，無填充。除膠囊變體外，無圓角。
• card 圖片為先的卡片，極簡 UI；文字通常置於影像邊界之外，採用乾淨、非結構化的佈局。
• chip 未顯著使用。
• input 極簡的輸入框，配以簡單的黑色邊框，著重於乾淨的線條，無厚重背景填充。
• hero 主導性的全出血攝影橫幅，配以覆蓋或置中的 CTA 按鈕。

09

文案語氣與禁用清單

• 語氣 引人共鳴、精緻且略帶詩意，典型於奢華香氛的行銷風格。
• 標題風格 簡短、描述性且優雅的詞句，重在營造氛圍而非硬性推銷。
• 按鈕文案 低調，常以裝飾性圓點或句點框飾，引導探索而非強迫行動。

• 不要在按鈕上使用圓角 — 截圖顯示為銳利的矩形邊框
• 不要在卡片或元素上使用陰影 — 截圖顯示為平面、以邊框區隔的設計
• 不要使用明亮、高飽和的強調色 — 截圖顯示為嚴格的單色 UI，色彩僅來自攝影
• 不要使用密集的文字版面 — 截圖顯示為寬裕的留白與簡短、引人共鳴的文案
• 不要使用厚重、粗體的無襯線字體作為標題 — 截圖顯示為精緻的襯線字體作為展示文字
• 不要使用俏皮或圓潤的字體排印 — 截圖顯示為結構化、邊緣銳利的優雅字體
• 避免: 避免過度銷售性的語言或驚嘆號。
• 避免: 避免密集的段落或厚重的文字區塊。
• 避免: 避免刺眼、明亮的強調色。
• 避免: 避免雜亂的版面或繁忙的 UI 元素。
• 避免: 避免俏皮或非正式的語氣。
• 避免: 避免厚重的陰影或複雜的漸層。

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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