Harness.io 网站预览
Harness.io 网站预览

Harness.io

带有磷光绿色强调的午夜任务控制中心。

Harness的Gitness表面像夜间指挥甲板:近黑画布(#070707)层叠略浅的卡片表面,超大展示标题采用窄体Calsans和正字间距,青绿或薄荷强调(#70dcd3)在高亮卡片上出现,像磷光显示器的辉光。页面安静且高对比度,深中性色上的白色文字达到AAA对比度,用浅灰而非深色极细边框在暗画布上定义边缘,胶囊形控件(800px圆角)像实体硬件按钮。色彩限量使用:唯一亮蓝色(#0092e4)用于激活链接边框,唯一薄荷色(#70dcd3)用于强调卡片,没有其他颜色。间距有呼吸感,卡片内边距宽裕、区块间隔舒适、展示字号巨大,让字体而非颜色或字重承担层级。

查看原始网站

使用规范

建议采用

  • 所有56px及以上标题都使用Calsans及其原生正字间距(0.056em)。
  • 卡片边缘用1px #d9dae5浅色边框定义,不依赖阴影或仅靠背景对比。
  • 每个屏幕唯一的主要操作采用白色填充胶囊,800px圆角、#ffffff填充和#070707文字。
  • 每个视口最多一个卡片或面板使用Phosphor Mint(#70dcd3)强调。
  • 卡片采用20px圆角,所有交互控件采用800px胶囊圆角。
  • 正文保持16px Geist、字重400及-0.017em字间距,500仅用于强调标签。
  • 所有深色表面以Void Canvas(#070707)为基础,向上叠加#0d0e12 → #141418。

建议避免

  • 不要为卡片或面板添加投影,系统通过浅色边框和表面亮度递进定义高度。
  • 按钮不要用彩色填充,唯一填充按钮为白色,其余都采用无填充或描边样式。
  • 同一区块不要使用多种强调色,Phosphor Mint与Signal Blue不应同时出现在同一表面。
  • 正文不要低于14px或高于18px,阅读范围狭窄而明确。
  • Calsans不要采用负字间距,其正字间距是字体识别的结构性特征。
  • 卡片不要使用深色边框,系统以浅色(#d9dae5)边框在深色表面上定义边缘。
  • 不要用浅色区块打破深色主题,整个页面处于深色范围。