颜色是用户感知界面内容及产品特性的直观方式和媒介，好的产品在颜色配置上应当清晰，为我们的界面带来统一且可识别的一致性。按照类型和功能的不同，UCloud Design将颜色分为源色、变量色、系统色和辅助色。
源色
源色实际上是将设计中的最小原子与具体的样式进行解耦。
通常情况下，源色是无法直接使用在产品中的，我们用使用源色中的颜色来进一步定义产品中使用的颜色。
内置色
| 语义 | Token | 图例/值 |
|---|---|---|
| 白色 | T_COLOR_BRAND_WHITE | #FFFFFF |
| 黑色 | T_COLOR_BRAND_BLACK | #0A1633 |
| 透明 | T_COLOR_BRAND_TRANSPARENT | #FFFFFF00 |
品牌色
品牌色会作为不同产品独有的主色，常用于强调视觉重量，例如作为主要按钮的底色，文字链接色。下列产品分别设计了独有的品牌色来服务于自己的场景。
| 语义 | Token | 图例/值 |
|---|---|---|
| 品牌色-1 | T_COLOR_BRAND_PRIMARY_1 | #F8F8FF |
| 品牌色-2 | T_COLOR_BRAND_PRIMARY_2 | #EAEEFD |
| 品牌色-3 | T_COLOR_BRAND_PRIMARY_3 | #E3E9FF |
| 品牌色-6 | T_COLOR_BRAND_PRIMARY_6 | #6488FC |
| 品牌色-7 | T_COLOR_BRAND_PRIMARY_7 | #5C76E8 |
| 品牌色-8 | T_COLOR_BRAND_PRIMARY_8 | #3860F4 |
| 品牌色-9 | T_COLOR_BRAND_PRIMARY_9 | #3357DF |
中立色
灰色系列在我们的 UI 中占主导地位，合理地选择中性色能够令页面信息具备良好的主次关系，背景、边框、分割线等场景中也非常常见。产品中性色的定义需要考虑深色背景以及浅色背景的差异，同时结合 WCAG 2.0 标准。
| 语义 | Token | 图例/值 |
|---|---|---|
| 灰色-1 | T_COLOR_BRAND_SECONDARY_1 | #FAFAFC |
| 灰色-2 | T_COLOR_BRAND_SECONDARY_2 | #F6F6FB |
| 灰色-3 | T_COLOR_BRAND_SECONDARY_3 | #EFEFF8 |
| 灰色-4 | T_COLOR_BRAND_SECONDARY_4 | #DFE0F1 |
| 灰色-5 | T_COLOR_BRAND_SECONDARY_5 | #D2D6EA |
| 灰色-7 | T_COLOR_BRAND_SECONDARY_7 | #C3CAD9 |
| 灰色-8 | T_COLOR_BRAND_SECONDARY_8 | #7A8BAA |
| 灰色-9 | T_COLOR_BRAND_SECONDARY_9 | #526075 |
功能色
这类色彩起到传递功能信息、代表某种状态等作用，比如成功、出错、失败、提醒、链接等。功能色的选取需要遵守用户对色彩的基本认知。我们建议在一套产品体系下，功能色尽量保持一致，不要有过多的自定义干扰用户的认知体验。
| 语义 | Token | 图例/值 |
|---|---|---|
| 提示-1 | T_COLOR_BRAND_NOTICE_1 | #FAFAFC |
| 提示-2 | T_COLOR_BRAND_NOTICE_2 | #D2D6EA |
| 提示-3 | T_COLOR_BRAND_NOTICE_3 | #526075 |
| 正确-1 | T_COLOR_BRAND_SUCCESS_1 | #E6FFED |
| 正确-2 | T_COLOR_BRAND_SUCCESS_2 | #9EFFA5 |
| 正确-3 | T_COLOR_BRAND_SUCCESS_3 | #15AD31 |
| 正确-4 | T_COLOR_BRAND_SUCCESS_4 | #00591C |
| 警告-1 | T_COLOR_BRAND_WARNING_1 | #FFFCE6 |
| 警告-2 | T_COLOR_BRAND_WARNING_2 | #FFE38D |
| 警告-3 | T_COLOR_BRAND_WARNING_3 | #FFC42E |
| 警告-4 | T_COLOR_BRAND_WARNING_4 | #544411 |
| 错误-1 | T_COLOR_BRAND_ERROR_1 | #FFF0F0 |
| 错误-2 | T_COLOR_BRAND_ERROR_2 | #FED4D4 |
| 错误-3 | T_COLOR_BRAND_ERROR_3 | #F44336 |
| 错误-4 | T_COLOR_BRAND_ERROR_4 | #5A0C06 |
| 禁用-1 | T_COLOR_BRAND_DISABLED_1 | #F7F7F7 |
| 禁用-2 | T_COLOR_BRAND_DISABLED_2 | #D9D9D9 |
| 禁用-3 | T_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 |