wsk/deerflow-code

gozeros b638b541d0 初始化

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

4.1 KiB

Raw Permalink Blame History

浅红色 UI 规范

浅色主题设计规范：以白 / 浅灰作大面积背景、深色作正文、红色（#F5222D）为品牌强调主色。

全文按主题拆分为 6 篇，章节号（§1 ~ §28）全局唯一，跨篇引用（如"沿用 §5.2.1"）按下表定位即可。

篇目导航

篇	文件	内容
一、基础样式	01-基础样式.md	§1 色彩 · §2 字体 · §3 阴影 · §4 圆角 · §6 间距 · §20 语义状态色
二、按钮与表单	02-按钮与表单.md	§5 按钮 · §12 表单 · §13 输入框 · §14 选择按钮 · §15 标签输入框 · §16 上传
三、导航	03-导航.md	§7 导航组件 · §8 面包屑 · §9 页头与分页 · §10 步骤条 · §11 页签与锚点
四、数据展示	04-数据展示.md	§17 弹窗 · §18 卡片 · §19 折叠面板 · §21 进度条 · §22 表格 · §23 标签 · §24 时间轴
五、图表	05-图表.md	§25 图表（通用色序 / 柱 / 折线 / 甘特 / 饼环）
六、页面与布局	06-页面与布局.md	§26 统计与汇总卡 · §27 实体卡片 · §28 综合页面布局示例

章节速查（§ → 篇）

§	章节	所在篇
1	色彩	一
2	字体	一
3	阴影	一
4	圆角	一
5	按钮	二
6	间距	一
7	导航组件	三
8	面包屑	三
9	页头与分页	三
10	步骤条	三
11	页签与锚点	三
12	表单	二
13	输入框	二
14	选择按钮	二
15	标签输入框	二
16	上传	二
17	弹出式窗口	四
18	卡片	四
19	折叠面板	四
20	语义状态色	一
21	进度条	四
22	表格	四
23	标签	四
24	时间轴	四
25	图表	五
26	统计与汇总卡	六
27	实体卡片	六
28	综合页面布局示例	六

颜色速查

完整色板与编号见 §1 色彩。最常用的功能色：

角色	色值	编号
主色 Primary	`#F5222D`	ZS-001-09
主色 Hover	`#CF1322`	ZS-001
主色 Active	`#A8071A`	ZS-001-11
链接 / 信息	`#0079FE`	ZS-002-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

语义状态色（成功 / 警告 / 错误 / 信息 / 待更新 / 中性，详见 §20）：

语义	文字	浅底	实填
成功（绿）	`#189D72`	`#EEFCF7`	`#2FD69A`
警告（橙）	`#FF9900`	`#FFF6EA`	`#FF9900`
错误（红）	`#F5222D`	`#FEEDED`	`#F5222D`
信息（蓝）	`#0079FE`	`#EAF4FF`	`#0079FE`
待更新（青）	`#45C3F3`	`#EFFAFE`	`#45C3F3`
中性（灰）	`#7F7F7F`	`#F5F5F5`	`#A6A6A6`

通用约定速记

圆角：按钮 / 输入框 / Tag 2px；卡片 / 分栏 / Modal 4px（§4）
间距阶梯：4 / 8 / 12 / 16（密）· 24 / 32 / 40 / 56（疏），16 是密的上限、24 是疏的下限（§6）
按钮尺寸：小 24px / 正常 32px（§5.1）
字体：中文 Noto Sans S Chinese，数字 D-DIN（§2）