主色 Primary
主色是一个产品的代表颜色，一般与品牌色相关联。常用于主要按钮和文字、重点操作状态、高亮提醒、空状态等。
产品产品的主题色为#FF8500，蕴含了科技创新的品牌特质和生态理念。
| Example | Token | Value | Usage |
|---|
| --color-primary-1000 | #662700 | |
| --color-primary-900 | #8C3A00 | |
| --color-primary-800 | #B35000 | |
| --color-primary-700 | #D96900 | active |
| --color-primary-600 | #FF8500 | primary |
| --color-primary-500 | #FF9F29 | hover |
| --color-primary-400 | #FFB752 | |
| --color-primary-300 | #FFCC7A | |
| --color-primary-200 | #FFDFA3 | |
| --color-primary-100 | #FFF7E6 | 标签背景 |
中性色 Neutral
中性色包含一系列灰黑色，能在产品界面中调和色彩搭配，衬托主色及其他色彩，同时有利于拉开内容层次，使用户更专注于内容。
常用于文字、背景、图标、边框和分割线等元素。
产品根据过往业务经验，提供了线条、填充和文字的中性色。
| Example | Token | Value | Usage |
|---|
| --color-Black | #000000 | 黑色 |
| --color-neutral-1400 | #15181D | |
| --color-neutral-1300 | #20232B | |
| --color-neutral-1200 | #272B34 | |
| --color-neutral-1100 | #323843 | 一级 |
| --color-neutral-1000 | #424A57 | |
| --color-neutral-900 | #535D6D | 二级 |
| --color-neutral-800 | #6F7686 | |
| --color-neutral-700 | #858A99 | 三级 |
| --color-neutral-600 | #A2A6B1 | |
| --color-neutral-500 | #C4C6CD | 四级 |
| --color-neutral-400 | #DCDDE1 | |
| --color-neutral-300 | #E7E8EB | |
| --color-neutral-200 | #EEEEF0 | |
| --color-neutral-100 | #F3F3F4 | 全局背景 |
| --color-white | #FFFFFF | 白色 |
功能色 Functional
功能色的主要作用是向用户明确的传达成功、警告、错误、链接等信息和状态。
产品基于用户对色彩的通用认知，提供了适合不同状态的功能色及其相应色板。
绿色 Green
| Example | Token | Value | Usage |
|---|
| --color-green-1000 | #1C3329 | |
| --color-green-900 | #164B35 | |
| --color-green-800 | #216E4E | |
| --color-green-700 | #1F845A | active |
| --color-green-600 | #22A06B | primary |
| --color-green-500 | #2ABB7F | hover |
| --color-green-400 | #4BCE97 | |
| --color-green-300 | #7EE2B8 | |
| --color-green-200 | #BAF3DB | |
| --color-green-100 | #DCFFF1 | |
蓝色 Blue
| Example | Token | Value | Usage |
|---|
| --color-green-1000 | #1C2B41 | |
| --color-green-900 | #09326C | |
| --color-green-800 | #0055CC | |
| --color-green-700 | #0C66E4 | active |
| --color-green-600 | #1D7AFC | primary |
| --color-green-500 | #388BFF | hover |
| --color-green-400 | #579DFF | |
| --color-green-300 | #85B8FF | |
| --color-green-200 | #CCE0FF | |
| --color-green-100 | #E9F2FF | |
紫色 Purple
| Example | Token | Value | Usage |
|---|
| --color-green-1000 | #2B273F | |
| --color-green-900 | #352C63 | |
| --color-green-800 | #5E4DB2 | |
| --color-green-700 | #6E5DC6 | active |
| --color-green-600 | #8270DB | primary |
| --color-green-500 | #8F7EE7 | hover |
| --color-green-400 | #9F8FEF | |
| --color-green-300 | #B8ACF6 | |
| --color-green-200 | #DFD8FD | |
| --color-green-100 | #F3F0FF | |
青色 Teal
| Example | Token | Value | Usage |
|---|
| --color-green-1000 | #1E3137 | |
| --color-green-900 | #164555 | |
| --color-green-800 | #206A83 | |
| --color-green-700 | #227D9B | active |
| --color-green-600 | #2898BD | primary |
| --color-green-500 | #42B2D7 | hover |
| --color-green-400 | #6CC3E0 | |
| --color-green-300 | #9DD9EE | |
| --color-green-200 | #C6EDFB | |
| --color-green-100 | #E7F9FF | |
橙色 Orange
| Example | Token | Value | Usage |
|---|
| --color-primary-1000 | #662700 | |
| --color-primary-900 | #8C3A00 | |
| --color-primary-800 | #B35000 | |
| --color-primary-700 | #D96900 | active |
| --color-primary-600 | #FF8500 | primary |
| --color-primary-500 | #FF9F29 | hover |
| --color-primary-400 | #FFB752 | |
| --color-primary-300 | #FFCC7A | |
| --color-primary-200 | #FFDFA3 | |
| --color-primary-100 | #FFF7E6 | |
红色 Red
| Example | Token | Value | Usage |
|---|
| --color-primary-1000 | #42221F | |
| --color-primary-900 | #5D1F1A | |
| --color-primary-800 | #AE2E24 | |
| --color-primary-700 | #C9372C | active |
| --color-primary-600 | #E2483D | primary |
| --color-primary-500 | #F15B50 | hover |
| --color-primary-400 | #F87168 | |
| --color-primary-300 | #FD9891 | |
| --color-primary-200 | #FFD5D2 | |
| --color-primary-100 | #FFECEB | |
应用场景
线条 Line
| Example | Token | Ref Token | Value | Usage |
|---|
| --color-border-primary | --color-neutral-400 | #DCDDE1 | 一般用于组件的边框 |
| --color-border-secondary | --color-neutral-300 | #E7E8EB | -- |
| --color-border-tertiary | --color-neutral-200 | #EEEEF0 | 一般用于内容的分割线 |
| --color-border-quaternary | --color-neutral-100 | #F3F3F4 | 最浅的线条 |
| --color-border-white | --color-white | #FFFFFF | 白色线条 |
填充 Fill
| Example | Token | Ref Token | Value | Usage |
|---|
| --color-fill-primary | --color-neutral-400 | #DCDDE1 | -- |
| --color-fill-secondary | --color-neutral-300 | #E7E8EB | -- |
| --color-fill-tertiary | --color-neutral-200 | #EEEEF0 | -- |
| --color-fill-quaternary | --color-neutral-100 | #F3F3F4 | -- |
| --color-fill-white | --color-white | #FFFFFF | 白色填充 |
文字 Text
| Example | Token | Ref Token | Value | Usage |
|---|
| --color-text-primary | --color-neutral-1100 | #323843 | 标题文字 |
| --color-text-secondary | --color-neutral-900 | #535D6D | 正文文字 |
| --color-text-tertiary | --color-neutral-700 | #858A99 | 辅助文字 |
| --color-text-quaternary | --color-neutral-500 | #C4C6CD | 禁用文字 |
| --color-text-white | --color-white | #FFFFFF | 白色文字 |
图标 Icon
| Example | Token | Ref Token | Value | Usage |
|---|
| --color-icon-primary | --color-neutral-1100 | #323843 | 一级，图标默认颜色，用于操作 |
| --color-icon-secondary | --color-neutral-900 | #535D6D | 二级 |
| --color-icon-tertiary | --color-neutral-700 | #858A99 | 三级，图标默认颜色，用于提示 |
| --color-icon-quaternary | --color-neutral-500 | #C4C6CD | 四级 |
| --color-icon-white | --color-white | #FFFFFF | 白色图标 |
背景 Backgroud
| Example | Token | Ref Token | Value | Usage |
|---|
| --color-bg-white | --color-neutral-100 | #F3F3F4 | 全局默认背景色 |
| --color-bg-white | --color-white | #FFFFFF | 白色背景 |
蒙层 Mask
| Example | Token | Ref Token | Value | Usage |
|---|
| --color-mask | --color-neutral-700A | #15181D Opacity: 0.64 | 模态弹窗蒙层 |