精選 · 開放 · 免費

Ilia

簡約的攝影美妝電商，採用暖色調中性色與精緻排版。

01

設計氣質 DNA

陽光畫廊中的簡約美妝櫃

02

色彩

暖色調中性色主導背景，深棕色作為主要前景色，營造高對比但柔和的美感。

03

字型

geometric-sans · humanist-sans · ui-monospace

• display40px · 400
• body16px · 400

導覽與按鈕標籤使用大寫字母 · 大型展示文字使用緊湊字間距 · 混合字體粗細以建立層次強調

04

間距

基於 4 的系統，搭配一致的 16px 欄溝與間距

05

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

1px solid rgb(229, 231, 235) 用於分隔線，2px solid rgb(39, 31, 31) 用於主要按鈕

0px 4px 6px -1px rgba(0, 0, 0, 0.1) · 0px 2px 4px -2px rgba(0, 0, 0, 0.1)

06

版面

浮動視窗覆蓋層，左側居中白色卡片，右側全幅生活風格攝影

07

動效與互動

浮動視窗覆蓋層使用流暢的透明度過渡 · hover 時顏色與背景色過渡 · 互動元素使用變換動畫

顏色與背景色過渡，持續 0.4 秒 · 互動元素使用變換效果

08

組件

• button 深棕色 (#271F1F) 填充按鈕，搭配白色大寫文字，矩形圓角 8px
• card 白色 (#FFFFFF) 浮動視窗卡片，圓角 12px
• chip 類別選擇按鈕採用格狀佈局，間距一致為 8px
• input 截圖中不可見
• hero 全視窗分割佈局，搭配浮動視窗覆蓋層與生活風格產品攝影

09

文案語氣與禁用清單

• 語氣 親切、自信且平易近人
• 標題風格 直接的促銷語言（如「享有85折優惠」）搭配大型幾何無襯線字體
• 按鈕文案 清晰、導向行動的類別標籤，使用大寫字母

• 避免使用深色模式——截圖顯示淺色 #FAF7F8 背景
• 避免使用明亮強調色——截圖顯示單色暖色調中性色
• 避免使用手寫或裝飾性字體——截圖顯示簡潔的幾何與人文無襯線字體
• 避免使用厚重的投影——截圖顯示低透明度的細微盒狀陰影
• 避免使用圓角膠囊按鈕——截圖顯示矩形按鈕，圓角 8px
• 避免使用複雜佈局——截圖顯示簡潔的居中浮動視窗覆蓋層
• 避免: 避免使用明亮飽和的顏色
• 避免: 避免使用裝飾性手寫字體
• 避免: 避免使用深色模式
• 避免: 避免使用複雜的漸層
• 避免: 避免使用強烈的陰影
• 避免: 避免使用霓虹或螢光色調

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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