Trunk 网站预览
Trunk 网站预览

Trunk

单色控制室,仅有一个绿色信号灯。一个黑暗、技术化、接近灰度的界面,其中唯一重要的颜色是单点绿色,用于确认流水线处于活跃状态。

Trunk 是一个接近单色的 CI 可靠性控制中心:深哑光黑色画布,采用冷灰色的细线分隔条,以及仅有的黑到白中性色调。界面感觉像是一台工程师终端成长为产品的模样——扁平、密集、自信,文字在显示尺寸下呈现细微的呼吸感(字重 300,字间距紧密),在正文尺寸下则迅速聚焦。唯一的色彩强调是一处绿色信号,仅在首屏插图中以一个球穿过管道的形式出现;其余系统均以灰度表达。组件位于画布上,仅使用极小的抬升——边框与对比度完成工作,无需阴影。页面在明亮的插画首屏与深色产品区域之间交替,但产品表面才是真实依据:黑色底面,灰色边框,白色文字,无装饰性渐变,无杂噪。

查看原始网站

使用规范

建议采用

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

建议避免

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