01
设计气质 DNA
运动高端活力工业风
一个具有工业风、健身房美学的高端运动服饰品牌
02
色彩
#000000Ink#444444Ink soft#FFFFFFBG#F5F5F5BG soft#E7E7E7BG quiet#6E6E6EMutedrgba(0, 0, 0, 0.1)Line单色核心，摄影的生动色彩提供主要的视觉趣味
03
字体
- display
56px · 700 - body
16px · 400 - label
14px · 500
大写文本专用于展示标题和类别导航 · 正文保持中性、高可读性的字重，用于产品描述
04
间距
4px8px16px24px32px48px64px96px基于8px网格，主要UI组件周围留有充足空白
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
极简，主要使用1px细线边框来定义交互元素
rgba(0, 0, 0, 0.1) 0px 4px 15px 0px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
全宽摄影主图，后接结构化的多栏产品网格
07
动效与交互
125msmicro
200mssmall
400msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing
交互悬停状态的快速颜色过渡 · 产品图像上的平滑缩放变换
交互元素上的颜色过渡和轻微缩放 · 通过状态变化提供即时视觉反馈
08
组件
- button 主要操作使用下划线文本链接，次要操作使用胶囊形按钮
- card 极简的、聚焦图像的卡片，无可见边框或阴影，配有浮动圆形实用图标
- chip 简单的活动类别大写文本标签
- input 用于搜索和筛选的极简下划线式输入框
- hero 全出血电影感摄影，左下角叠加文本和号召性用语链接
09
文案语气与禁用清单
- 语气 直接、激励性且高端
- 标题风格 简短有力、大写的陈述，吸引注意力
- 按钮文案 行动导向的文本链接，视觉权重极小
- 不要使用装饰性衬线字体——截图显示标题使用的是窄体无衬线字体
- 不要依赖纯色背景作为版块——截图显示摄影图像是主要视觉元素
- 不要使用厚重阴影或3D效果——截图显示的是扁平、极简的组件设计
- 不要将主图文本居中对齐——截图显示的是左对齐的文本叠加
- 不要使用多彩的强调按钮——截图显示CTA使用的是简单的白色下划线文本链接
- 不要使用带边框的圆角方形卡片——截图显示的是无边框、聚焦图像的布局
- 避免: 过多的感叹号
- 避免: 被动语态
- 避免: 装饰性字体
- 避免: 柔和的柔和色系
- 避免: 过于复杂的句子结构
10
包内真实截图
11
System Prompt
Gymshark是一个高端运动服饰品牌。设计DNA由电影感、高对比度的摄影和粗犷、窄体的无衬线字体定义。调色板严格单色，依赖纯黑和纯白，摄影的生动色彩提供所有视觉趣味。关键颜色是#000000、#FFFFFF和中性灰如#444444。字体使用窄体无衬线用于展示，人文主义无衬线用于正文。关键约束：不使用装饰性衬线，不使用厚重阴影，不使用彩色强调按钮。布局宽幅且编辑化，优先考虑图像而非UI装饰。