515 lines
20 KiB
Markdown
515 lines
20 KiB
Markdown
# 浅红色 UI 规范 · 一、基础样式
|
||
|
||
> 返回 [规范目录](README.md) | 本篇：色彩 · 字体 · 阴影 · 圆角 · 间距 · 语义状态色
|
||
|
||
---
|
||
|
||
## 1. 色彩
|
||
|
||
### 1.1 标准色
|
||
|
||
色彩体系分为**主色**与**辅色**两大类。
|
||
|
||
- **主色**：渐红系（ZS-001）、渐蓝系（ZS-002），用于品牌表达与核心交互。
|
||
- **辅色**：渐橙系（FS-001）、渐绿系（FS-002）、渐青系（FS-003）、中性灰系（FS-004），用于状态提示、数据可视化与文字 / 背景 / 分割线。
|
||
|
||
每个色系按明度从浅到深编号（`-01` 最浅，数字越大越深），并附两种渐变色（`-14` 线性渐变、`-15` 径向渐变）。本主题为**浅色主题**：以白 / 浅灰作大面积背景，以深色作正文，红色为品牌强调主色。
|
||
|
||
---
|
||
|
||
#### 1.1.1 色系总览
|
||
|
||
| 类别 | 色系 | 用途定位 | 代码前缀 |
|
||
|------|------|----------|----------|
|
||
| 主色 | 渐红系 | 品牌主色、强调操作、警示与错误 | ZS-001 |
|
||
| 主色 | 渐蓝系 | 信息、链接、次级操作 | ZS-002 |
|
||
| 辅色 | 渐橙系 | 警告、进行中、提示标签 | FS-001 |
|
||
| 辅色 | 渐绿系 | 成功、在线、通过状态 | FS-002 |
|
||
| 辅色 | 渐青系 | 数据高亮、图表、辅助信息 | FS-003 |
|
||
| 辅色 | 中性灰系 | 背景、文字、图标、分割线 | FS-004 |
|
||
|
||
> 每个色系内：`-01 ~ -03` 为**浅色**（用于大面积底色）；`-04 ~ -09` 为**中亮色**（用于标签、图表、提示等）；`-10` 及以后为**深色**（用于小面积按钮、图标等）；`-14 / -15` 为渐变色（用于特殊装饰性小面积底色）。
|
||
|
||
---
|
||
|
||
#### 1.1.2 主色 · 渐红系（ZS-001）
|
||
|
||
品牌主色系。用于主操作按钮、重要强调、错误与危险告警。
|
||
|
||
| 编号 | 色值 | 明度分组 | 说明 |
|
||
|------|------|----------|------|
|
||
| ZS-001 | `#CF1322` | 深色 | 品牌代表红（默认主色基准） |
|
||
| ZS-001-01 | `#FEFAFA` | 浅色 | 极浅红，大面积底色 |
|
||
| ZS-001-02 | `#FEF6F6` | 浅色 | 浅红底色 |
|
||
| ZS-001-03 | `#FEEDED` | 浅色 | 浅红底色 / 错误背景 |
|
||
| ZS-001-04 | `#FDDADC` | 中亮色 | — |
|
||
| ZS-001-05 | `#FCB5B9` | 中亮色 | — |
|
||
| ZS-001-06 | `#FA9196` | 中亮色 | — |
|
||
| ZS-001-07 | `#F86C73` | 中亮色 | 浅红 Tag / 图表 |
|
||
| ZS-001-08 | `#F74750` | 中亮色 | — |
|
||
| ZS-001-09 | `#F5222D` | 中亮色 | **标准红**，主按钮 / 图标 |
|
||
| ZS-001-10 | `#BC0D1E` | 深色 | 深红，Hover |
|
||
| ZS-001-11 | `#A8071A` | 深色 | 深红，Active / Press |
|
||
| ZS-001-12 | `#820014` | 深色 | 极深红 |
|
||
| ZS-001-13 | `#5C0011` | 深色 | 最深红 |
|
||
| ZS-001-14 | `#F5222D → #A8071A` | 线性渐变 | 装饰底色 |
|
||
| ZS-001-15 | `#F86C73 → #F5222D` | 径向渐变 | 装饰底色 |
|
||
|
||
---
|
||
|
||
#### 1.1.3 主色 · 渐蓝系（ZS-002）
|
||
|
||
用于信息提示、链接、次级按钮与图表。
|
||
|
||
| 编号 | 色值 | 明度分组 | 说明 |
|
||
|------|------|----------|------|
|
||
| ZS-002 | `#0062D9` | 深色 | 蓝色代表色（基准） |
|
||
| ZS-002-01 | `#F9FCFF` | 浅色 | 极浅蓝，大面积底色 |
|
||
| ZS-002-02 | `#F4F9FF` | 浅色 | 浅蓝底色 |
|
||
| ZS-002-03 | `#EAF4FF` | 浅色 | 浅蓝底色 / 信息背景 |
|
||
| ZS-002-04 | `#D4E9FF` | 中亮色 | — |
|
||
| ZS-002-05 | `#AAD2FF` | 中亮色 | — |
|
||
| ZS-002-06 | `#80BCFF` | 中亮色 | — |
|
||
| ZS-002-07 | `#55A6FE` | 中亮色 | 浅蓝 Tag / 图表 |
|
||
| ZS-002-08 | `#2B8FFE` | 中亮色 | — |
|
||
| ZS-002-09 | `#0079FE` | 中亮色 | **标准蓝**，链接 / 信息主色 |
|
||
| ZS-002-10 | `#0056C6` | 深色 | 深蓝，Hover |
|
||
| ZS-002-11 | `#004AB3` | 深色 | 深蓝，Active |
|
||
| ZS-002-12 | `#00368C` | 深色 | 极深蓝 |
|
||
| ZS-002-13 | `#002466` | 深色 | 最深蓝 |
|
||
| ZS-002-14 | `#0079FE → #004AB3` | 线性渐变 | 装饰底色 |
|
||
| ZS-002-15 | `#55A6FE → #0079FE` | 径向渐变 | 装饰底色 |
|
||
|
||
---
|
||
|
||
#### 1.1.4 辅色 · 渐橙系（FS-001）
|
||
|
||
用于警告、进行中、待处理等中性偏提醒状态。
|
||
|
||
| 编号 | 色值 | 明度分组 | 说明 |
|
||
|------|------|----------|------|
|
||
| FS-001 | `#D97B00` | 深色 | 橙色代表色（基准） |
|
||
| FS-001-01 | `#FFFCF9` | 浅色 | 极浅橙，大面积底色 |
|
||
| FS-001-02 | `#FFFAF4` | 浅色 | 浅橙底色 |
|
||
| FS-001-03 | `#FFF6EA` | 浅色 | 浅橙底色 / 警告背景 |
|
||
| FS-001-04 | `#FFEED4` | 中亮色 | — |
|
||
| FS-001-05 | `#FFDDAA` | 中亮色 | — |
|
||
| FS-001-06 | `#FFCC80` | 中亮色 | — |
|
||
| FS-001-07 | `#FFBB55` | 中亮色 | 浅橙 Tag / 图表 |
|
||
| FS-001-08 | `#FFAA2B` | 中亮色 | — |
|
||
| FS-001-09 | `#FF9900` | 中亮色 | **标准橙**，警告主色 |
|
||
| FS-001-10 | `#C66D00` | 深色 | 深橙，Hover |
|
||
| FS-001-11 | `#B35F00` | 深色 | 深橙，Active |
|
||
| FS-001-12 | `#8C4600` | 深色 | 极深橙 |
|
||
| FS-001-13 | `#663000` | 深色 | 最深橙 |
|
||
| FS-001-14 | `#FF9900 → #B35F00` | 线性渐变 | 装饰底色 |
|
||
| FS-001-15 | `#FFBB55 → #FF9900` | 径向渐变 | 装饰底色 |
|
||
|
||
---
|
||
|
||
#### 1.1.5 辅色 · 渐绿系（FS-002）
|
||
|
||
用于成功、在线、通过、已完成等正向状态。
|
||
|
||
| 编号 | 色值 | 明度分组 | 说明 |
|
||
|------|------|----------|------|
|
||
| FS-002 | `#1EB07F` | 深色 | 绿色代表色（基准） |
|
||
| FS-002-01 | `#FAFEFD` | 浅色 | 极浅绿，大面积底色 |
|
||
| FS-002-02 | `#F6FDFB` | 浅色 | 浅绿底色 |
|
||
| FS-002-03 | `#EEFCF7` | 浅色 | 浅绿底色 / 成功背景 |
|
||
| FS-002-04 | `#DCF8EE` | 中亮色 | — |
|
||
| FS-002-05 | `#BAF1DD` | 中亮色 | — |
|
||
| FS-002-06 | `#97EBCD` | 中亮色 | — |
|
||
| FS-002-07 | `#74E4BC` | 中亮色 | 浅绿 Tag / 图表 |
|
||
| FS-002-08 | `#52DDAB` | 中亮色 | — |
|
||
| FS-002-09 | `#2FD69A` | 中亮色 | **标准绿**，成功主色 |
|
||
| FS-002-10 | `#189D72` | 深色 | 深绿，Hover |
|
||
| FS-002-11 | `#118A65` | 深色 | 深绿，Active |
|
||
| FS-002-12 | `#07634B` | 深色 | 极深绿 |
|
||
| FS-002-13 | `#043D30` | 深色 | 最深绿 |
|
||
| FS-002-14 | `#2FD69A → #118A65` | 线性渐变 | 装饰底色 |
|
||
| FS-002-15 | `#74E4BC → #2FD69A` | 径向渐变 | 装饰底色 |
|
||
|
||
---
|
||
|
||
#### 1.1.6 辅色 · 渐青系（FS-003）
|
||
|
||
用于数据高亮、图表配色、辅助信息标识。
|
||
|
||
| 编号 | 色值 | 明度分组 | 说明 |
|
||
|------|------|----------|------|
|
||
| FS-003 | `#2F9ACC` | 深色 | 青色代表色（基准） |
|
||
| FS-003-01 | `#FBFDFE` | 浅色 | 极浅青，大面积底色 |
|
||
| FS-003-02 | `#F7FCFE` | 浅色 | 浅青底色 |
|
||
| FS-003-03 | `#EFFAFE` | 浅色 | 浅青底色 |
|
||
| FS-003-04 | `#E0F5FD` | 中亮色 | — |
|
||
| FS-003-05 | `#C1EBFB` | 中亮色 | — |
|
||
| FS-003-06 | `#A2E1F9` | 中亮色 | — |
|
||
| FS-003-07 | `#83D7F7` | 中亮色 | 浅青 Tag / 图表 |
|
||
| FS-003-08 | `#64CDF5` | 中亮色 | — |
|
||
| FS-003-09 | `#45C3F3` | 中亮色 | **标准青**，数据高亮主色 |
|
||
| FS-003-10 | `#2788B9` | 深色 | 深青，Hover |
|
||
| FS-003-11 | `#1E76A6` | 深色 | 深青，Active |
|
||
| FS-003-12 | `#115580` | 深色 | 极深青 |
|
||
| FS-003-13 | `#0B3959` | 深色 | 最深青 |
|
||
| FS-003-14 | `#45C3F3 → #1E76A6` | 线性渐变 | 装饰底色 |
|
||
| FS-003-15 | `#83D7F7 → #45C3F3` | 径向渐变 | 装饰底色 |
|
||
|
||
---
|
||
|
||
#### 1.1.7 辅色 · 中性灰系（FS-004）
|
||
|
||
承载页面背景、正文、备注文字、图标与分割线。浅色主题的核心承载色系。
|
||
|
||
| 编号 | 色值 | 明度分组 | 说明 |
|
||
|------|------|----------|------|
|
||
| FS-004 | `#222222` | 深色 | 中性代表色（基准） |
|
||
| FS-004-01 | `#FFFFFF` | 浅色 | 纯白，页面 / 容器背景、白色文字 |
|
||
| FS-004-02 | `#FAFAFA` | 浅色 | 浅灰背景 |
|
||
| FS-004-03 | `#F5F5F5` | 浅色 | 浅灰背景 / 分割区底 |
|
||
| FS-004-04 | `#E8E8E8` | 中亮色 | 分割线 / 边框 |
|
||
| FS-004-05 | `#DBDBDB` | 中亮色 | 边框 / 禁用底 |
|
||
| FS-004-06 | `#C1C1C1` | 中亮色 | 禁用文字 / 占位符 |
|
||
| FS-004-07 | `#A6A6A6` | 中亮色 | 备注文字 / 图标 |
|
||
| FS-004-08 | `#7F7F7F` | 中亮色 | 次级文字 |
|
||
| FS-004-09 | `#575757` | 中亮色 | 次要正文 |
|
||
| FS-004-10 | `#3D3D3D` | 深色 | 正文加强 |
|
||
|
||
> 灰系用途分层：`01 ~ 03` 背景 / 白色文字 / 分割线；`04 ~ 09` 备注文字及图标；`10` 与基准 `#222222` 用于正文。
|
||
|
||
---
|
||
|
||
#### 1.1.8 功能色（主色 / 字体色 / 辅色 / 背景色）
|
||
|
||
从标准色系中提取，用于具体 UI 角色指定。
|
||
|
||
| 角色 | 色值 | 来源 |
|
||
|------|------|------|
|
||
| 主色（Primary） | `#F5222D` | ZS-001-09 |
|
||
| 主色 Hover | `#CF1322` | ZS-001 |
|
||
| 主色 Active | `#A8071A` | ZS-001-11 |
|
||
| 信息 / 链接色 | `#0079FE` | ZS-002-09 |
|
||
| 成功色 | `#2FD69A` | FS-002-09 |
|
||
| 警告色 | `#FF9900` | FS-001-09 |
|
||
| 错误色 | `#F5222D` | ZS-001-09 |
|
||
| 正文字体色 | `#222222` | FS-004 |
|
||
| 次级字体色 | `#575757` | FS-004-09 |
|
||
| 备注 / 占位字体色 | `#A6A6A6` | FS-004-07 |
|
||
| 禁用字体色 | `#C1C1C1` | FS-004-06 |
|
||
| 页面背景色 | `#FAFAFA` | FS-004-02 |
|
||
| 容器背景色 | `#FFFFFF` | FS-004-01 |
|
||
| 分割线 | `#E8E8E8` | FS-004-04 |
|
||
|
||
---
|
||
|
||
#### 1.1.9 小面积装饰色
|
||
|
||
用于图标点缀、徽标、少量强调，不用于大面积背景。
|
||
|
||
| 色值 | 来源 | 说明 |
|
||
|------|------|------|
|
||
| `#F5222D` | ZS-001-09 | 红色，危险 / 品牌徽标 |
|
||
| `#0079FE` | ZS-002-09 | 蓝色，信息点缀 |
|
||
| `#FF9900` | FS-001-09 | 橙色，提醒点缀 |
|
||
| `#2FD69A` | FS-002-09 | 绿色，在线点 |
|
||
| `#45C3F3` | FS-003-09 | 青色，数据点缀 |
|
||
|
||
---
|
||
|
||
#### 1.1.10 图表配色
|
||
|
||
> **以 §25.1 图表通用色序为准**。本小节给出的是从主 / 辅色提取的强调型色序，适用于需要突出对比的少量序列；柱状 / 饼 / 环 / 面积等多分类图表的标准柔和色序见 [05-图表](05-图表.md)（§25）。
|
||
|
||
**通用图表色序**（面积较大，如柱状图、折线图、饼图）：
|
||
|
||
| 序号 | 色值 | 来源 |
|
||
|------|------|------|
|
||
| 1 | `#F5222D` | ZS-001-09 |
|
||
| 2 | `#0079FE` | ZS-002-09 |
|
||
| 3 | `#FF9900` | FS-001-09 |
|
||
| 4 | `#2FD69A` | FS-002-09 |
|
||
| 5 | `#45C3F3` | FS-003-09 |
|
||
| 6 | `#FA9196` | ZS-001-06 |
|
||
| 7 | `#55A6FE` | ZS-002-07 |
|
||
| 8 | `#FFBB55` | FS-001-07 |
|
||
|
||
**小面积图表色序**（面积较小，如散点、小徽章、迷你图）：
|
||
|
||
| 序号 | 色值 | 来源 |
|
||
|------|------|------|
|
||
| 1 | `#F86C73` | ZS-001-07 |
|
||
| 2 | `#55A6FE` | ZS-002-07 |
|
||
| 3 | `#74E4BC` | FS-002-07 |
|
||
| 4 | `#FFBB55` | FS-001-07 |
|
||
| 5 | `#83D7F7` | FS-003-07 |
|
||
| 6 | `#A6A6A6` | FS-004-07 |
|
||
|
||
---
|
||
|
||
#### 1.1.11 CSS Token 建议
|
||
|
||
```css
|
||
:root {
|
||
/* 主色 · 渐红系 ZS-001 */
|
||
--zs-001: #CF1322;
|
||
--zs-001-01: #FEFAFA; --zs-001-02: #FEF6F6; --zs-001-03: #FEEDED;
|
||
--zs-001-04: #FDDADC; --zs-001-05: #FCB5B9; --zs-001-06: #FA9196;
|
||
--zs-001-07: #F86C73; --zs-001-08: #F74750; --zs-001-09: #F5222D;
|
||
--zs-001-10: #BC0D1E; --zs-001-11: #A8071A; --zs-001-12: #820014;
|
||
--zs-001-13: #5C0011;
|
||
|
||
/* 主色 · 渐蓝系 ZS-002 */
|
||
--zs-002: #0062D9;
|
||
--zs-002-01: #F9FCFF; --zs-002-02: #F4F9FF; --zs-002-03: #EAF4FF;
|
||
--zs-002-04: #D4E9FF; --zs-002-05: #AAD2FF; --zs-002-06: #80BCFF;
|
||
--zs-002-07: #55A6FE; --zs-002-08: #2B8FFE; --zs-002-09: #0079FE;
|
||
--zs-002-10: #0056C6; --zs-002-11: #004AB3; --zs-002-12: #00368C;
|
||
--zs-002-13: #002466;
|
||
|
||
/* 辅色 · 渐橙系 FS-001 */
|
||
--fs-001: #D97B00;
|
||
--fs-001-01: #FFFCF9; --fs-001-02: #FFFAF4; --fs-001-03: #FFF6EA;
|
||
--fs-001-04: #FFEED4; --fs-001-05: #FFDDAA; --fs-001-06: #FFCC80;
|
||
--fs-001-07: #FFBB55; --fs-001-08: #FFAA2B; --fs-001-09: #FF9900;
|
||
--fs-001-10: #C66D00; --fs-001-11: #B35F00; --fs-001-12: #8C4600;
|
||
--fs-001-13: #663000;
|
||
|
||
/* 辅色 · 渐绿系 FS-002 */
|
||
--fs-002: #1EB07F;
|
||
--fs-002-01: #FAFEFD; --fs-002-02: #F6FDFB; --fs-002-03: #EEFCF7;
|
||
--fs-002-04: #DCF8EE; --fs-002-05: #BAF1DD; --fs-002-06: #97EBCD;
|
||
--fs-002-07: #74E4BC; --fs-002-08: #52DDAB; --fs-002-09: #2FD69A;
|
||
--fs-002-10: #189D72; --fs-002-11: #118A65; --fs-002-12: #07634B;
|
||
--fs-002-13: #043D30;
|
||
|
||
/* 辅色 · 渐青系 FS-003 */
|
||
--fs-003: #2F9ACC;
|
||
--fs-003-01: #FBFDFE; --fs-003-02: #F7FCFE; --fs-003-03: #EFFAFE;
|
||
--fs-003-04: #E0F5FD; --fs-003-05: #C1EBFB; --fs-003-06: #A2E1F9;
|
||
--fs-003-07: #83D7F7; --fs-003-08: #64CDF5; --fs-003-09: #45C3F3;
|
||
--fs-003-10: #2788B9; --fs-003-11: #1E76A6; --fs-003-12: #115580;
|
||
--fs-003-13: #0B3959;
|
||
|
||
/* 辅色 · 中性灰系 FS-004 */
|
||
--fs-004: #222222;
|
||
--fs-004-01: #FFFFFF; --fs-004-02: #FAFAFA; --fs-004-03: #F5F5F5;
|
||
--fs-004-04: #E8E8E8; --fs-004-05: #DBDBDB; --fs-004-06: #C1C1C1;
|
||
--fs-004-07: #A6A6A6; --fs-004-08: #7F7F7F; --fs-004-09: #575757;
|
||
--fs-004-10: #3D3D3D;
|
||
|
||
/* 功能色（语义别名） */
|
||
--color-primary: var(--zs-001-09); /* #F5222D */
|
||
--color-primary-hover: var(--zs-001); /* #CF1322 */
|
||
--color-primary-active: var(--zs-001-11); /* #A8071A */
|
||
--color-link: var(--zs-002-09); /* #0079FE */
|
||
--color-success: var(--fs-002-09); /* #2FD69A */
|
||
--color-warning: var(--fs-001-09); /* #FF9900 */
|
||
--color-error: var(--zs-001-09); /* #F5222D */
|
||
--color-text: var(--fs-004); /* #222222 */
|
||
--color-text-secondary: var(--fs-004-09); /* #575757 */
|
||
--color-text-tertiary: var(--fs-004-07); /* #A6A6A6 */
|
||
--color-text-disabled: var(--fs-004-06); /* #C1C1C1 */
|
||
--color-bg-page: var(--fs-004-02); /* #FAFAFA */
|
||
--color-bg-container: var(--fs-004-01); /* #FFFFFF */
|
||
--color-border: var(--fs-004-04); /* #E8E8E8 */
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 2. 字体
|
||
|
||
字体规范分**大屏页面**与**后台系统**两套，分别对应可视化大屏与管理后台两类场景。
|
||
|
||
### 2.1 大屏页面字体规范
|
||
|
||
#### 2.1.1 中文字体：Noto Sans S Chinese
|
||
|
||
| 样式 | 使用场景 |
|
||
|------|----------|
|
||
| 24px Bold | 一级标题 |
|
||
| 24px Medium | 次要一级标题 |
|
||
| 22px Medium | 二级标题 |
|
||
| 22px Regular | 正文 |
|
||
| 20px Regular | 排版空间有限的正文 |
|
||
|
||
#### 2.1.2 数字字体：D-DIN
|
||
|
||
| 样式 | 使用场景 |
|
||
|------|----------|
|
||
| 32px Bold | 重要数据展示 |
|
||
| 32px Regular | 普通数据展示 |
|
||
| 26px Bold | 常规数据展示 |
|
||
| 26px Regular | 常规数据展示 |
|
||
|
||
#### 2.1.3 特殊数字：DS-Digital
|
||
|
||
| 样式 | 使用场景 |
|
||
|------|----------|
|
||
| 50px Bold | 大屏主数据展示 |
|
||
|
||
#### 2.1.4 表格数字：Arial
|
||
|
||
| 样式 | 使用场景 |
|
||
|------|----------|
|
||
| 20px Regular | 表格横纵轴数字 |
|
||
|
||
---
|
||
|
||
### 2.2 后台系统字体规范
|
||
|
||
#### 2.2.1 中文字体：Noto Sans S Chinese
|
||
|
||
| 样式 | 使用场景 |
|
||
|------|----------|
|
||
| 18px Bold | 导航、一级标题 |
|
||
| 18px Medium | 次要一级标题 |
|
||
| 16px Bold | 二级标题 |
|
||
| 16px Medium | 次要二级标题 |
|
||
| 16px Regular | 正文、按钮内部文字等 |
|
||
| 16px Light | 次要正文 |
|
||
|
||
#### 2.2.2 数字字体：D-DIN
|
||
|
||
| 样式 | 使用场景 |
|
||
|------|----------|
|
||
| 26px Bold | 重要数据展示 |
|
||
| 26px Regular | 普通数据展示 |
|
||
| 24px Bold | 常规数据展示（小） |
|
||
| 24px Regular | 常规数据展示（小） |
|
||
|
||
#### 2.2.3 LOGO 字体：DOUYUFont
|
||
|
||
| 样式 | 使用场景 |
|
||
|------|----------|
|
||
| 20px 文字样式 | 页面顶部系统名称 |
|
||
|
||
#### 2.2.4 表格数字：Arial
|
||
|
||
| 样式 | 使用场景 |
|
||
|------|----------|
|
||
| 16px Regular | 表格横纵轴数字 |
|
||
| 14px Regular | 表格横纵轴的数字（空间有限） |
|
||
|
||
---
|
||
|
||
## 3. 阴影
|
||
|
||
> 浅色主题采用**中性投影**（基于 FS-004 `#222222`）营造层级，避免使用彩色外发光。卡片以纯白 `#FFFFFF` 浮于浅灰页面背景 `#FAFAFA` 之上，靠投影与边框区分。
|
||
|
||
### 3.1 容器与卡片配色
|
||
|
||
#### 3.1.1 卡片（标题 + 操作）
|
||
|
||
白底卡片，标题在左、操作区在右（文字操作或图标操作）。
|
||
|
||
| 角色 | 色值 | 来源 |
|
||
|------|------|------|
|
||
| 卡片背景 | `#FFFFFF` | FS-004-01 |
|
||
| 卡片边框 | `#E8E8E8` | FS-004-04 |
|
||
| 卡片阴影 | `0 2px 8px rgba(34, 34, 34, 0.08)` | 基于 FS-004 中性投影 |
|
||
| 标题文字（16px Bold） | `#222222` | FS-004（正文色） |
|
||
| 操作按钮文字 | `#F5222D` | ZS-001-09（主色红，链接型操作） |
|
||
| 次级操作图标（✏️ / ⋯） | `#A6A6A6` | FS-004-07（备注图标色） |
|
||
|
||
#### 3.1.2 卡片新增（占位卡片）
|
||
|
||
虚线描边的"新增入口"卡片，用于引导用户添加内容。
|
||
|
||
| 角色 | 色值 | 来源 |
|
||
|------|------|------|
|
||
| 卡片背景 | `#FFFFFF` | FS-004-01 |
|
||
| 虚线边框 | `#DBDBDB` | FS-004-05 |
|
||
| 加号图标 | `#A6A6A6` | FS-004-07 |
|
||
| Hover 边框 | `#F5222D` | ZS-001-09（悬停时提示可点击） |
|
||
| Hover 加号 | `#F5222D` | ZS-001-09 |
|
||
|
||
#### 3.1.3 阴影投影规则
|
||
|
||
| 层级 | 阴影值 | 使用场景 |
|
||
|------|--------|----------|
|
||
| 一级阴影（卡片浮起） | `0 2px 8px rgba(34, 34, 34, 0.08)` | 普通卡片 |
|
||
| 二级阴影（hover / 强调） | `0 4px 16px rgba(34, 34, 34, 0.12)` | 卡片 hover、悬浮按钮、弹出层 |
|
||
| 三级阴影（弹窗 / Modal） | `0 8px 32px rgba(34, 34, 34, 0.16)` | Dialog、Drawer |
|
||
|
||
---
|
||
|
||
## 4. 圆角
|
||
|
||
### 4.1 圆角统一规范
|
||
|
||
| 元素 | 圆角值 | 说明 |
|
||
|------|--------|------|
|
||
| 按钮 | `2px` | 所有按钮（主 / 次要 / 默认 / 文本）统一使用 |
|
||
| 卡片 | `4px` | 内容卡片、标题+操作卡片、卡片新增占位 |
|
||
| 页面分栏框 | `4px` | 外层容器、分栏区域 |
|
||
| 输入框 / 选择器 | `2px` | 与按钮一致，保持表单内对齐 |
|
||
| Tag / Badge | `2px` | 与按钮一致 |
|
||
| Modal / Drawer | `4px` | 与卡片一致 |
|
||
|
||
---
|
||
|
||
## 6. 间距
|
||
|
||
> 全站以 `8px (0.5rem)` 为对照基准单位，划分"密 / 疏"两个层次。所有间距取值均来自下列阶梯，禁止使用非阶梯值（如 5px、13px）。
|
||
|
||
### 6.1 间距阶梯
|
||
|
||
| 阶 | px | rem | 分组 | 典型场景 |
|
||
|----|------|--------|------|----------|
|
||
| 1 | `4px` | `0.25rem` | 密 | 图标与文字间距、Tag 内边距、紧凑徽标 |
|
||
| 2 | `8px` | `0.5rem` | 密 | 行内元素相邻、按钮组间距、表单 label 与控件 |
|
||
| 3 | `12px` | `0.75rem` | 密 | 表单项垂直间距、列表项内边距 |
|
||
| 4 | `16px` | `1rem` | 密 | 卡片内容内边距、模块内分隔 |
|
||
| 5 | `24px` | `1.5rem` | 疏 | 模块之间、Section 内边距 |
|
||
| 6 | `32px` | `2rem` | 疏 | 卡片之间、表单组之间 |
|
||
| 7 | `40px` | `2.5rem` | 疏 | 主区块之间、页面 Header / Footer 内边距 |
|
||
| 8 | `56px` | `3.5rem` | 疏 | 页面段落级隔断、Banner 区域 |
|
||
|
||
> "密"对应紧凑信息密度（表格、表单、卡片内部）；"疏"对应视觉呼吸（模块之间、页面整体留白）。**16px 是"密"的上限，24px 是"疏"的下限**，两者之间不应再插入自定义值。
|
||
|
||
### 6.2 使用原则
|
||
|
||
- **同层级一致**：同一布局层级内的间距必须使用同一阶值；多种取值会破坏节奏。
|
||
- **就近取阶**：相邻区块的间距尽量从相邻阶梯取值（如 `16px → 24px`），跨越过多阶（如 `8px → 56px`）会让视觉断裂。
|
||
- **密疏不混用**：一个组件内部全部用"密"，外部用"疏"，避免内 / 外间距颠倒。
|
||
- **优先 8 的倍数**：除最小阶 `4px` 外，所有阶皆为 8 的倍数，方便 4/8 网格对齐。
|
||
- **响应式按比例衰减**：移动端可整体降一阶（如 `24px → 16px`），但仍在阶梯内。
|
||
|
||
### 6.3 CSS Token 建议
|
||
|
||
```css
|
||
:root {
|
||
--spacing-1: 4px; /* 0.25rem */
|
||
--spacing-2: 8px; /* 0.5rem */
|
||
--spacing-3: 12px; /* 0.75rem */
|
||
--spacing-4: 16px; /* 1rem */
|
||
--spacing-5: 24px; /* 1.5rem */
|
||
--spacing-6: 32px; /* 2rem */
|
||
--spacing-7: 40px; /* 2.5rem */
|
||
--spacing-8: 56px; /* 3.5rem */
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 20. 语义状态色（统一约定）
|
||
|
||
> 进度、状态标签、表格状态、时间轴等大量组件共用同一套语义色。后续章节直接引用本表。
|
||
|
||
| 语义 | 文字色 | 浅底背景 | 实填背景 | 来源 |
|
||
|------|--------|----------|----------|------|
|
||
| 成功 / 完成（绿） | `#189D72` (FS-002-10) | `#EEFCF7` (FS-002-03) | `#2FD69A` (FS-002-09) | 渐绿系 |
|
||
| 警告 / 进行中（橙） | `#FF9900` (FS-001-09) | `#FFF6EA` (FS-001-03) | `#FF9900` (FS-001-09) | 渐橙系 |
|
||
| 错误 / 失败（红） | `#F5222D` (ZS-001-09) | `#FEEDED` (ZS-001-03) | `#F5222D` (ZS-001-09) | 渐红系 |
|
||
| 信息 / 等待（蓝） | `#0079FE` (ZS-002-09) | `#EAF4FF` (ZS-002-03) | `#0079FE` (ZS-002-09) | 渐蓝系 |
|
||
| 待更新（青） | `#45C3F3` (FS-003-09) | `#EFFAFE` (FS-003-03) | `#45C3F3` (FS-003-09) | 渐青系 |
|
||
| 未开始 / 中性（灰） | `#7F7F7F` (FS-004-08) | `#F5F5F5` (FS-004-03) | `#A6A6A6` (FS-004-07) | 中性灰系 |
|
||
|
||
---
|
||
|
||
|
||
---
|
||
|
||
> 返回 [规范目录](README.md)
|