Clarity Design · 协作产品 UI 设计语言

颜色是用户感知界面内容及产品特性的直观方式和媒介，合理且和谐的颜色搭配能够提高界面的可用性，为我们的界面带来统一且可识别的一致性，提升用户体验和感知

品牌色

品牌色会作为不同产品独有的主色，常用于强调视觉重量，例如作为主要按钮的底色，文字链接色。下列产品分别设计了独有的品牌色来服务于自己的场景。

Team Blue Teambition 品牌色，应用于需要强调视觉重量的界面元素
B20 #F2FBFF	highlight-brand	带有载体的填充底色
B30 #CCECFF	bright-brand	面性图形的浅色填充色
B40 #87D2FF	border-brand	线性图形的浅色填充色
B50 #1B9AEE	primary-brand	面性图形主色
B60 #0171C2	hover-brand	文字主色/线性图形/面性图形 hover
B70 #004F8A	click-brand	文字 hover/线性图形 hover/面性图形 clicked
B80 #002E52	heavy-brand	文字 clicked/线性图形 clicked

灰色系列在我们的 UI 中占主导地位，利用明度的微妙变化来帮助将内容组织到不同的区域。

可以看到明度曲线在浅色域较平缓，这是考虑到浅色灰的使用场景（如背景区分、分割线），以及行业内屏幕显示效果越来越好，我们对浅色灰的细微辨识度会愈加敏锐。在深色域（用于文字、正文排版）则需要拉开明度的差距，营造界面的整体层次感。

这类色彩起到传递功能信息、代表某种状态等作用。主要应用于消息通知、反馈提醒、表单校验这类场景中的提示、成功、警示、失败等状态。