深蓝色 UI 规范 · 00 基础（色彩 / 字体 / 阴影 / 圆角 / 间距 / 分割线）
本文件是《深蓝色 UI 规范》拆分后的基础篇（§1–§7），是全站设计令牌的唯一来源。
其余分册见同目录 README.md；可直接 import 的变量见 tokens.css。
跨章节 §N 编号全局唯一，所属文件见 README 的「§ 索引」。
本篇目录（§1–§7）：1 色彩 · 2 字体 · 3 阴影 · 4 圆角 · 5 按钮 · 6 分割线 · 7 间距
1. 色彩
1.1 标准色
色彩体系由四个色系构成，每个色系分主色与辅色两组，每组按明度从浅到深编号（01 最浅，数字越大越深）。
1.1.1 色系总览
| 色系 |
用途定位 |
代码前缀 |
| 渐红系 |
警示、错误、强调操作 |
ZS-001 |
| 渐蓝系 |
信息、链接、次级操作 |
ZS-002 |
| 渐青系 |
成功、在线状态、数据高亮 |
ZS-003 |
| 深蓝系 |
页面背景、容器、导航底色 |
ZS-004 |
1.1.2 渐红系（ZS-001）
用于错误提示、危险操作、重要告警。
| 编号 |
色值 |
说明 |
| ZS-001-01 |
#FFF1F0 |
极浅红，错误背景底色 |
| ZS-001-02 |
#FFCCC7 |
浅红，输入框错误边框 |
| ZS-001-03 |
#FFA39E |
— |
| ZS-001-04 |
#FF7875 |
— |
| ZS-001-05 |
#FF4D4F |
标准红，Tag / Badge |
| ZS-001-06 |
#F5222D |
主色红，按钮 / 图标 |
| ZS-001-07 |
#CF1322 |
深红，Hover 状态 |
| ZS-001-08 |
#A8071A |
深红，Active / Press |
| ZS-001-09 |
#820014 |
极深红 |
| ZS-001-10 |
#5C0011 |
最深红 |
1.1.3 渐蓝系（ZS-002）
用于信息提示、链接、次级按钮。
| 编号 |
色值 |
说明 |
| ZS-002-01 |
#E6F4FF |
极浅蓝，信息背景底色 |
| ZS-002-02 |
#BAE0FF |
浅蓝 |
| ZS-002-03 |
#91CAFF |
— |
| ZS-002-04 |
#69B1FF |
— |
| ZS-002-05 |
#4096FF |
标准蓝，链接 / 信息 Tag |
| ZS-002-06 |
#1677FF |
主色蓝，主操作按钮 |
| ZS-002-07 |
#0958D9 |
深蓝，Hover |
| ZS-002-08 |
#003EB3 |
深蓝，Active |
| ZS-002-09 |
#002C8C |
极深蓝 |
| ZS-002-10 |
#001D6C |
最深蓝 |
1.1.4 渐青系（ZS-003）
用于成功状态、在线标识、数据图表高亮。
| 编号 |
色值 |
说明 |
| ZS-003-01 |
#E6FFFB |
极浅青，成功背景 |
| ZS-003-02 |
#B5F5EC |
浅青 |
| ZS-003-03 |
#87E8DE |
— |
| ZS-003-04 |
#5CDBD3 |
— |
| ZS-003-05 |
#36CFC9 |
标准青，成功 Tag |
| ZS-003-06 |
#13C2C2 |
主色青，在线点 / 图标 |
| ZS-003-07 |
#08979C |
深青，Hover |
| ZS-003-08 |
#006D75 |
深青，Active |
| ZS-003-09 |
#00474F |
极深青 |
| ZS-003-10 |
#002329 |
最深青 |
1.1.5 深蓝系（ZS-004）
用于页面背景、导航栏、侧边栏、卡片容器。这是深蓝主题的核心色系。
| 编号 |
色值 |
说明 |
| ZS-004-01 |
#E8EDF5 |
极浅，分割线 / 禁用底色 |
| ZS-004-02 |
#C5CFE0 |
浅，边框 |
| ZS-004-03 |
#9BADC8 |
— |
| ZS-004-04 |
#6E88B0 |
— |
| ZS-004-05 |
#4A6491 |
中深蓝，次级文字 |
| ZS-004-06 |
#2D4473 |
深蓝，卡片容器背景 |
| ZS-004-07 |
#1A2F5A |
深蓝，侧边栏背景 |
| ZS-004-08 |
#122347 |
深蓝，导航栏背景 |
| ZS-004-09 |
#0C1836 |
极深蓝，页面背景 |
| ZS-004-10 |
#060E24 |
最深，全局底色 |
1.1.6 功能色（主色 / 字体色 / 辅色 / 背景色）
从标准色系中提取，用于具体 UI 角色指定。
| 角色 |
色值 |
来源 |
| 主色（Primary） |
#1677FF |
ZS-002-06 |
| 主色 Hover |
#0958D9 |
ZS-002-07 |
| 主色 Active |
#003EB3 |
ZS-002-08 |
| 正常字体色 |
#C5CFE0 |
ZS-004-02 |
| 次级字体色 |
#6E88B0 |
ZS-004-04 |
| 禁用字体色 |
#4A6491 |
ZS-004-05 |
| 辅色（Accent） |
#13C2C2 |
ZS-003-06 |
| 页面背景色 |
#0C1836 |
ZS-004-09 |
| 容器背景色 |
#1A2F5A |
ZS-004-07 |
| 白色 |
#FFFFFF |
— |
1.1.7 小面积装饰色
用于图标点缀、徽标、少量强调，不用于大面积背景。
| 色值 |
说明 |
#6388FF |
紫蓝，图标装饰 |
#F5222D |
红色，危险徽标 |
#12306C |
深蓝，品牌点缀 |
#478880 |
青绿，辅助点缀 |
#950404 |
深红，重要告警点 |
1.1.8 图表配色
通用图表色序（面积较大，如柱状图、折线图、饼图）：
| 序号 |
色值 |
| 1 |
#1677FF |
| 2 |
#13C2C2 |
| 3 |
#4096FF |
| 4 |
#36CFC9 |
| 5 |
#69B1FF |
| 6 |
#5CDBD3 |
| 7 |
#91CAFF |
| 8 |
#87E8DE |
小面积图表色序（面积较小，如散点、小徽章、迷你图）：
| 序号 |
色值 |
| 1 |
#4096FF |
| 2 |
#36CFC9 |
| 3 |
#FF4D4F |
| 4 |
#FFA39E |
| 5 |
#6388FF |
| 6 |
#478880 |
1.1.9 功能语义色（Functional / Status）
承载「成功 / 警告 / 错误 / 信息 / 处理中」语义。其中错误红、信息蓝、处理中青直接复用标准色；成功绿、警告橙为标准色系之外的补充色（深色背景下 ZS-003 青偏冷、且无现成橙），在此正式收录。全站语义场景一律引用本表，不再各处自定义。
| 语义 |
色值 |
来源 |
典型用途 |
| 成功 / 已完成 |
#52C41A |
补充色（绿） |
成功提示、完成状态、通过校验 |
| 警告 / 进行中 |
#FAAD14 |
补充色（橙） |
警告提示、进行中、需注意 |
| 错误 / 失败 |
#F5222D |
ZS-001-06 |
错误提示、删除、失败状态 |
| 信息 / 默认 |
#1677FF |
ZS-002-06 |
信息提示、主操作、链接 |
| 处理中 / 等待 |
#13C2C2 |
ZS-003-06 |
处理中、排队、等待反馈 |
浅底变体（Message / Alert / Tag 底色）：前景色取 16% 透明度，如成功底 rgba(82,196,26,0.16)、警告底 rgba(250,173,20,0.16)。
CSS Token 见 tokens.css 的 --func-success / --func-warning / --func-error / --func-info / --func-processing。
2. 字体
2.1 全局样式 - 字体
2.1.1 大屏页面字体规范
中文字体：Noto Sans S Chinese
| 样式 |
使用场景 |
| 24px Bold |
一级标题 |
| 24px Medium |
次要一级标题 |
| 22px Medium |
二级标题 |
| 22px Regular |
正文 |
| 20px Regular |
排版空间有限的正文 |
数字字体：D-DIN
| 样式 |
使用场景 |
| 32px Bold |
重要数据展示 |
| 32px Regular |
普通数据展示 |
| 26px Bold |
常规数据展示 |
| 26px Regular |
常规数据展示 |
特殊数字：DS-Digital
| 样式 |
使用场景 |
| 50px Bold |
大屏主数据展示 |
表格字体：Arial
| 样式 |
使用场景 |
| 20px Regular |
表格横纵轴数字 |
2.1.2 后台系统字体规范
中文字体：Noto Sans S Chinese
| 样式 |
使用场景 |
| 18px Bold |
导航、一级标题 |
| 18px Medium |
次要一级标题 |
| 16px Bold |
二级标题 |
| 16px Medium |
次要二级标题 |
| 16px Regular |
正文、按钮内部文字等 |
| 16px Light |
次要正文 |
数字字体：D-DIN
| 样式 |
使用场景 |
| 26px Bold |
重要数据展示 |
| 26px Regular |
普通数据展示 |
| 24px Bold |
常规数据展示（小） |
| 24px Regular |
常规数据展示（小） |
LOGO 字体：DOUYUFont
| 样式 |
使用场景 |
| 20px 文字样式 |
页面顶部系统名称 |
表格数字：Arial
| 样式 |
使用场景 |
| 16px Regular |
表格横纵轴数字 |
| 14px Regular |
表格横轴数字（空间有限） |
3. 阴影
3.1 容器与卡片配色
阴影组通过深浅层级叠加形成空间感：外层容器最深，内层卡片次之，边框与高亮文字使用主色或字体色。
3.1.1 外层容器
| 角色 |
色值 |
来源 |
| 页面 / 最外层背景 |
#060E24 |
ZS-004-10 |
| 分栏容器背景 |
#0C1836 |
ZS-004-09 |
3.1.2 卡片（标题 + 操作）
| 角色 |
色值 |
来源 |
| 卡片背景 |
#122347 |
ZS-004-08 |
| 卡片边框 |
#1A2F5A |
ZS-004-07 |
| 卡片阴影（外发光） |
rgba(22, 119, 255, 0.12) |
基于 ZS-002-06 主色蓝 12% 透明度 |
| 标题文字（16px Bold） |
#C5CFE0 |
ZS-004-02（正常字体色） |
| 操作按钮文字 |
#4096FF |
ZS-002-05（标准蓝，链接） |
| 次级操作图标（✏️ / ⋯） |
#6E88B0 |
ZS-004-04（次级字体色） |
3.1.3 卡片新增（占位卡片）
虚线描边的"新增入口"卡片，用于引导用户添加内容。
| 角色 |
色值 |
来源 |
| 卡片背景 |
#0C1836 |
ZS-004-09（与外层同色，营造凹陷感） |
| 虚线边框 |
#4096FF |
ZS-002-05 |
| 加号图标 |
#4096FF |
ZS-002-05 |
3.1.4 阴影投影规则
| 层级 |
阴影值 |
使用场景 |
| 一级阴影（卡片悬浮） |
0 2px 8px rgba(22, 119, 255, 0.12) |
普通卡片 |
| 二级阴影（hover / 强调） |
0 4px 16px rgba(22, 119, 255, 0.24) |
卡片 hover、弹出层 |
| 三级阴影（弹窗 / Modal） |
0 8px 32px rgba(6, 14, 36, 0.6) |
Dialog、Drawer |
4. 圆角
4.1 圆角统一规范
| 元素 |
圆角值 |
说明 |
| 按钮 |
2px |
所有按钮（主按钮 / 次按钮 / 文本按钮）统一使用 |
| 卡片 |
4px |
内容卡片、标题+操作卡片、卡片新增占位 |
| 页面分栏框 |
4px |
外层容器、分栏区域 |
| 输入框 / 选择器 |
2px |
与按钮一致，保持表单内对齐 |
| Tag / Badge |
2px |
与按钮一致 |
| Modal / Drawer |
4px |
与卡片一致 |
4.2 按钮配色（圆角 2px）
4.2.1 主按钮（Primary）
| 角色 |
色值 |
来源 |
| 背景 |
#1677FF |
ZS-002-06 |
| 文字 |
#FFFFFF |
— |
| Hover 背景 |
#0958D9 |
ZS-002-07 |
| Active 背景 |
#003EB3 |
ZS-002-08 |
| 禁用背景 |
#4A6491 |
ZS-004-05 |
| 禁用文字 |
#6E88B0 |
ZS-004-04 |
4.2.2 次按钮（Outline / Default）
| 角色 |
色值 |
来源 |
| 背景 |
transparent |
— |
| 边框 |
#6E88B0 |
ZS-004-04 |
| 文字 |
#C5CFE0 |
ZS-004-02 |
| Hover 边框 |
#4096FF |
ZS-002-05 |
| Hover 文字 |
#4096FF |
ZS-002-05 |
| Active 边框 |
#1677FF |
ZS-002-06 |
4.3 卡片与分栏（圆角 4px）
| 角色 |
色值 |
来源 |
| 卡片背景 |
#122347 |
ZS-004-08 |
| 卡片边框 |
#1A2F5A |
ZS-004-07 |
| 分栏框背景 |
#0C1836 |
ZS-004-09 |
| 分栏框边框 |
#1A2F5A |
ZS-004-07 |
5. 按钮
全部圆角 2px，文字字号 14px（小尺寸）/ 14px（正常尺寸），字体 Noto Sans S Chinese Regular。
5.1 按钮尺寸
| 规格 |
高度 |
内边距 |
使用场景 |
| 小 |
28px |
0 10px |
空间小的板块内部，如表格中、卡片标题等 |
| 正常 |
32px |
0 14px |
默认尺寸，所有常用按钮 |
5.2 按钮类型与配色
5.2.1 主按钮（Primary）
一个操作区域只能有一个主按钮。
| 状态 |
背景 |
边框 |
文字 |
| 默认 |
#1677FF (ZS-002-06) |
— |
#FFFFFF |
| Hover |
#0958D9 (ZS-002-07) |
— |
#FFFFFF |
| Active |
#003EB3 (ZS-002-08) |
— |
#FFFFFF |
| 失效 |
rgba(22, 119, 255, 0.35) |
— |
#6E88B0 (ZS-004-04) |
5.2.2 默认按钮（Default / Outline）
用于"取消 / 返回"等次要操作，与主按钮成对出现时主按钮在右。
| 状态 |
背景 |
边框 |
文字 |
| 默认 |
transparent |
#6E88B0 (ZS-004-04) |
#C5CFE0 (ZS-004-02) |
| Hover |
rgba(22, 119, 255, 0.08) |
#4096FF (ZS-002-05) |
#4096FF (ZS-002-05) |
| Active |
rgba(22, 119, 255, 0.16) |
#1677FF (ZS-002-06) |
#1677FF (ZS-002-06) |
| 失效 |
transparent |
#4A6491 (ZS-004-05) |
#4A6491 (ZS-004-05) |
5.2.3 文本按钮（Text）
用于表格操作、文件下载等。无背景与边框，靠文字色识别。
| 状态 |
文字 |
装饰 |
| 默认 |
#4096FF (ZS-002-05) |
无下划线 |
| Hover |
#1677FF (ZS-002-06) |
显示下划线（与文字同色） |
| Active |
#0958D9 (ZS-002-07) |
下划线 |
| 失效 |
#4A6491 (ZS-004-05) |
无装饰 |
5.2.4 图标按钮（Icon-only）
用于增强辨识度或节省空间。仅图标，无文字。
| 变体 |
背景 |
图标颜色 |
| 主色（常用） |
#1677FF (ZS-002-06) |
#FFFFFF |
| 主色 Hover |
#0958D9 (ZS-002-07) |
#FFFFFF |
| 危险（删除等） |
#F5222D (ZS-001-06) |
#FFFFFF |
| 危险 Hover |
#CF1322 (ZS-001-07) |
#FFFFFF |
| 透明（仅图标） |
transparent |
#6E88B0 (ZS-004-04) → hover #4096FF (ZS-002-05) |
5.3 按钮组合
5.3.1 文字 + 下拉按钮（含 ▾）
两种填充：
| 形态 |
配色规则 |
| 默认（Outline） |
沿用 §5.2.2 默认按钮，箭头 ▾ 与文字同色 #C5CFE0 |
| 主色（Filled） |
沿用 §5.2.1 主按钮，箭头 ▾ 同步白色 #FFFFFF |
5.3.2 图标 + 文字按钮（如 + 正常）
| 形态 |
配色规则 |
| 默认（Outline） |
沿用 §5.2.2，左侧图标颜色与文字一致 #C5CFE0 |
| 主色（Filled） |
沿用 §5.2.1，左侧图标与文字一致 #FFFFFF |
5.3.3 文本按钮 + 图标（"更多 »"、"展开 ⌄"、"下一页 »"、"« 上一页"）
| 角色 |
色值 |
| 文字 + 图标（默认） |
#4096FF (ZS-002-05) |
| 文字 + 图标（Hover） |
#1677FF (ZS-002-06) |
| 失效 |
#4A6491 (ZS-004-05) |
图标可在文字前或后；多个文本按钮排成一行时，间距 16px，无分隔符。
5.3.4 主按钮 + 默认按钮组合（如"确定 / 取消 / 返回"）
- 排列顺序：默认按钮在左，主按钮在右（最右侧为主操作）
- 按钮间距：
8px
- 示例：
[ 返回 ] [ 取消 ] [ 确定 ]
- 配色：主按钮沿用 §5.2.1，其余沿用 §5.2.2
5.4 其他按钮
5.4.1 悬浮状态（Floating）
用于 Banner / 登录 / 视觉冲击强等展示场景。配色与主按钮一致，叠加阴影抬升。
| 状态 |
阴影 |
| 默认 |
0 2px 8px rgba(22, 119, 255, 0.12)（§3.1.4 一级阴影） |
| Hover |
0 4px 16px rgba(22, 119, 255, 0.24)（§3.1.4 二级阴影） |
| Active |
阴影消失，按下感 |
5.4.2 加载中（Loading）
用于异步操作等待反馈。点击瞬间将按钮锁定，文字前显示旋转图标。
| 角色 |
色值 |
| 背景 |
#1677FF (ZS-002-06) |
| 文字 |
#FFFFFF |
| 加载图标 |
#FFFFFF，旋转动画 1.2s linear infinite |
| 不可点击 |
鼠标 cursor: not-allowed |
与失效态的区别：失效是"不可操作"，加载是"操作进行中"——保留品牌主色，只是不可再次触发。
6. 分割线
统一线宽 1px，颜色全部从 ZS-004 深蓝系取色，与深色背景保持低对比度但仍可识别。
6.1 水平分割线
水平分割线常用来对不同元素内容进行分割。
| 类型 |
色值 |
来源 |
样式 |
使用场景 |
| 实线（默认） |
#4A6491 |
ZS-004-05 |
border-top: 1px solid |
模块间、列表项间分割 |
| 实线（强调） |
#6E88B0 |
ZS-004-04 |
border-top: 1px solid |
主区块标题下方、卡片头部分割 |
| 实线（弱化） |
#2D4473 |
ZS-004-06 |
border-top: 1px solid |
卡片内部、密集列表分隔 |
| 虚线 |
#4A6491 |
ZS-004-05 |
border-top: 1px dashed |
次级 / 层级内分割，提示"非主结构" |
| 主色实线（高亮） |
#1677FF |
ZS-002-06 |
border-top: 1px solid |
强调分隔，少量使用（如当前激活区块底边） |
6.2 垂直分割线
垂直分割线常用来做行内分割（如导航项之间、状态指示之间、表格列头之间）。
| 类型 |
色值 |
来源 |
样式 |
使用场景 |
| 实线（默认） |
#4A6491 |
ZS-004-05 |
border-left: 1px solid |
行内 inline 元素分割（面包屑、操作按钮组） |
| 实线（弱化） |
#2D4473 |
ZS-004-06 |
border-left: 1px solid |
表格列分割、紧凑布局 |
| 虚线 |
#4A6491 |
ZS-004-05 |
border-left: 1px dashed |
多列对齐辅助、辅助参考线 |
6.3 规格与间距
| 规则 |
取值 |
| 线宽 |
1px |
| 水平分割线与上下元素间距 |
≥ 8px（紧凑布局可用 4px） |
| 垂直分割线与左右元素间距 |
≥ 8px（行内紧凑 4px） |
| 垂直分割线高度 |
与文字行高一致，约 12–14px（也可全高跟随容器） |
| 透明度 |
必要时叠 opacity: 0.6 实现"更弱"层级 |
6.4 CSS 参考
/* 默认水平分割线 */
.divider-h { border-top: 1px solid #4A6491; }
.divider-h-strong { border-top: 1px solid #6E88B0; }
.divider-h-weak { border-top: 1px solid #2D4473; }
.divider-h-dashed { border-top: 1px dashed #4A6491; }
.divider-h-accent { border-top: 1px solid #1677FF; }
/* 垂直分割线 */
.divider-v { border-left: 1px solid #4A6491; height: 14px; display: inline-block; vertical-align: middle; }
.divider-v-weak { border-left: 1px solid #2D4473; height: 14px; display: inline-block; vertical-align: middle; }
.divider-v-dashed { border-left: 1px dashed #4A6491; height: 14px; display: inline-block; vertical-align: middle; }
7. 间距
全站以 8px (0.5rem) 为对照基准单位，划分"密 / 疏"两个层次。所有间距取值均来自下列阶梯，禁止使用非阶梯值（如 5px、13px）。
7.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 是"疏"的下限，两者之间不应再插入自定义值。
7.2 使用原则
- 同层级一致：同一布局层级内的间距必须使用同一阶值；多种取值会破坏节奏。
- 就近取阶：相邻区块的间距尽量从相邻阶梯取值（如
16px → 24px），跨越过多阶（如 8px → 56px）会让视觉断裂。
- 密疏不混用：一个组件内部全部用"密"，外部用"疏"，避免内/外间距颠倒。
- 优先 8 的倍数：除最小阶
4px 外，所有阶皆为 8 的倍数，方便 4/8 网格对齐。
- 响应式按比例衰减：移动端可整体降一阶（如
24px → 16px），但仍在阶梯内。
7.3 CSS Token 建议
: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 */
}
7.4 与已有规范的对齐
| 已有规则 |
对应阶 |
| §4.x 卡片圆角内边距 |
--spacing-4 (16px) |
§5.3.4 主+默认按钮组合间距 8px |
--spacing-2 |
§5.3.3 文本按钮间距 16px |
--spacing-4 |
§6.3 分割线与上下元素间距 ≥ 8px |
--spacing-2 起 |
