01
设计气质 DNA
高端工业音频工艺极简
展示精心打造音频硬件的高端设计画廊
02
色彩
#4A4A4AInk#FFFFFFBG#F2F2F2BG softrgba(74, 74, 74, 0.12)Line极简的黑白灰调色板，让高质量产品摄影驱动视觉体验
03
字体
- display
52px · 400 - heading
41px · 700 - body-lg
20px · 400 - body
18px · 400 - body-sm
16px · 400
导航与分类标签使用大写转换 · 整体紧凑字间距（负字距） · 单行文本元素的行高与字体尺寸一致
04
间距
4px8px16px20px24px30px48px96px基准4px，倍数主要为4x (16px)、6x (24px) 与 12x (48px)
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 7px
lg · 8px
pill · 9999px
1px solid rgba(74, 74, 74, 0.12)
rgba(0, 0, 0, 0.5) 0px 5px 15px 0px
06
布局
1440container
12columns
24pxgutter
768 / 1024breakpoints
全宽主视觉图像，居中文本叠加层；三栏功能网格；内容对齐的文本区域
07
动效与交互
150msmicro
200mssmall
300msmedium
ease-in-outeasing
菜单与叠加层交互的淡入淡出过渡 · 交互元素平滑的颜色与背景尺寸过渡 · 细微的悬停状态变化，采用150毫秒时序
背景颜色、颜色、box-shadow与边框过渡，时长150毫秒ease-in-out · 细微的缩放或不透明度反馈
08
组件
- button 药丸形状按钮，深色填充配白色文字，或深色边框描边；文字大写
- card 极简卡片，边缘到边缘的产品摄影，基于图像的卡片无可见边框或阴影
- chip 小型药丸形状筛选器，带边框与大写文字
- input 简洁文本输入框，带细微底部边框，样式极简
- hero 全出血高质量产品摄影，左侧对齐的文本叠加于图像之上
09
文案语气与禁用清单
- 语气 自信、高端、简洁；聚焦产品品质与品牌理念
- 标题风格 直接的产品名称与益处陈述，常使用大写或紧凑字距的展示字体
- 按钮文案 简洁、行动导向的动词，如“立即购买”、“了解更多”、“继续”，置于药丸形状按钮内
- 勿使用装饰性衬线字体——截图显示所有展示与正文均使用简洁的无衬线字体系统
- 勿使用高饱和度点缀色——截图显示严格的黑、白、灰单色调色板
- 勿在卡片上使用厚重的投影或边框——截图显示边缘到边缘的产品摄影，表面处理极简
- 勿使用圆润或花哨的圆角——截图显示一致的紧凑圆角（4-8px）或药丸形状（9999px）
- 勿使用宽字间距——截图显示所有文本尺寸均采用紧凑的负字距
- 勿用文字挤占版面——截图显示充裕留白，大型主视觉图像主导视觉层次
- 勿使用多种字重——截图显示主要使用常规字重（400），极少使用粗体（700）
- 勿使用装饰性背景——截图显示纯白、纯黑或灰色背景，让产品摄影提供视觉趣味
- 避免: 技术术语堆砌
- 避免: 销售紧迫性语言
- 避免: 装饰性排版
- 避免: 文本后方杂乱的背景
- 避免: 圆润友好的美学风格
- 避免: 霓虹或高饱和度点缀色
10
包内真实截图
11
System Prompt
Master & Dynamic 是一个高端音频硬件品牌，采用简洁、极简的电商设计。网站使用单色调色板（#FFFFFF背景，#4A4A4A文字，#000000用于深色区域），无任何点缀色。排版采用定制无衬线字体，紧凑负字距，字重变化极小（主要为400）。版面布局宽敞，全出血产品摄影驱动视觉体验。关键禁忌：永不使用装饰性衬线字体，避免高饱和度点缀色，永不为产品卡片添加厚重投影，不使用宽字间距，且永不让文字挤占版面。系统优先克制，让产品图像自行发声，交互元素采用大写转换与药丸形状按钮。