# 浅红色 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)