01
设计气质 DNA
极简编辑风格高端时尚材质聚焦
一个宁静的高端面料画廊
02
色彩
#000000Ink#FCFCFCBG#F7F6F3BG soft#ECEBE9BG quiet#9B9B9AMutedrgba(0,0,0,0.12)Line中性、高调的色板，让产品摄影提供所有的色彩和质感。
03
字体
- display
48px · 400 - headline
32px · 400 - body
14px · 400
所有文字使用统一的几何无衬线字体（ABCDiatype），字重为400。 · 品牌标志采用宽间距的大写字母间距设置。 · 正文采用稍宽的字母间距（0.4px）以增强可读性。
04
间距
4px8px16px20px24px32px48px64px96px通过主视觉图像与内容区域之间充足的内边距（398px至70px）来维持垂直节奏。
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 100px
所有交互元素和容器边界使用1px实线黑色边框，形成清晰的结构定义。
rgba(0,0,0,0.2) 0px 0px 18px 0px · rgba(0,0,0,0.3) 0px 12px 60px 0px · rgba(0,0,0,0.05) 0px 0px 2px 1px
06
布局
1440container
4columns
20pxgutter
768 / 1024breakpoints
全出血的主视觉图像搭配四列产品网格，保持统一的20px间距。
07
动效与交互
220msmicro
400mssmall
500msmedium
cubic-bezier(0.215, 0.61, 0.355, 1)easing
为“保持联系”模态窗口等覆盖层使用平滑的透明度和可见性过渡（0.5秒）。 · 使用标准cubic-bezier进行宽度和max-width过渡（0.4秒），用于UI元素显现。
细微的颜色偏移或透明度变化，保持网站的整体克制感。 · 通过页面过渡或模态窗口显现提供即时反馈。
08
组件
- button 药丸形轮廓按钮，黑色文字，透明背景，使用100px的border-radius。
- card 极简卡片，包含大型产品图片和下方小号的左对齐标题，由细边框分隔。
- chip 用于产品变体选择的小型颜色样本（黑色、米色、炭灰色、白色）。
- input 干净的文本输入框，边框最小化，通常伴有黑色下划线或边框。
- hero 桌面端为分屏主视觉区，图像占据约60%宽度；移动端切换为全宽显示。
09
文案语气与禁用清单
- 语气 宁静、精致且信息丰富，体现对材质质量和工艺的关注。
- 标题风格 清晰、描述性且通常带有技术性（例如“有机羊毛2/80热带”）。
- 按钮文案 直接且功能性强（例如“购买”、“加入邮件列表”、“阅读更多”）。
- 不要使用高饱和度的强调色——色板严格为单色和中性。
- 不要使用粗重的字重——所有可见文字的字重均为400。
- 不要使用复杂的装饰性背景——设计依赖于干净的摄影和留白。
- 不要在主要UI元素上使用圆角——网站大多数容器使用直角，仅按钮保留药丸形。
- 不要让界面杂乱——布局在所有元素之间保持充足且有意识的间距。
- 不要使用繁忙或多彩的色板——产品颜色和摄影是唯一的色彩变化来源。
- 避免: 响亮的营销术语
- 避免: 侵略性的销售语言
- 避免: 过度使用感叹号
- 避免: 分散对材质规格关注的模糊、华丽描述
10
包内真实截图
11
System Prompt
MARKAWARE是一个高端日本时尚品牌，拥有精致、编辑风格的电商网站。其视觉识别建立在中性、高调的色板（背景：#FCFCFC，墨色：#000000，柔和色：#9B9B9A）之上，让高质量的产品摄影成为焦点。排版仅使用几何无衬线字体（ABCDiatype），字重400，通过充足的字母间距营造精致感。布局干净且结构化，采用四列网格，间距为20px，容器和按钮使用锐利的1px黑色边框。关键元素包括药丸形轮廓按钮（100px border-radius）和极简、图像为主的产品卡片。关键规则：绝不使用高饱和度强调色，绝不使用粗重的字重（超过400），绝不使用不必要的装饰元素使界面杂乱。优先考虑呼吸空间和结构清晰度，以维持品牌宁静、高端的美学。