01
设计气质 DNA
字体铸字厂库样本
一个精心策划的排版画廊
02
色彩
#FF4B6CAccent#000000Ink#00283BInk soft#FFFFFFBG#E4CAEFBG soft#323232BG quiet#47FF5BMutedrgba(0,0,0,0.1)Line高对比度排版，配以大胆、饱和的区块背景。
03
字体
- display
199px · 400 - heading
21px · 400 - body
15px · 400
主文本使用特定字体家族，如 Canela。 · 文本大小写严格采用混合大小写，特定标签偶尔使用大写。 · 正文使用 Styrene UI。
04
间距
4px8px16px24px32px48px64px96px基于 8px 的垂直间距节奏。
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 0px
1px solid rgba(0,0,0,0.1)
rgba(0, 0, 0, 0.35) 2px 2px 7px 0px
06
布局
1280container
3columns
24pxgutter
768 / 1024breakpoints
全宽区块，采用基于水平网格的卡片布局。
07
动效与交互
150msmicro
300mssmall
500msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing
hover 时微妙的背景色过渡。 · UI 元素的透明度过渡。
微妙的颜色变化或背景更改。 · 即时响应，无复杂动画。
08
组件
- button 紧凑、带边框的按钮，使用大写文本，用于“查看购物车”等操作。
- card 由细边框分隔的图片和文本卡片。
- chip 用于样式计数的简单文本标签。
- input 极简、带边框的文本字段。
- hero 占据整个视口高度的大型排版样本。
09
文案语气与禁用清单
- 语气 专业、极简且权威。
- 标题风格 大胆、以字体为中心的陈述，让字体自己说话。
- 按钮文案 低调且实用。
- 不要使用圆角 — 截图显示的是尖锐的矩形边缘。
- 不要使用渐变 — 截图显示的是扁平、纯色的背景块。
- 不要过度使用阴影 — 截图显示的是扁平的 UI 元素。
- 不要为展示文本使用无衬线字体 — 截图显示标题使用的是过渡衬线体。
- 不要到处使用鲜艳的强调色 — 截图仅将其用于特定样本。
- 不要使用过大的内边距 — 截图显示的是紧凑、高效的间距。
- 避免: 营销套话
- 避免: 过度装饰的 UI
- 避免: 复杂动画
- 避免: 圆角
- 避免: 明亮渐变
10
包内真实截图
11
System Prompt
Commercial Type 是一家高端铸字厂，设计风格极简，专注于排版。布局采用大型、粗体的样本（如 Canela 这样的过渡衬线体），设置在纯色、高对比度的背景块（#E4CAEF、#500000、#78FFF0）之上。UI 是一个干净、实用的网格（Styrene UI），具有尖锐的边角且无渐变。关键色彩包括深紫色（#480078）、亮粉色（#FF4B6C）和亮绿色（#47FF5B）。关键禁忌：绝不使用圆角，避免渐变，并确保展示文本严格使用衬线字体。整体感觉是一个排版的编辑式画廊。