字体排版
优视慧平台使用 Inter + Noto Sans SC 作为主字体栈，确保中英文混排的视觉一致性。代码场景使用 JetBrains Mono 等宽字体。
字体族 Font Family
主字体 UI Font
优视慧智能内容审核平台 YouShiHui Content Review
Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif
代码字体 Code Font
const review = await aiCheck(content);
"JetBrains Mono", "SF Mono", "Fira Code", Consolas, monospace
字号阶梯 Font Size Scale
12px
辅助文字 — 审核状态标签、时间戳
14px
正文 — 列表内容、表单标签、描述文字
16px
大正文 — 主要内容区、卡片标题
18px
小标题 — 区块标题、弹窗标题
20px
标题 — 页面二级标题
24px
大标题 — 页面主标题
32px
展示标题 — 数据大屏、欢迎页
字重层级 Font Weight
Aa
Regular
400
Aa
Medium
500
Aa
Semibold
600
Aa
Bold
700
行高 Line Height
line-height: 1.5
正文行高 — 适用于段落、列表
智能内容审核平台基于自然语言处理与计算机视觉技术，对文本、图片、视频等多媒体内容进行自动化审核，有效提升审核效率与准确性。
line-height: 1.2
标题行高 — 适用于各级标题
优视慧智能审核平台
色彩系统
基于广电政务蓝配色方案，定义品牌色、功能色、中性色、状态色与可视化色板，确保全平台视觉一致性。
品牌色 Brand Colors — 广电政务蓝
1
primary-1
#E8F4F8
2
primary-2
#C5E0ED
3
primary-3
#9BC5D8
4
primary-4
#72A8C4
5
primary-5
#4B8CB0
6
primary-6
#3A7BD5
7
primary-7
#2B5F8E
8
primary-8
#1B3A5C
9
primary-9
#152D48
10
primary-10
#0F2135
品牌蓝 primary-6: 按钮、链接
深蓝 primary-8: 侧边栏、导航
浅蓝 primary-1: 信息背景
功能色 Functional Colors
成功 Success
1
#F0FFF0
2
#D1F3D1
3
#B0E7B0
4
#8FDA8F
5
#6CCE6C
6
#4CAF50
警告 Warning
1
#FFF9F0
2
#FFEBC7
3
#FFDD9E
4
#FFD075
5
#F5A623
6
#D9911F
危险 Danger
1
#FFF5F5
2
#FFD6D6
3
#FFB3B3
4
#FF8585
5
#E74C3C
6
#C0392B
中性色 Neutral Colors
背景 Background
1
bg-1 卡片
#FFFFFF
2
bg-2 页面
#F7F8FA
3
bg-3 深背景
#F0F2F5
4
bg-4 边框背景
#E5E6EB
5
bg-5 禁用
#C9CDD4
文字 Text
主标题
text-1 #1D2129
正文
text-2 #4E5969
次要
text-3 #86909C
占位
text-4 #C9CDD4
边框 Border
border-1
#F2F3F5
border-2
#E5E6EB
border-3
#C9CDD4
border-4
#86909C
状态色 Status Colors
审核状态
草稿
待审
审核中
已通过
被退回
紧急度
加急
普通
低
智能审核结果
智能通过
需关注
检测到问题
数据可视化色板 Chart Colors
1
#1B3A5C
2
#3A7BD5
3
#F5A623
4
#4CAF50
5
#E74C3C
6
#7C4DFF
7
#00BFFF
8
#FF6B6B
色板应用示例
间距系统
基于 8px 栅格的间距体系，确保布局节奏的一致性。从 4px 微间距到 64px 大间距，覆盖所有使用场景。
spacing-1
4px
spacing-2
8px
spacing-3
12px
spacing-4
16px
spacing-5
20px
spacing-6
24px
spacing-7
32px
spacing-8
40px
spacing-9
48px
spacing-10
64px
使用建议
4-8px 图标与文字间距、紧凑元素内边距 |
12-16px 表单元素间距、列表项间距 |
20-24px 卡片内边距、区块间距 |
32-64px 页面区块间距、大模块分隔
圆角
三种圆角规格对应不同的组件层级，小圆角用于标签和输入框，中圆角用于按钮和卡片，大圆角用于弹窗和面板。
Small
4px
标签、输入框、小按钮
Medium
8px
按钮、卡片、下拉框
Large
12px
弹窗、面板、大卡片
组件应用示例
标签 small
面板 large
阴影
三级阴影体系，层级递进。基于品牌深蓝色调的阴影，保持视觉温度的一致性。
shadow-1
层级一
0 1px 4px rgba(27,58,92,0.08)
卡片默认态
shadow-2
层级二
0 4px 12px rgba(27,58,92,0.12)
卡片悬浮态 / 弹出层
shadow-3
层级三
0 8px 24px rgba(27,58,92,0.16)
弹窗 / 模态框
布局常量
定义平台核心布局尺寸，确保各端布局的一致性与可预测性。
Header — 60px
--header-height: 60px
Content Area
自适应宽度 flex: 1
Right Panel
260px
--right-panel-width
布局变量一览
优视慧智能内容审核平台 — 设计系统 v1.0
CSS 变量与 arco-theme.js 同步 | 广电政务蓝配色方案