精選 · 開放 · 免費
Goodfit Us
一個精緻極簡的電商平台，具有強烈的排版存在感與節制的高端美學。
PremiumCleanTypographyCurationReference
01
設計氣質 DNA
精選策展設計導向簡潔精緻優雅
一座策展精良的美術館或精品店櫥窗。
02
色彩
#4E64DFAccent
#151523Ink
#FFFFFFBG
#F4F4F5BG soft
#F3F4F6BG quiet
#E9E9ECMuted
rgba(21, 21, 35, 0.1)Line
以高對比的單色基調為基礎，搭配單一鮮明的藍色強調色用於互動元件。
03
字型
geometric-sans
- display
24px · 700 - body
16px · 400 - body-semibold
16px · 600
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
採用一致的4px網格系統應用於padding與間距。
05
表面 (圓角 / 陰影 / 邊線)
sm · 8px
md · 12px
lg · 20px
pill · 100px
1px solid rgba(21, 21, 35, 0.1) 或實心深色邊框以創造對比
rgba(0, 0, 0, 0.06) 0px 6px 18px 0px · rgba(21, 21, 35, 0.2) 0px 2px 4px 0px
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
標準12欄網格，搭配寬裕留白與置中內容容器。
07
動效與互動
100msmicro
150mssmall
400msmedium
ease-in-outeasing
細微淡入效果 · 平滑背景過渡 · 互動hover狀態
互動元件上的平滑色彩轉換或細微高度變化。 · 透過色彩變化或細微狀態過渡提供即時回饋。
08
組件
- button 藥丸形狀（border-radius: 100px），使用實心強調色或深色背景，搭配高對比的白色文字。
- card 圓角容器（12-20px半徑），具有細微陰影與明確邊框。
- chip 小型圓角標籤或標籤，常帶有深色邊框。
- input 標準文字欄位，具有細微邊框與圓角。
- hero 大型排版展示，搭配醒目影像與明確的行動呼籲。
09
文案語氣與禁用清單
- 語氣 自信、簡潔且精選策展。
- 標題風格 粗體、幾何無襯線字體，字距緊密且高對比。
- 按鈕文案 直接且以行動為導向，常使用藥丸形按鈕。
- 避免使用多種競爭的強調色——截圖顯示單一主導的藍色強調色。
- 避免使用襯線字體作為主要內文——截圖顯示幾何無襯線字體。
- 避免在主要按鈕上使用尖銳的方形圓角——截圖顯示藥丸形、圓潤的按鈕。
- 避免在主要內容區域使用過深或黑色的背景——截圖顯示以白色/淺色為主的背景。
- 避免使用複雜、繁複的背景紋理——截圖顯示乾淨、平面或細微漸層的背景。
- 避免文字與背景之間的低對比度——截圖顯示淺色背景上的高對比深色文字。
- 避免: 雜亂的版面
- 避免: 過於複雜的色彩方案
- 避免: 不必要的裝飾元素
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是一個精緻、極簡的電商平台，具有高端、策展的美學。設計依賴高對比的單色基調（白色背景、深墨色文字）與單一鮮明的藍色強調色（#4E64DF）用於互動元件。排版純粹採用幾何無襯線字體，具有粗體、字距緊密的標題與簡潔的內文。版面寬敞且結構化，採用12欄網格與一致的4px間距增量。關鍵元件如按鈕使用獨特的藥丸形狀（border-radius: 100px）與實心色彩填充。關鍵限制：避免使用多種強調色，絕不使用襯線字體作為UI文字，並避免在主要互動元件上使用尖銳圓角。過渡效果細微而簡短（0.1s-0.15s），專注於平滑的狀態變化而非複雜的動畫。
en · zh-CN · zh-TW · ja · ko