基础色版
中性色系
中性色：
白色：
黑色：
彩色色系
橙色:
黄色:
金色：
绿色:
青色:
蓝色:
紫色:
红色:
语义色
语义色是指系统中表示标准值状态（例如好，坏或警告）每种颜色在所有情况下都具有相同的基本含义，而当系统需要表示不同的状态时，会使用不同的语义色。
根据企业级设计规范，语义色包含了以下几种：
- 信息色
- 警告色
- 危险色
- 成功色
而根据不同组件的组件部分，每一种语义色也分为背景色和前景色。根据不同的状态，语义色也区分了hover、active、default等状态。 因为语义色在系统中通常以Message，Alert，Notification，或者Form的feedback形式出现，我们这里以Message为例，展示语义色在不同状态下的表现。
信息色
信息色（Info Color）用于引起用户注意的信息，例如：提示、说明等。
默认情况下，系统使用彩色色系中的蓝色系，作为信息色。根据不同的状态，选用了不同色阶的颜色
{
fg: {
default: blue[500],
hover: blue[400],
selected: blue[600],
},
bg: {
default: blue[50],
hover: blue[50],
selected: blue[50],
}
}
而根据不同的系统模式（light or dark），信息色也会有所不同，在暗黑模式下，信息色选用了以下不同的色阶：
{
fg: {
default: blue[600],
hover: blue[500],
selected: blue[700],
},
bg: {
default: blue[900],
hover: blue[900],
selected: blue[900],
}
}
以Message为例：
警告色
警告色（Warning Color）用于展示系统警告，例如：授权即将过期、单日导入数据量超过上限等系统警告。
默认情况下，系统使用彩色色系中的金色系，作为警告色。根据不同的状态，选用了不同色阶的颜色
{
fg: {
default: gold[500],
hover: gold[400],
selected: gold[600],
},
bg: {
default: gold[50],
hover: gold[50],
selected: gold[50],
}
}
而根据不同的系统模式（light or dark），警告色也会有所不同，在暗黑模式下，警告色选用了以下不同的色阶：
{
fg: {
default: gold[600],
hover: gold[500],
selected: gold[700],
},
bg: {
default: gold[900],
hover: gold[900],
selected: gold[900],
}
}
以Message为例：
错误色
错误色（Error Color）用于展示系统错误，例如：授权已经过期、表单校验失败、系统服务下线等系统错误，以及一些其他危险操作或信息。
默认情况下，系统使用彩色色系中的红色系，作为错误色。根据不同的状态，选用了不同色阶的颜色
{
fg: {
default: red[500],
hover: red[400],
selected: red[600],
},
bg: {
default: red[50],
hover: red[50],
selected: red[50],
}
}
而根据不同的系统模式（light or dark），错误色也会有所不同，在暗黑模式下，错误色选用了以下不同的色阶：
{
fg: {
default: red[600],
hover: red[500],
selected: red[700],
},
bg: {
default: red[900],
hover: red[900],
selected: red[900],
}
}
以Message为例：
成功色
成功色（Success Color）用于展示系统成功操作的反馈信息，例如：授权成功、对象创建/修改/删除成功等反馈信息，以及一些其他成功操作的信息。 默认情况下，系统使用彩色色系中的绿色系，作为成功色。根据不同的状态，选用了不同色阶的颜色
{
fg: {
default: green[500],
hover: green[400],
selected: green[600],
},
bg: {
default: green[50],
hover: green[50],
selected: green[50],
}
}
而根据不同的系统模式（light or dark），成功也会有所不同，在暗黑模式下，成功色选用了以下不同的色阶：
{
fg: {
default: green[600],
hover: green[500],
selected: green[700],
},
bg: {
default: green[900],
hover: green[900],
selected: green[900],
}
}