Twingate
近黑色基底、胶囊形控件与大字排版。
Harness.io
近黑色基底、胶囊形控件与大字排版。
页面以近黑色为基底，搭配白色文字。字体采用 Geist、Calsans。视觉特点包括胶囊形控件、大字排版、细线分隔、居中构图。适合参考的场景：技术产品首页、开发工具说明页。
查看原始网站使用规范
建议采用
- 所有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）边框在深色表面上定义边缘。
- 不要用浅色区块打破深色主题，整个页面处于深色范围。
