Color System 色彩系统
色彩系统不是挑几个好看的颜色,而是规定每种颜色负责什么。哪个是品牌强调,哪个表示危险,哪个只做边框,都要有职责。
关键结构图
一组色块分成基础色、品牌色、语义色、状态色四栏,每栏下面写对应职责。
What
Color System 是给颜色分工,让颜色表达品牌、层级、状态和反馈。
Color System 色彩系统是一套用颜色表达品牌气质、信息层级、组件状态和语义反馈的设计规则。它让颜色成为可复用、可解释、可维护的产品语言。它的边界在于颜色必须有职责和约束:哪些颜色表达品牌,哪些表达危险或成功,哪些只能做背景、边框和弱提示。
StructureColor System = 基础色 + 语义色 + 状态规则 + 可访问性约束
When
当产品开始出现多个页面、多个组件、明暗主题或多种状态反馈时,就需要色彩系统,而不是每个页面临时挑色。
How
先定义基础色:背景、文字、边框、面板。再定义品牌色、语义色和状态色。最后把它们变成 token,并检查对比度和色盲友好性。
Examples
一个按钮的主色来自品牌色,危险按钮来自 danger 语义色,禁用状态来自状态 token。这样不同组件不会各自发明颜色。
数据图表用颜色区分类别时,还要配合标签或形状。否则色盲用户可能看不出差异。
来源
类型:设计系统实践 / 可访问性原则
事实线:Material Design 将 color 作为设计系统的核心样式之一;成熟设计系统通常把颜色拆成基础色、语义色和组件状态 token。
依据:Material Design color guidance、WCAG 对颜色对比和不只依赖颜色传达信息的要求、Design Tokens 的系统化表达方式。
边界:适用于产品界面、品牌表达和组件状态;不等于视觉风格本身,也不能替代内容层级。
常见误读:不要只靠颜色表达错误、成功或选中状态。颜色需要配合文字、图标、边框或状态说明。