色彩系统是 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%
- 中性色是页面的视觉基底,占比最高
- 语义色仅在需要表达状态时出现
- 不使用渐变色作为大面积背景
- 不使用发光效果或霓虹色
- 所有色彩决策应能解释原因