精选 · 开放 · 免费
Wemakethings De
大胆的排版宣言，以严谨的单色网格为支撑。
EditorialBold TypographyMonochromeProductRestrained
01
设计气质 DNA
精准匠心德系工程极简主义清晰
一份工业蓝图
02
色彩
#000000Ink
#FFFFFFBG
rgba(0,0,0,1)Line
纯粹的单色二元系统，使用绝对的黑色和白色。
03
字体
geometric-sans
- display
864px · 400 - heading
80px · 500 - body
24px · 400 - nav
16px · 500
排版是首要的结构性和表现性元素 · 巨大的背景文字必须始终是描边且不可交互的 · 导航链接使用大写几何无衬线字体
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
严格网格，配以充足的内边距
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 0px
使用1px黑色细线来定义网格边界和下划线激活状态
06
布局
1920container
12columns
24pxgutter
768 / 1024breakpoints
全宽区域被1px黑色细线分割，形成一个技术蓝图般的网格
07
动效与交互
220msmicro
400mssmall
600msmedium
cubic-bezier(0.22, 1, 0.36, 1)easing
平滑的页面过渡 · 基于网格的粘性滚动效果
在定义的网格单元内进行微妙的下划线或颜色反转 · 即时状态变更，无多余反馈
08
组件
- button 基于文本，带有箭头指示，大写几何无衬线字体，1px边框处理
- card 由黑色细线定义的网格单元
- chip 无
- input 无
- hero 巨大的加粗大写排版，叠加在巨大的描边背景字符上
09
文案语气与禁用清单
- 语气 自信、直接、权威、极简
- 标题风格 全大写、加粗、简洁、大尺度几何无衬线字体
- 按钮文案 大写文本，配以最小化的箭头指示，融入网格
- 不要使用渐变或复杂阴影——截图显示的是平坦的单色表面
- 不要使用圆角——截图显示所有元素均为严格的0px圆角
- 不要使用多种字体家族——截图显示仅使用几何无衬线字体
- 不要使用明亮的强调色——截图显示严格的黑白配色
- 不要使用小而局促的排版——截图显示巨大、开阔的展示文字
- 不要使用标准卡片布局——截图显示文字直接叠加在巨大的描边背景字上
- 避免: 感叹号
- 避免: 浮夸的营销用语
- 避免: 柔和的圆角UI元素
- 避免: 渐变填充
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这个设计系统服务于一个高端自行车与生活方式品牌，通过绝对的单色克制和巨大、自信的排版来定位自身。色板严格二元化：白色背景(#FFFFFF)和绝对黑色文字(#000000)，不使用次要或强调色。字体类别仅为几何无衬线，应用于从微小导航链接到巨大864px背景水印的所有尺度。布局由1px黑色细线构成的严格网格定义，类似技术蓝图。关键约束：绝不使用圆角(圆角半径始终为0px)，绝不引入颜色(设计严格单色)，绝不使用柔和阴影或渐变。交互模型微妙，依赖于在刚性结构框架内进行尖锐、精确的过渡和清晰的视觉层次。
en · zh-CN · zh-TW · ja · ko