OpenDesign·你的设计资产库

网页参考

A-COLD-WALL*

工业粗野主义奢华时装电商

FashionStreetwear

封面待补录,可通过原站查看设计。

01

设计气质 DNA

工业粗野主义街头服饰极简高端

混凝土建筑遇见高级时装

02

色彩

#FFFFFFInk
#000000BG
#2B2B2BMuted
rgba(0,0,0,1)Line

高对比度单色,强调色由图像驱动

03

字体

grotesque-sans

  • display56px · 500
  • display-sm26px · 500
  • body12px · 500
  • body-lg16px · 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

包内真实截图

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

A-COLD-WALL* 是一个具有粗野主义工业美学的高端街头服饰品牌。该网站采用严格的单色调色板,以深黑色(#000000)和纯白色(#FFFFFF)排版为主。设计特点在于使用大胆、大写的 grotesque-sans 字体(NeueHaasDisplay),字重中等(500),营造出鲜明、建筑般的视觉感受。关键颜色包括用于背景的 #000000 和用于主要文本的 #FFFFFF,而 #2B2B2B 则用于弱化的用户界面元素。布局极简,以全出血摄影为特色,用户界面元素极少。关键设计规则:从不在主要用户界面元素上使用圆角(药丸形按钮除外),从不向核心调色板引入颜色,并始终对导航和标题保持严格的左对齐。整体体验精致、编辑性强,并通过高对比度摄影高度聚焦于视觉叙事。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效,整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明,可复制给 Agent。