精選 · 開放 · 免費

Aather

一個為頂級居家香氛打造的、精緻雜誌風格的電商體驗。

01

設計氣質 DNA

為一個精品香氛蠟燭品牌製作的高端編輯式版面。

02

色彩

以克制、單色調為基底，搭配溫暖的攝影色調與柔和的沙棕色點綴。

03

字型

transitional-serif · humanist-sans

• display56px · 200
• h132px · 200
• body20px · 100
• small13px · 300

所有大尺寸的展示文字使用過渡襯線體。 · 導覽列、按鈕與功能性 UI 元素使用人文無襯線體。 · 所有文字保持非常輕的字重（100-300）。 · 統一應用 0.5px 字母間距以提升可讀性。

04

間距

寬敞、不對稱的版面配置，元素之間留有充足的空白。

05

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

極簡邊框；使用 1px solid rgba(0,0,0,0.5) 進行細微的分隔。

06

版面

全出血首圖，後續接著單欄文字區塊。

07

動效與互動

頁面載入時，細微的透明度與位置淡入淡出效果。 · 文字連結上平滑的滑鼠懸停過渡效果。

細微的透明度變化或底線出現。 · 透過狀態變化提供即時的視覺回饋。

08

組件

• button 帶有 1px 底線的極簡文字連結。
• card 無背景或邊框的純淨攝影卡片。
• chip 小型的大寫無襯線體標籤。
• input 帶有細微底線的純淨無襯線體輸入框。
• hero 帶有大型襯線體文字覆蓋的全出血攝影首圖。

09

文案語氣與禁用清單

• 語氣 詩意、引人聯想且平靜。
• 標題風格 營造氛圍的引人聯想的襯線體句子。
• 按鈕文案 帶有底線的簡單直接文字連結。

• 不要為內文使用粗體字重——截圖顯示的是非常纖細、輕盈的字重（100-300）。
• 不要為 UI 元素添加厚重的陰影——截圖顯示的是完全平坦的表面。
• 不要為元件使用圓角——截圖顯示的是銳利的 0px 半徑邊緣。
• 不要使用深色模式——截圖顯示的是以白色與淺色為主的背景。
• 不要使用高彩度、飽和的強調色——截圖顯示的是柔和、大地色調的沙棕色強調色。
• 不要讓版面因元素而顯得擁擠——截圖顯示的是充足的空白與極簡的排列。
• 避免: 強勢的銷售用語
• 避免: 響亮的驚嘆號
• 避免: 密集、厚重的文字區塊

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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