颜色

颜色是用户感知界面内容及产品特性的直观方式和媒介,好的产品在颜色配置上应当清晰,为我们的界面带来统一且可识别的一致性。按照类型和功能的不同,UCloud Design将颜色分为源色、变量色、系统色和辅助色。

源色

源色实际上是将设计中的最小原子与具体的样式进行解耦。

通常情况下,源色是无法直接使用在产品中的,我们用使用源色中的颜色来进一步定义产品中使用的颜色。

内置色

语义Token图例/值
白色T_COLOR_BRAND_WHITE
#FFFFFF
黑色T_COLOR_BRAND_BLACK
#0A1633
透明T_COLOR_BRAND_TRANSPARENT
#FFFFFF00

品牌色

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

语义Token图例/值
品牌色-1T_COLOR_BRAND_PRIMARY_1
#F8F8FF
品牌色-2T_COLOR_BRAND_PRIMARY_2
#EAEEFD
品牌色-3T_COLOR_BRAND_PRIMARY_3
#E3E9FF
品牌色-6T_COLOR_BRAND_PRIMARY_6
#6488FC
品牌色-7T_COLOR_BRAND_PRIMARY_7
#5C76E8
品牌色-8T_COLOR_BRAND_PRIMARY_8
#3860F4
品牌色-9T_COLOR_BRAND_PRIMARY_9
#3357DF

中立色

灰色系列在我们的 UI 中占主导地位,合理地选择中性色能够令页面信息具备良好的主次关系,背景、边框、分割线等场景中也非常常见。产品中性色的定义需要考虑深色背景以及浅色背景的差异,同时结合 WCAG 2.0 标准。

语义Token图例/值
灰色-1T_COLOR_BRAND_SECONDARY_1
#FAFAFC
灰色-2T_COLOR_BRAND_SECONDARY_2
#F6F6FB
灰色-3T_COLOR_BRAND_SECONDARY_3
#EFEFF8
灰色-4T_COLOR_BRAND_SECONDARY_4
#DFE0F1
灰色-5T_COLOR_BRAND_SECONDARY_5
#D2D6EA
灰色-7T_COLOR_BRAND_SECONDARY_7
#C3CAD9
灰色-8T_COLOR_BRAND_SECONDARY_8
#7A8BAA
灰色-9T_COLOR_BRAND_SECONDARY_9
#526075

功能色

这类色彩起到传递功能信息、代表某种状态等作用,比如成功、出错、失败、提醒、链接等。功能色的选取需要遵守用户对色彩的基本认知。我们建议在一套产品体系下,功能色尽量保持一致,不要有过多的自定义干扰用户的认知体验。

语义Token图例/值
提示-1T_COLOR_BRAND_NOTICE_1
#FAFAFC
提示-2T_COLOR_BRAND_NOTICE_2
#D2D6EA
提示-3T_COLOR_BRAND_NOTICE_3
#526075
正确-1T_COLOR_BRAND_SUCCESS_1
#E6FFED
正确-2T_COLOR_BRAND_SUCCESS_2
#9EFFA5
正确-3T_COLOR_BRAND_SUCCESS_3
#15AD31
正确-4T_COLOR_BRAND_SUCCESS_4
#00591C
警告-1T_COLOR_BRAND_WARNING_1
#FFFCE6
警告-2T_COLOR_BRAND_WARNING_2
#FFE38D
警告-3T_COLOR_BRAND_WARNING_3
#FFC42E
警告-4T_COLOR_BRAND_WARNING_4
#544411
错误-1T_COLOR_BRAND_ERROR_1
#FFF0F0
错误-2T_COLOR_BRAND_ERROR_2
#FED4D4
错误-3T_COLOR_BRAND_ERROR_3
#F44336
错误-4T_COLOR_BRAND_ERROR_4
#5A0C06
禁用-1T_COLOR_BRAND_DISABLED_1
#F7F7F7
禁用-2T_COLOR_BRAND_DISABLED_2
#D9D9D9
禁用-3T_COLOR_BRAND_DISABLED_3
#CCCCCC

变量色

从源色中引用,应用在包括界面背景,文本图标,链接,描边等具体场景中。

背景色

语义Token色值图例/源色
常规-亮色T_COLOR_BG_DEFAULT_BRIGHT#FFFFFF
T_COLOR_BRAND_WHITE
常规-透明T_COLOR_BG_TRANSPARENT#FFFFFF00
T_COLOR_BRAND_TRANSPARENT
品牌色-默认T_COLOR_BG_PRIMARY_1#3860F4
T_COLOR_BRAND_PRIMARY_8
品牌色-悬停T_COLOR_BG_PRIMARY_2#3357DF
T_COLOR_BRAND_PRIMARY_9
品牌色-浅T_COLOR_BG_PRIMARY_5#E3E9FF
T_COLOR_BRAND_PRIMARY_3
灰色-浅T_COLOR_BG_DEFAULT_LIGHT#FAFAFC
T_COLOR_BRAND_SECONDARY_1
灰色-深T_COLOR_BG_DEFAULT_DARK#F6F6FB
T_COLOR_BRAND_SECONDARY_2
灰色-悬停T_COLOR_BG_DEFAULT_HOVER#EAEEFD
T_COLOR_BRAND_PRIMARY_2
提示-浅T_COLOR_BG_NOTICE_LIGHT#FAFAFC
T_COLOR_BRAND_NOTICE_1
提示-深T_COLOR_BG_NOTICE_DARK#526075
T_COLOR_BRAND_NOTICE_3
正确-浅T_COLOR_BG_SUCCESS_LIGHT#E6FFED
T_COLOR_BRAND_SUCCESS_1
正确-深T_COLOR_BG_SUCCESS_DARK#15AD31
T_COLOR_BRAND_SUCCESS_3
告警-浅T_COLOR_BG_WARNING_LIGHT#FFFCE6
T_COLOR_BRAND_WARNING_1
告警-深T_COLOR_BG_WARNING_DARK#FFC42E
T_COLOR_BRAND_WARNING_3
错误-浅T_COLOR_BG_ERROR_LIGHT#FFF0F0
T_COLOR_BRAND_ERROR_1
错误-深T_COLOR_BG_ERROR_DARK#F44336
T_COLOR_BRAND_ERROR_3
禁用-浅T_COLOR_BG_DISABLED_LIGHT#F7F7F7
T_COLOR_BRAND_DISABLED_1
禁用-深T_COLOR_BG_DISABLED_DARK#CCCCCC
T_COLOR_BRAND_DISABLED_3

