精選 · 開放 · 免費
Off-White
一個結合工業美學與高級時裝編輯攝影的高端街頭潮流品牌。
fashionstreetwear
01
設計氣質 DNA
街頭潮流奢華都市高級時裝工業風
高級時裝編輯雜誌與都市街頭文化的結合。
02
色彩
#0019E9Accent
#000000Ink
#6F6F6FInk soft
#F5F5F5BG
rgba(0,0,0,1)Line
高對比的單色調，搭配單一鮮豔的電光藍點綴色用於行動呼籲。
03
字型
geometric-sans · humanist-sans · monospaced
- display
24px · 700 - h1
16px · 600 - body
14px · 400 - caption
11px · 400
04
間距
4px
8px
12px
16px
20px
24px
32px
56px
一致的 4px 網格，UI 元素採用緊密的內距，編輯佈局則留有寬敞的間隙。
05
表面 (圓角 / 陰影 / 邊線)
sm · 2px
md · 8px
lg · 20px
pill · 999px
使用主要墨水色的細 1px 邊框。
None: None · None: None
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
用於通訊訂閱模態框的分割畫面佈局：50% 攝影編輯內容，50% 乾淨的表單 UI。
07
動效與互動
200msmicro
500mssmall
500msmedium
cubic-bezier(0.4, 0, 0.6, 1)easing
模態框覆蓋層的淡入效果，以及 hover 狀態的平滑過渡。
互動元素上的細微顏色過渡。 · 按鈕與連結上的即時視覺回饋。
08
組件
- button 主要動作採用電光藍實色背景 (#0019E9) 搭配白色文字；次要動作採用白色背景搭配藍色文字。
- card 帶有細邊框與直角的簡約容器。
- chip 帶有圓形輪廓與文字標籤的單選按鈕。
- input 僅帶有底線邊框的簡約文字輸入框。
- hero 大型、高解析度的編輯攝影圖片。
09
文案語氣與禁用清單
- 語氣 自信、獨特且極簡。
- 標題風格 直接、大寫且有力（例如：'加入 OFF-WHITE™ 社群'）。
- 按鈕文案 清晰的祈使動詞（例如：'立即選購'、'接受所有 Cookie'）。
- 避免使用圓角——截圖顯示大多數元素採用銳利的最小圓角 (2px)
- 避免使用俏皮或隨意的字體——截圖使用乾淨的無襯線字體與等寬字體
- 避免使用複雜的調色盤——截圖僅依賴黑、白與單一電光藍
- 避免在所有元素上使用陰影——截圖僅將陰影套用於模態框與覆蓋層
- 避免對長段落文字使用置中對齊——截圖僅偶爾使用靠左對齊與置中對齊
- 避免對文字密集的區段使用多欄佈局——截圖在模態框中偏好乾淨、單欄的可讀性
- 避免: 過度裝飾的元素
- 避免: 過度使用多種顏色
- 避免: 俏皮或隨意的語言
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這個網站是一個高端街頭潮流時裝品牌網站，採用簡約、高對比的美學風格。設計以黑色 (#000000) 與灰白色 (#F5F5F5) 的單色調為主，並以單一鮮豔的電光藍 (#0019E9) 作為高彩度點綴色，用於行動呼籲按鈕與連結。字體主要為乾淨的人文主義無襯線字體用於內文，幾何無襯線字體用於展示，偶爾使用等寬字體於技術或結構細節。關鍵設計特色包括分割畫面的編輯模態框、大型高解析度攝影圖片以及細 1px 邊框。關鍵設計限制：避免按鈕使用圓角，切勿使用超過一種點綴色，並保持強烈、工業現代感。佈局建立在嚴格的網格上，UI 元素採用緊密的間距，編輯構圖則留有寬敞的留白。
en · zh-CN · zh-TW · ja · ko