精選 · 開放 · 免費
Glossier
一個融合極簡設計與俏皮、溫暖攝影的現代 DTC 美妝品牌。
BeautyE-commerceClean
01
設計氣質 DNA
美妝保養極簡俏皮現代
一位友善、極簡的美容編輯，穿著粉色衣服並喝著冰咖啡。
02
色彩
#000000Ink
#101010Ink soft
#FFFFFFBG
#F7F7F7BG soft
#666666Muted
rgba(0,0,0,0.06)Line
以高對比的黑白為基底，搭配柔和的暖中性色，並依賴攝影與粉色產品點綴色來提供色彩。
03
字型
grotesque-sans · monospace
- display
130px · 400 - h1
32px · 500 - body
16px · 400 - small
12px · 400
導覽列與小型標籤使用全大寫 · 展示文字使用緊湊的字距 · 內文保持常規字重以確保可讀性
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
標準 4px 網格，區塊之間擁有大量留白。
05
表面 (圓角 / 陰影 / 邊線)
sm · 0px
md · 0px
lg · 0px
pill · 999px
按鈕與輸入欄位使用細緻的 1px 黑色邊框，無圓角。
06
版面
1440container
12columns
24pxgutter
768 / 1024breakpoints
全寬度的攝影標題區塊，覆蓋著大型字體。
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
彈窗覆蓋層與內容區塊的淡入過渡效果。 · 互動元素的流暢字體大小與透明度過渡。
標準指標游標，可能伴有細微的透明度或色彩過渡。 · 立即回應，並有標準游標回饋。
08
組件
- button 帶有黑色邊框與黑色文字的輪廓式矩形按鈕。
- card 乾淨、無邊框的內容區塊，依賴字體與攝影。
- chip 無可見元件。
- input 帶有 1px 邊框與佔位符文字的簡潔矩形輸入框。
- hero 全出血的生活風格攝影，搭配巨大的白色字體覆蓋層。
09
文案語氣與禁用清單
- 語氣 俏皮、對話式且親密。
- 標題風格 簡短有力，常使用小寫或句子式大小寫，並帶有一絲態度。
- 按鈕文案 直接、以行動為導向，且略帶非正式感（例如：「探索這款造型」）。
- 勿使用鮮豔的霓虹色——截圖顯示嚴格遵循黑、白與柔和粉色的色盤。
- 勿將元件角落圓角化——截圖顯示按鈕與彈窗皆為銳利、方形的邊緣。
- 勿使用陰影來製造層次感——截圖顯示大多數元件為平面、無邊框的設計。
- 勿使用襯線字體——截圖顯示一致使用乾淨的幾何無襯線字體。
- 勿以緊湊的內距擠壓元件——截圖顯示文字與圖片周圍擁有大量留白。
- 勿使用厚重的漸層作為背景——截圖顯示實色與攝影背景。
- 避免: 企業術語
- 避免: 侵略性的銷售用語
- 避免: 過於正式的術語
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是一個乾淨、現代的美妝電子商務網站。其設計 DNA 由鮮明的黑白基底與柔和的粉色點綴所定義。字體使用乾淨的幾何無襯線字體（Apercu 系列），展示文字採用緊湊字距，並以大量留白確保可讀性。版面配置為全出血且以攝影為主，依賴大型生活風格影像而非複雜的 UI 元素。嚴格禁止：請勿在 UI 元件上使用圓角——其美學是銳利且幾何的。請勿引入鮮豔、高彩度的點綴色——色盤嚴格為中性搭配柔和的粉色點綴。請勿使用襯線字體——整個系統建立在乾淨的無襯線字體類別上。互動模型為標準電子商務，並為彈窗與覆蓋層提供流暢的透明度過渡效果。
en · zh-CN · zh-TW · ja · ko