精選 · 開放 · 免費
A-COLD-WALL*
工業粗獷主義奢華時裝電子商務
fashionstreetwear
01
設計氣質 DNA
工業風粗獷主義街頭服飾極簡高級感
混凝土建築結合高級時裝
02
色彩
#FFFFFFInk
#000000BG
#2B2B2BMuted
rgba(0,0,0,1)Line
高對比單色調，以影像驅動強調色
03
字型
grotesque-sans
- display
56px · 500 - display-sm
26px · 500 - body
12px · 500 - body-lg
16px · 500
所有文字元素使用 NeueHaasDisplay · 多數元素的預設字重為 500 · 大量使用大寫轉換於導覽與行動呼籲 · 小型介面文字採用緊湊行高（1.16）
04
間距
4px
8px
12px
16px
24px
32px
48px
64px
96px
與工業粗獷主義美學一致，採用緊湊間距
05
表面 (圓角 / 陰影 / 邊線)
sm · 0px
md · 0px
lg · 0px
pill · 999px
0px solid transparent — 最小化可見邊框的使用
rgba(0, 0, 0, 0.3) 0px 0px 24px 0px
06
版面
1440container
12columns
24pxgutter
768 / 1024breakpoints
全出血主視覺影像，搭配最小化的介面覆蓋層
07
動效與互動
200msmicro
400mssmall
600msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
所有互動元素皆具備平滑過渡效果（0.2秒 ease-in-out） · 內容載入時的透明度淡入效果（1秒） · 細微的背景色彩轉換（0.6秒）
細微的色彩反轉或透明度變化 · 透過狀態變化提供立即視覺回饋
08
組件
- button 簡潔的大寫文字按鈕，無背景或邊框，僅懸停狀態變化
- card 產品卡片採用全出血影像與極簡文字覆蓋
- chip 不適用 — 在此設計中，資訊格並非主要元件
- input 極簡文字輸入框，僅採用底部邊框樣式
- hero 全視野電影級攝影，搭配大型、左對齊字型
09
文案語氣與禁用清單
- 語氣 極簡、直接且具權威感
- 標題風格 簡短、有力、大寫短語
- 按鈕文案 簡潔、命令式文字（例如：「立即選購」、「關閉」）
- 不要在卡片或按鈕上使用圓角 — 截圖顯示銳利、有稜角的邊緣
- 不要使用多色彩組合 — 截圖顯示嚴謹的黑白單色調
- 不要使用輕盈或通透的背景 — 截圖顯示以黑色為主導的背景
- 不要使用裝飾性或手寫體字型 — 截圖顯示嚴謹的 grotesque-sans 字型
- 不要將所有文字置中對齊 — 截圖顯示導覽與標題採用強烈的左對齊
- 不要使用繁複的邊框或分隔線 — 截圖顯示元素間採用簡潔、無邊框的分隔
- 避免: 避免裝飾性元素
- 避免: 避免複雜的介面模式
- 避免: 避免過多的文字描述
- 避免: 避免鮮豔或活潑的色彩組合
- 避免: 避免華麗的字型
- 避免: 避免在主要容器上使用圓角
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
A-COLD-WALL* 是一個具有粗獷主義工業美學的高級街頭服飾品牌。該網站使用嚴謹的單色調色盤，以深黑（#000000）與純白（#FFFFFF）字型為主。設計特色在於採用中等字重（500）的大寫 grotesque-sans 字型（NeueHaasDisplay），營造出鮮明、建築感的視覺體驗。主要色彩包括用於背景的 #000000 與用於主要文字的 #FFFFFF，而 #2B2B2B 則用於次要的介面元素。版面配置極簡，採用全出血攝影搭配最小化的介面框架。關鍵設計規則：絕不在主要介面元素（膠囊按鈕除外）使用圓角，絕不引入核心調色盤之外的色彩，導覽與標題始終保持嚴格的左對齊。整體體驗精緻、具編輯感，並透過高對比攝影專注於視覺敘事。
en · zh-CN · zh-TW · ja · ko