Color 色彩
色彩对产品的视觉传达和多维度信息的承载有着很重要的影响，好的产品在色彩配置上应当清晰，准确的传达有效信息和品牌感。
按照颜色类型和功能的不同，我们将色彩分为主色、中性色、功能色和遮罩色。
主色 Primary
主色是一个产品的代表颜色，一般与品牌色相关联。常用于主要按钮和文字、重点操作状态、高亮提醒、空状态等。
我们产品的主题色为 #00A98F ，蕴含了科技创新的品牌特质和生态理念。
| Example | Token | Value | Usage |
|---|---|---|---|
--color-primary-900 | #005B4D | ||
--color-primary-800 | #00826E | ||
--color-primary-700 | #00957E | ||
--color-primary-600 | #00A98F | primary，主要颜色，一般用于强调场景下按钮等组件的默认背景色 | |
--color-primary-500 | #13BC9D | ||
--color-primary-400 | #5AD6B7 | ||
--color-primary-300 | #84E3C8 | ||
--color-primary-200 | #B1F0Dc | ||
--color-primary-100 | #EBF9F6 | light，最浅的颜色，一般用于非强调按钮的默认背景色，选项的选中背景色 |
中性色 Neutral
中性色包含一系列黑灰色，在产品界面中调和色彩搭配，衬托主色及其他色彩，同时有利于拉开内容层次，使用户更专注于内容。
常用于文字、背景、图标、边框和分割线等元素。
我们根据过往业务经验，设计了线条、填充和文字的中性色。
色板 Palette
| Example | Token | Value | Usage |
|---|---|---|---|
--color-neutral-900 | #252D37 | ||
--color-neutral-800 | #5C626A | ||
--color-neutral-700 | #91959B | ||
--color-neutral-600 | #ACAFB3 | ||
--color-neutral-500 | #C8CACD | ||
--color-neutral-400 | #E3E4E5 | ||
--color-neutral-300 | #EDEEEF | ||
--color-neutral-200 | #F5F6F7 | ||
--color-neutral-100 | #FAFBFC | ||
--color-white | #FFFFFF |
应用场景 Scene
线条 Line
| Example | Token | Value | Usage |
|---|---|---|---|
--color-neutral-400 | #E3E4E5 | 一般用于组件的边框 | |
--color-neutral-300 | #EDEEEF | 突出，容器、区块、元素之间的分割线 | |
--color-neutral-200 | #F5F6F7 | 默认，容器、区块、元素之间的分割线 | |
--color-neutral-100 | #FAFBFC | 最浅的线条，一般用于移动端的场景 |
填充 Fill
| Example | Token | Value | Usage |
|---|---|---|---|
--color-neutral-400 | #E3E4E5 | 点击时的背景颜色 | |
--color-neutral-300 | #EDEEEF | 悬停时的背景颜色 | |
--color-neutral-200 | #F5F6F7 | 最常用的，默认的组件背景 | |
--color-neutral-100 | #FAFBFC | 最浅的，一般用于提示背景 | |
--color-white | #FFFFFF | 白色 |
文字 Text
| Example | Token | Value | Usage |
|---|---|---|---|
--color-neutral-900 | #252D37 | 一级文字，一般用于标题和正文 | |
--color-neutral-800 | #5C626A | 二级文字，一般用于辅助正文或说明 | |
--color-neutral-700 | #91959B | 三级文字，一般用于提示 | |
--color-neutral-500 | #C8CACD | 四级文字，一般用于禁用 |
背景 Backgroud
| Example | Token | Value | Usage |
|---|---|---|---|
--color-neutral-200 | #F5F6F7 | 网页和移动端的全局默认背景色 | |
--color-neutral-100 | #FAFBFC | 浅的，辅助背景色 | |
--color-white | #FFFFFF | 白色背景 |
功能色 Function
功能色的主要作用是向用户明确的传达成功、警告、错误、链接等信息和状态。
我们基于用户对色彩的通用认知，提供了适合不同状态的功能色及其相应色板。
绿色 Green
| Example | Token | Value | Usage |
|---|---|---|---|
--color-green-900 | #005B4D | ||
--color-green-800 | #00826E | ||
--color-green-700 | #00957E | ||
--color-green-600 | #00A98F | primary | |
--color-green-500 | #13BC9D | ||
--color-green-400 | #5AD6B7 | ||
--color-green-300 | #84E3C8 | ||
--color-green-200 | #B1F0Dc | ||
--color-green-100 | #EBF9F6 | light |
蓝色 Blue
| Example | Token | Value | Usage |
|---|---|---|---|
--color-blue-900 | #0034B5 | ||
--color-blue-800 | #0052D9 | ||
--color-blue-700 | #0068D5 | ||
--color-blue-600 | #4787F0 | primary | |
--color-blue-500 | #699EF5 | ||
--color-blue-400 | #73B7FF | ||
--color-blue-300 | #AED5FF | ||
--color-blue-200 | #D5E9FF | ||
--color-blue-100 | #ECF2FE | light |
黄色 Yellow
| Example | Token | Value | Usage |
|---|---|---|---|
--color-primary-900 | #895A00 | ||
--color-primary-800 | #B17400 | ||
--color-primary-700 | #E28800 | ||
--color-primary-600 | #E8A044 | primary | |
--color-primary-500 | #F5B461 | ||
--color-primary-400 | #FFBC3B | ||
--color-primary-300 | #FFD789 | ||
--color-primary-200 | #FFEBC4 | ||
--color-primary-100 | #FFF8EB | light |
红色 Red
| Example | Token | Value | Usage |
|---|---|---|---|
--color-primary-900 | #8E0B18 | ||
--color-primary-800 | #B20E1F | ||
--color-primary-700 | #C9353F | ||
--color-primary-600 | #E34D59 | primary | |
--color-primary-500 | #F36D78 | ||
--color-primary-400 | #F78D94 | ||
--color-primary-300 | #F9B2B9 | ||
--color-primary-200 | #FFE0E4 | ||
--color-primary-100 | #FDECEE | light |
渐变色 Gradient
| Example | Token | Value | Usage |
|---|---|---|---|
--color-gradient-1 | #00B2C6to#00CAB6 | ||
--color-gradient-2 | #0095EEto#00BBD0 | ||
--color-gradient-3 | #1C7BD8to#8870FF |
核心颜色 Core
每种颜色都确定了四种作为组件的交互状态。
比如：默认、悬停、点击、浅色背景，主要用于按钮、输入框、标签等。
遮罩色 Overlay
遮罩色常用于作为底色突出模态窗口，一般以黑色、白色为基色，配合透明度使用。
产品默认的遮罩色为：
--color-neutral-900 opacity:16%，rgba(37, 45, 55 0.16)。
