精選 · 開放 · 免費
Merit
採用編輯版面的極簡高端美妝品牌。
beauty
01
設計氣質 DNA
極簡毫不費力編輯風格精緻
精心編排的雜誌跨頁
02
色彩
#000000Ink
#333333Ink soft
#FFFFFFBG
#FAF9F7BG soft
#62605EMuted
rgba(0, 0, 0, 0.1)Line
黑與白的高對比,搭配溫潤、柔和的灰色。
03
字型
didone-serif · grotesque-sans
- display
48px · 400 - subtitle
13px · 400 - body
16px · 400
Didone 衬線字體用於優雅的展示標題 · 乾淨的 grotesque 無衬線字體用於導覽與內文 · 標籤使用大寫字母與字間距調整
04
間距
4px
8px
12px
16px
24px
40px
64px
80px
充裕
05
表面 (圓角 / 陰影 / 邊線)
sm · 0px
md · 0px
lg · 0px
pill · 999px
主按鈕使用 1px 實心黑色邊框
06
版面
1440container
12columns
24pxgutter
768 / 1024breakpoints
分割螢幕首頁,內容使用標準網格
07
動效與互動
200msmicro
400mssmall
600msmedium
cubic-bezier(0.19, 1, 0.22, 1)easing
影像使用平滑的透明度與變形淡入淡出 · 互動狀態使用細膩的線性過渡
細微的透明度降低 · 標準指標
08
組件
- button 低調的文字式行動呼籲或實心黑色按鈕
- card 無邊框,影像延伸至邊緣
- input 簡單的底線或極簡邊框
- hero 全寬編輯風格分割版面,搭配大型影像與襯線標題
09
文案語氣與禁用清單
- 語氣 精緻且直接
- 標題風格 簡短、引人遐思的衬線字體短語
- 按鈕文案 極簡且以行動為導向
- 勿使用明亮的霓虹色 — 調色板嚴格限定為黑、白與柔和的暖灰色。
- 勿使用過度圓潤的倒角 — 設計偏好銳利或非常細微的圓角。
- 勿在展示標題中使用無衬線字體 — 主要的標題風格是優雅的 didone 衬線字體。
- 勿建立雜亂的版面 — 保持充裕的留白與呼吸空間。
- 勿在主要元素上使用投影 — 設計是平面的,並倚賴字體層次建立結構。
- 勿在內文中使用全大寫 — 全大寫保留給簡短的標籤與導覽使用。
- 避免: 驚嘆號
- 避免: 推銷術語
- 避免: 雜亂的 UI
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
設計一個靈感來自編輯雜誌跨頁的極簡、高級電商介面。版面採用嚴格的黑白調色板,搭配柔和、溫潤的米白色背景。使用 didone 衬線字體作為富有表現力的標題,並使用乾淨的 grotesque 無衬線字體作為內文與 UI 元素。確保有充裕的留白,避免讓視覺區域顯得擁擠。關鍵限制:絕不在主要卡片或按鈕上使用投影,保持互動狀態的細膩感,並維持高端美妝品牌優雅、精緻的語調。
en · zh-CN · zh-TW · ja · ko