Trunk 网站预览
Trunk 网站预览

Trunk

近黑色基底、紧密字距与细线分隔。

页面以近黑色为基底。字体采用 Neue。视觉特点包括紧密字距、细线分隔、分屏构图、居中构图。适合参考的场景:技术产品首页、开发工具说明页。

查看原始网站

使用规范

建议采用

  • 所有显示和首屏标题均使用字重 300——这是标志性的非喧闹选择,使文字显得编辑化且自信
  • 所有细线边框和分隔条均使用 #e2e8f0——该色值是系统结构的骨干,使用次数超过 444 次
  • 所有卡片保持 24px 的圆角,所有按钮保持 18px 的圆角——交互元素绝不可使用尖角
  • 色彩调色板控制在 9 个中性色加 1 个绿色——若新颜色感觉必要,优先尝试更暗或更亮的灰色调
  • 仅将绿色强调用于确认/成功信号——绝不可用于装饰性用途或多个场景
  • 使用紧密的负字间距,且随尺寸变化而缩放:在 60px 时为 -0.028em,缩小至 18px 时为 -0.009em
  • 将产品截图和卡片放置在黑色画布上,并以 1px #e2e8f0 边框界定——让边框定义表面,而非阴影

建议避免

  • 绝不添加超出单个绿色信号的彩色——该系统 97% 为灰度,原因明确
  • 绝不可在标题中使用字重 600 及以上——轻量级字重是品牌声音,更重的字重会破坏克制感
  • 绝不可使用阴影来营造深度——该系统采用扁平表面和边框对比来实现层次
  • 绝不可使用渐变——该系统刻意保持扁平与哑光
  • 绝不可在 UI 控件、按钮或链接中使用绿色强调——它仅属于‘通过信号’的语境
  • 绝不可在显示尺寸下使用 0 或正值的字间距——紧密的字间距是文字身份的一部分
  • 绝不可使用小于 1px 的边框或超出定义 9 级中性色谱的色彩——结构一致性需要纪律