wsk/deerflow-code

Fork 0

gozeros b638b541d0 初始化

2026-09-07 18:24:55 +08:00

20 KiB

Raw Permalink Blame History

浅红色 UI 规范 · 一、基础样式

返回规范目录　|　本篇：色彩 · 字体 · 阴影 · 圆角 · 间距 · 语义状态色

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-图表（§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 建议

: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 建议

: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)	中性灰系

返回规范目录

20 KiB Raw Permalink Blame History Unescape Escape