精選 · 開放 · 免費
Telfar
極簡主義、攝影驅動的時尚電子商務，專注於大膽、平價的奢華風格。
fashion
01
設計氣質 DNA
極簡主義都市風平價奢華標誌性NYC
一個乾淨、實用的精品店，產品是主角
02
色彩
#000000Ink
#FFFFFFBG
#F2F2F2BG quiet
#1F1F1FMuted
rgba(0, 0, 0, 0.1)Line
高對比的極簡主義，讓產品攝影主導視覺
03
字型
grotesque-sans
- display
56px · 400 - body
16px · 400
大多數 UI 元素使用統一字重 · 確保緊湊的文字區塊有適當的行高 · 標籤與徽章謹慎使用大寫字母
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
一致的 4px 基礎網格，搭配標準的電子商務間距
05
表面 (圓角 / 陰影 / 邊線)
sm · 2px
md · 6px
lg · 12px
pill · 999px
卡片與互動元素使用細微的 1px 實心黑邊框
rgba(0, 0, 0, 0.01) 0px 0px 10px 0px
06
版面
1440container
12columns
24pxgutter
768 / 1024breakpoints
非對稱瀑布流或雙欄網格，用於產品展示
07
動效與互動
150msmicro
300mssmall
600msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
懸停狀態下的流暢縮放過渡 · 彈出視窗與覆蓋元素的淡入效果
細微的透明度變化或背景顏色過渡 · 即時的視覺回饋，搭配極簡動畫
08
組件
- button 極簡的膠囊形或矩形按鈕，帶有細微邊框
- card 乾淨的白色卡片，帶有細微邊框，用於產品分組
- chip 簡潔的文字導覽分頁
- input 標準的文字輸入框，帶有清晰標籤
- hero 大型、全寬的攝影橫幅，帶有極簡的文字覆蓋
09
文案語氣與禁用清單
- 語氣 自信、直接且內斂
- 標題風格 清晰且具資訊性，常陳述顏色或產品類型
- 按鈕文案 簡潔、行動導向的文字，如「查看全部」或「管理偏好設定」
- 不要使用裝飾性漸層——截圖顯示為純色背景
- 不要大量使用投影效果——截圖顯示僅有一個非常細微的 box-shadow
- 不要使用粗重的字重——截圖顯示偏好使用字重 400
- 不要在 UI 中使用鮮豔的強調色——截圖顯示沒有主導的強調色
- 不要在所有地方使用圓角——截圖顯示主要為銳角或輕微圓角
- 不要用圖示讓 UI 變得雜亂——截圖顯示標題列使用極簡的圖示集
- 避免: 過多的促銷語言
- 避免: 裝飾性元素
- 避免: 鮮豔的色彩組合
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
Telfar 是一個極簡主義的時尚電子商務網站，具有乾淨、實用的美學。它使用純白 (#FFFFFF) 與黑 (#000000) 的高對比色盤，讓大膽的產品攝影主導視覺空間。字型依賴 grotesque-sans-serif (Neue Haas Grotesk Text Pro)，專注於可讀性與清晰的線條。關鍵的設計限制包括避免使用厚重的陰影、過多的裝飾元素或鮮豔的強調色，以免與產品競爭。佈局寬敞且基於網格，透過大型、清晰的影像與極簡的介面細節來強調標誌性的「Shopping Bag」產品系列。
en · zh-CN · zh-TW · ja · ko