Checkly

深蓝色基底、细线分隔与居中构图。
页面以深蓝色为基底,搭配白色文字。字体采用 Inter、JetBrains Mono。视觉特点包括细线分隔、居中构图、产品图像展示、网格布局。适合参考的场景:开发者工具官网、API 服务介绍页。
查看原始网站使用规范
建议采用
- 使用 Inter 300 字重、48–60px 字号用于展示标题——低字重是其标志性特征
- 使用 #0075ff 信号蓝专用于强调文本、高亮词汇、图标笔画及交互链接——绝不用于背景
- 所有状态胶囊、环境标签和内联徽章均使用 9999px 半径
- 所有按钮使用 8px 半径,卡片使用 12px 半径——8/12 的比例在系统中保持一致
- 使用 #e5e7eb 低不透明度(或暗色表面使用 #374151)的细线边框,而非厚重阴影
- 任何代码、CLI命令或终端输出均使用 JetBrains Mono——绝不让 Inter 渲染代码
- 在黑暗画布上使用白色(#ffffff)填充按钮作为主要行动号召——它们看起来像是已开启的控制项
建议避免
- 不要将阴影作为主要结构手段——应使用 #374151 或 #e5e7eb 的细线边框替代
- 不要将 #0075ff 用作大面积填充背景——它是强调色,而非表面色
- 不要在标题中使用 700 或 800 字重——系统以 300 字重表达,而非 900 字重
- 不要在卡片或面板中使用超过 16px 的圆角——8/12/16 的递进是系统规范
- 不要引入超出信号蓝、状态绿和语法令牌色之外的新色彩
- 不要使用 Inter 渲染代码——始终使用 JetBrains Mono 或系统等宽字体
- 不要在UI表面添加渐变——系统为扁平设计,仅允许存在一个微妙的白到蓝过渡作为唯一渐变