Skip to content

颜色

#055088
Brand Blue 700

主按钮、链接、Logo 主体

#0B1F33
Ink Navy

正文和深色背景

#6ADFA3
Mint 400

品牌节点和小面积活力色

#9FC1F9
Soft Blue

深色主题链接、图表和插图

#F7FAFC
Canvas

亮色页面背景

#D7E2EA
Border

边框和分隔线

页面整体配色以中性色和充足留白为主基调。Brand Blue 主要承载关键动作指引、当前高亮状态与链接跳转;Mint 则严格限用于特定节点、高亮装饰或状态提示背景。在单一视口中,通常只允许存在一个实心品牌蓝样式的核心操作按钮。

白字品牌蓝按钮8.37:1 · AA 通过
深色字薄荷绿标签10.09:1 · AA 通过
深色字浅蓝底9.12:1 · AA 通过
避免搭配白字薄荷绿底(对比度不足)1.65:1 · 仅限大字/图形

成功、警告、错误和信息等系统提示,必须遵循本规范定义的对应语义色。除色彩变化外,还需结合图标、标题或状态文本辅助展示。不可仅因为 Mint 在感官上呈现绿色,就将其直接用于所有表单或操作的成功状态指示。

组件开发应按用途选用语义色,而非直接套用原始色阶。亮色主题下的主操作按钮使用 Brand Blue;暗色主题下的主操作按钮则采用 Soft Blue 配 Ink Navy 文本。插图、Logo 以及状态色均需在亮暗双重主题下进行单独视觉复核,避免进行粗暴的反相处理。

渐变配色仅适用于仓库封面、社交分享图以及大面积品牌插画。交互按钮、表单输入框、数据表格和状态标签等基础元素均不使用渐变样式。推荐采用品牌标准渐变:#055088 → #325093 → #6ADFA3,在视觉排版中薄荷绿端可超出画布边界,以防止亮绿色占比过高破坏克制感。