色彩系统是 Alius 视觉语言的基础。所有色彩的使用应服务于信息传达,而非装饰目的。

品牌色 Brand Color

品牌色是 Alius 在所有触点上的核心视觉标识。用于 Logo、核心按钮、重点链接、关键状态和品牌识别区域。

品牌色应出现在用户需要做出关键操作的界面元素上,而非大面积铺满页面。要求专业克制、稳定可靠,能在深色和浅色模式下正常使用,不使用荧光色或高饱和度渐变。

主色 Primary

Brand 500
主品牌色 — 用于核心交互元素
#2d6ff2

色阶 Scale

50
#f0f5ff
100
#e0ebff
200
#b8d4fe
300
#85b4fd
400
#5191fc
500
#2d6ff2
600
#1a55db
700
#1544b2
800
#13398d
900
#153170

中性色 Neutral Color

中性色是界面的结构基础,负责背景、文本、边框和空间分隔。通过明度差异建立信息层级,适合长时间阅读和技术文档场景。

背景色 Background

Surface 50
页面底色
#f8fafc
Surface 100
卡片背景、区块分隔
#f1f5f9
Surface 200
边框、分割线
#e2e8f0
Surface 300
禁用边框、占位符
#cbd5e1

文本色 Text

Surface 900
主文本、标题
#0f172a
Surface 700
辅助文本、注释
#334155
Surface 800
深色模式背景
#1e293b
Surface 950
最深背景
#020617

语义色 Semantic Color

语义色用于传达系统状态,每种颜色都有明确且唯一的含义。色盲友好 — 始终配合图标或文字传达状态,不只依赖颜色。

成功 Success

Success
操作成功、连接正常、数据完整
#16a34a

警告 Warning

Warning
需要注意、配置风险、性能接近阈值
#d97706

错误 Error

Error
操作失败、连接断开、数据异常
#dc2626

信息 Info

Info
提示信息、帮助说明、新功能引导
#0284c7

使用原则

  • 品牌色占页面色彩的比例应低于 10%
  • 中性色是页面的视觉基底,占比最高
  • 语义色仅在需要表达状态时出现
  • 不使用渐变色作为大面积背景
  • 不使用发光效果或霓虹色
  • 所有色彩决策应能解释原因