V5 DESIGN SYSTEM · 2026

深海军蓝 · 金色 · 玻璃拟态
SPL-ESC 全设备生命周期驾驶舱

面向新型电力系统的台区治理中后台 / BI 大屏 / 移动端三端统一设计语言。对齐公司 V5 VI,承接 11 模块 / 29 页面 / 5 层架构,让设备"管起来、看起来、算清楚"。

主色 PRIMARY
#101d35 深海军蓝
强调 ACCENT
#c4a44b 金色
覆盖模块
11 模块 / 29 页面
三端
Admin · Screen · Mobile
文档编号
ZW-XS-GL-2026
01 / PHILOSOPHY

设计哲学 · 三原则

深海军蓝定纵深,金色划重点,玻璃拟态造层次。芯片公司的精度 + 国网汇报的稳重 + Apple 级的克制。

P · 01

纵深而非平铺

深海军蓝渐变背景 + 玻璃拟态卡片 + 金色高光线条,构成"远景—中景—近景"三层视觉纵深。大屏一眼可读,中后台层次分明。

P · 02

克制而非堆砌

仅保留数据过渡与地图飞线两类动效;KPI 大数字用 DIN 等宽防跳动;图表下静态标注百分比。每一笔金色都用在刀刃上。

P · 03

一致而非重复

令牌单一源(packages/shared/tokens),三端构建时注入。亮/暗双主题同源切换,移动端 KPI 金色数值与大屏统一品牌记忆。

02 / COLOR

色彩系统

品牌双色 + 状态六色 + 置信度三色,共 11 个语义化令牌。每个色值有明确用途,禁止就地改色。

PRIMARY

深海军蓝

#101d35
大屏底色 · 侧边栏 · 页眉 · 主按钮
ACCENT

金色

#c4a44b
KPI 数值 · 选中态 · 渐变分隔线 · 强调
SUCCESS

成功绿

#2fbf71
在运 · 健康 · 达标 · 治理有效
WARN

告警橙

#e6a23c
告警 · 不平衡 · 越限 · 单源推断
DANGER

故障红

#e04545
故障 · 跳闸 · 严重 · 冲突待核
INFO

信息蓝

#3d7eff
信息 · 处理中 · 飞线 · 链路
FATAL

致命暗红

#7a1f1f
致命告警 · 退役 · 重大事故
OFFLINE

离线灰

#8a94a6
离线 · 灰态 · 待归属 · 已停用
03 / TYPOGRAPHY

字体系统

思源黑体 Heavy 立标题骨架,DIN Alternate 撑 KPI 大数字等宽防跳动,Cormorant Garamond 斜体作金色点缀。

KPI 大数字
DM MONO · 72PX · 700
97.8%
大屏标题
NOTO SANS SC · 48PX · 900
集团总览驾驶舱
金色斜体点缀
CORMORANT · 42PX · 700 ITALIC
治理有效 · 数据可信
页面 H1
NOTO SANS SC · 32PX · 700
设备全生命周期管理
正文
NOTO SANS SC · 15PX · 400
ESC 配网电子调压器安装点为分支线路降压严重杆位,容量按分支负载定档;T-AutoTopo 四源融合破解供电所图纸老旧难题,粒度到分支 / 杆级。
04 / TOKENS

间距 · 圆角 · 阴影

8 倍数间距阶 · 三档圆角 · 三层阴影体系。所有尺寸均有令牌,禁止魔法数。

SPACING · 8X

spaceXs · 4px
spaceSm · 8px
spaceMd · 16px
spaceLg · 24px
spaceXl · 32px
spaceXxl · 48px

RADIUS

4px
8px
PILL

卡片 8px 圆角 · 药丸标签 999px · 小元素 4px。统一圆角语言延续公司文档 V5 视觉。

SHADOW

shadowCard
shadowGlass
shadowAccent
05 / GRADIENT

渐变系统

大屏纵深渐变 · 金色强调渐变 · 分隔线渐变 · 主色渐变。四套渐变覆盖所有场景。

BG SCREEN · 大屏纵深
ACCENT · 金色强调
PRIMARY · 主色
DIVIDER · 分隔线
06 / COMPONENT

基础组件库

KpiCard · StatusPill · GlassCard · GradientDivider · RaciMatrix —— 五大基础组件覆盖 29 页面 80% 场景。

KpiCard · KPI 大数字卡

电压合格率
97.8%
▲ 2.3% 较上月
累计治理电量
1,284万 kWh
▲ 12.6%

StatusPill · 药丸标签

在运 告警 故障 处理中 离线
光伏台区 已确认 单源推断 冲突待核

GlassCard · 玻璃拟态卡片

台区健康度

46 台区实时健康度评估,绿黄红三色着色,点击下钻台区详情。

GradientDivider · 渐变分隔线

段落标题
下一段落
延续内容

RaciMatrix · RACI 色阵

任务\角色
A0
A1
A2
A9
设计令牌
A
R
C
C
BI 大屏
A
C
R
C
自动测试
A
C
C
R

GeoCover · 几何封面块

SPL-ESC · 2026
07 / GLASS

玻璃拟态深度

模糊 + 饱和度 + 内描边 + 投影四件套。深色背景下 6% 白透明,亮色背景下 50% 白透明,统一 shadowGlass。

实时台区

46 台区实时上图,状态着色

46
在运设备

8 类自研设备 + 一次设备

328
告警闭环率

本月告警处置闭环

96.4%
08 / MOTION

动效系统

克制是美德。仅脉冲、浮动、流转、微光四类动效,覆盖数据呼吸、状态指示、加载、强调四场景。

PULSE · 脉冲
实时数据呼吸 · 告警指示
FLOAT · 浮动
悬浮卡片 · 强调元素
SPIN · 流转
加载 · 数据流转
SHIMMER · 微光
金色高光 · 渐变流动