线条

语义Token色值图例/源色
常规-浅T_COLOR_LINE_DEFAULT_LIGHT#D2D6EA
T_COLOR_BRAND_SECONDARY_5
常规-深T_COLOR_LINE_DEFAULT_DARK#C3CAD9
T_COLOR_BRAND_SECONDARY_7
常规-透明T_COLOR_LINE_DEFAULT_TRANSPARENT#FFFFFF00
T_COLOR_BRAND_TRANSPARENT
品牌色-默认T_COLOR_LINE_PRIMARY_DEFAULT#3860F4
T_COLOR_BRAND_PRIMARY_8
品牌色-悬停T_COLOR_LINE_PRIMARY_HOVER#3357DF
T_COLOR_BRAND_PRIMARY_9
品牌色-浅T_COLOR_LINE_PRIMARY_LIGHT#E3E9FF
T_COLOR_BRAND_PRIMARY_3
提示-浅T_COLOR_LINE_NOTICE_LIGHT#D2D6EA
T_COLOR_BRAND_SECONDARY_5
提示-深T_COLOR_LINE_NOTICE_DARK#526075
T_COLOR_BRAND_SECONDARY_9
正确-浅T_COLOR_LINE_SUCCESS_LIGHT#9EFFA5
T_COLOR_BRAND_SUCCESS_2
正确-深T_COLOR_LINE_SUCCESS_DARK#15AD31
T_COLOR_BRAND_SUCCESS_3
告警-浅T_COLOR_LINE_WARNING_LIGHT#FFE38D
T_COLOR_BRAND_WARNING_2
告警-深T_COLOR_LINE_WARNING_DARK#FFC42E
T_COLOR_BRAND_WARNING_3
错误-浅T_COLOR_LINE_ERROR_LIGHT#FED4D4
T_COLOR_BRAND_ERROR_2
错误-深T_COLOR_LINE_ERROR_DARK#F44336
T_COLOR_BRAND_ERROR_3
禁用-浅T_COLOR_LINE_DISABLED_LIGHT#D9D9D9
T_COLOR_BRAND_DISABLED_2
禁用-深T_COLOR_LINE_DISABLED_DARK#CCCCCC
T_COLOR_BRAND_DISABLED_3

文本

语义Token色值图例/源色
常规-亮色T_COLOR_TEXT_DEFAULT_BRIGHT#FFFFFF
T_COLOR_BRAND_WHITE
常规-浅T_COLOR_TEXT_DEFAULT_LIGHT#526075
T_COLOR_BRAND_SECONDARY_9
常规-深T_COLOR_TEXT_DEFAULT_DARK#0A1633
T_COLOR_BRAND_BLACK
品牌色-默认T_COLOR_TEXT_PRIMARY_DEFAULT#3860F4
T_COLOR_BRAND_PRIMARY_8
品牌色-悬停T_COLOR_LINE_PRIMARY_HOVER#3357DF
T_COLOR_BRAND_PRIMARY_9
备注-浅T_COLOR_TEXT_REMARK_LIGHT#0A163333
T_COLOR_BRAND_BLACK_TRANSPARENT_20
备注-深T_COLOR_TEXT_REMARK_DARK#7A8BAA
T_COLOR_BRAND_SECONDARY_8
正确T_COLOR_TEXT_SUCCESS#15AD31
T_COLOR_BRAND_SUCCESS_3
正确-深T_COLOR_TEXT_SUCCESS_DARK#00591C
T_COLOR_BRAND_SUCCESS_4
告警T_COLOR_TEXT_WARNING#FFC42E
T_COLOR_BRAND_WARNING_3
告警-深T_COLOR_TEXT_WARNING_DARK#544411
T_COLOR_BRAND_WARNING_4
错误T_COLOR_TEXT_ERROR#F44336
T_COLOR_BRAND_ERROR_3
错误-深T_COLOR_TEXT_ERROR_DARK#5A0C06
T_COLOR_BRAND_ERROR_4
禁用T_COLOR_TEXT_DISABLED#CCCCCC
T_COLOR_BRAND_DISABLED_3
系统白色文本T_COLOR_TEXT_SYSTEM_WHITE#FFFFFF
T_COLOR_BRAND_SYSTEM_WHITE
系统黑色文本T_COLOR_TEXT_SYSTEM_BLACK#000000
T_COLOR_BRAND_SYSTEM_BLACK
Copyright © 2021-2022 UCloud 优刻得科技股份有限公司