01
设计气质 DNA
优雅沉静画廊硬件精炼
一件现代硬件的画廊展览图录。
02
色彩
#292929Ink#FFFFFFBG#FEFEFEBG softrgba(41,41,41,1)Line高对比度单色调色板,通过锐利的黑色边框定义网格。
03
字体
- display
43px · 300 - heading
39px · 300 - subhead
25px · 300 - body
16px · 300 - caption
12px · 300
几乎所有文本(包括标题)均使用轻字重(300)。 · 按钮与标签使用大写字母。 · 保持紧凑的垂直韵律,配合充裕的行高。
04
间距
4px8px16px24px32px48px64px96px统一的 4px 基础网格控制所有间距,主网格单元则采用较大的内边距。
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 0px
2px solid #292929
06
布局
1920container
12columns
768 / 1024breakpoints
严格、不对称的 CSS Grid,通过厚重的 2px 黑色边框分隔每一个元素。
07
动效与交互
220msmicro
300mssmall
600msmedium
cubic-bezier(0.55, 0.085, 0.68, 0.53)easing
旋转圆形文字动画 · 内容展开时的平滑高度过渡
最小化视觉反馈;交互聚焦于内容呈现而非状态变化。 · 触发内容展开或页面导航。
08
组件
- button 极简的描边按钮,无圆角,大写文字,轻字重。
- card 由布局网格边框定义的严格矩形容器,无投影或圆角。
- hero 结合产品图、描述文字与旋转圆形文字元素的多面板不对称布局。
09
文案语气与禁用清单
- 语气 沉静、优雅、精炼。
- 标题风格 诗意而富有感召力,使用轻字重。
- 按钮文案 直接、大写、不张扬。
- 避免使用圆角——截图显示所有元素均为锐利的 90 度直角。
- 避免使用投影——截图完全依赖实心边框营造层次。
- 避免使用粗体字重——截图仅使用轻(300)字重。
- 避免使用鲜艳的强调色——截图严格遵循单色调色板。
- 避免使用有机或不规则内边距——截图采用基于 4px 的严格网格间距。
- 避免使用流动或渐变背景——截图使用纯色 #FFFFFF 与 #292929 色块。
- 避免: 圆角 UI 元素
- 避免: 投影
- 避免: 明亮的强调色
- 避免: 俏皮的语言
- 避免: 杂乱的布局
10
包内真实截图
11
System Prompt
一个为 Mono X7 显示屏打造的高端硬件展示网站。设计基因是一个严格、画廊般的网格系统,由 2px 实心黑色边框(#292929)在纯白背景(#FFFFFF)上定义。字体依赖轻字重的怪诞体与人文无衬线体类别,导航和标签使用大写。布局为不对称多面板网格,采用大容器,无圆角或投影。关键禁忌:1)绝不使用圆角或柔和半径。2)避免使用粗体字重(保持所有文本为 300)。3)不要引入彩色强调或渐变;坚持单色调色板。4)避免复杂阴影;使用实心边框定义层次与结构。




