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)边框在深色表面上定义边缘。
- 不要用浅色区块打破深色主题,整个页面处于深色范围。