精选 · 开放 · 免费
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）排版为主。设计特点在于使用大胆、大写的 grotesque-sans 字体（NeueHaasDisplay），字重中等（500），营造出鲜明、建筑般的视觉感受。关键颜色包括用于背景的 #000000 和用于主要文本的 #FFFFFF，而 #2B2B2B 则用于弱化的用户界面元素。布局极简，以全出血摄影为特色，用户界面元素极少。关键设计规则：从不在主要用户界面元素上使用圆角（药丸形按钮除外），从不向核心调色板引入颜色，并始终对导航和标题保持严格的左对齐。整体体验精致、编辑性强，并通过高对比度摄影高度聚焦于视觉叙事。
en · zh-CN · zh-TW · ja · ko