亮色 · 文档主题
合同 / 简历 / 报告 / 印刷 / 白底物料用于 Word 文档、PDF、商务函件、白底 PPT 与印刷品。主色为饱和而不刺眼的漏刻蓝,搭配深海蓝做重色、雾蓝做浅底,整体干净专业,黑白打印仍有层次。
点击复制#2563EB
漏刻蓝 Primary
品牌第一主色
标题强调、表头底、超链接、主按钮、进度条、图标主色
点击复制#1E3A8A
深海蓝 Deep
品牌重色 / 渐变深色端
页眉页脚深色条、封面大标题、品牌渐变起点
点击复制#93C5FD
晴空浅蓝 Sky
深底上的高亮色
深蓝底上的点缀文字、Logo 高光、发光描边
点击复制#F0F4FF
雾蓝底 Mist
页面浅底色
文档区块底纹、信息条背景、整页浅色背景
点击复制#E4EAFF
云蓝灰 Cloud
次级浅底 / 标签底纹
标签底、表格隔行、与雾蓝底叠出层次
点击复制#FFFFFF
卡片白 Card
内容容器色
正文卡片、表格容器(可用 98% 不透明度)
暗色 · 大屏主题
数据大屏 / 官网 / 产品 UI / 展厅用于数据可视化大屏、官网暗色页、产品界面与展厅数字沙盘。青蓝发光色在深空底色上形成辉光,正是漏刻有时大屏产品一直以来的视觉签名。
点击复制#00D4FF
漏刻青 Cyan
暗色场景第一强调色
发光数据、高亮边框、图标、悬停态、流光飞线
点击复制#7B2FFF
曜紫 Purple
暗色辅助色
青紫渐变副色、进度条、炫彩按钮、氛围光
点击复制#050B1A
深空蓝黑 Space
暗色页面主背景
大屏整页底色、官网暗色模式背景
点击复制#030810
墨渊 Abyss
更深层背景
层叠背景、底部沉色、与深空底拉出纵深
点击复制rgba(10,20,50,.85)
星窗 Card
暗色卡片底色
大屏面板、卡片容器,半透明透出底光
点击复制rgba(15,30,70,.9)
星窗亮 Card Hover
暗色卡片悬停态
面板 hover / 选中态
中性色与文字
两套底各配一组文字与描边不在亮暗场景间通用:亮底用墨蓝系文字保证印刷清晰,暗底用浅灰系文字配合发光边框。
亮底 · 文字阶梯
#0F172A
主文字标题 / 正文
#475569
次文字说明 / 副标题
#64748B
弱文字时间 / 辅助信息
#94A3B8
占位灰空状态 / 占位符
暗底 · 文字与描边
#E2E8F0
主文字亮白主文本
#94A3B8
次文字银灰说明文字
#3D4F6A
弱文字暗蓝灰弱化
青色描边
边框常态 .14 / 悬停 .45
功能色
成功 / 警告 / 错误状态色同样分亮暗两套:暗色大屏用高饱和发光色,亮色文档用沉稳的 Tailwind 语义色。
点击复制#00FF9D
荧绿 · 成功(暗)
大屏正常态 / 在线状态
暗色界面的成功提示、正向数据、运行指示灯
点击复制#059669
翠绿 · 成功(亮)
文档 / 亮界面成功态
Word 与亮色 UI 的通过、成功通知
点击复制#FFB800
琥珀 · 警告
警示 / 待处理
警告提示、阈值临近、中级告警
点击复制#FF3D71
品红 · 错误(暗)
大屏严重告警
暗色界面故障、P0 告警、异常数据
点击复制#DC2626
朱红 · 错误(亮)
文档 / 亮界面错误态
Word 与亮色 UI 的错误通知、必填警示
品牌渐变
四条官方渐变渐变只用于品牌条、头部、进度与主按钮,不用于大面积正文背景。点击可复制 CSS。
深海蓝渐变
页眉、页脚、品牌色条、封面主视觉(亮暗通用)
蓝紫进度渐变
进度条、加载条、数据增长带
青紫炫彩渐变(暗色)
暗色主按钮、标题渐变字、飞线光效
深靛三段渐变
深色封面、KV 背景、高端大屏过渡色
VI 1.0 → 2.0 迁移映射
存量物料改色对照合同、简历等 Word 物料下次生成时直接按下表替换;旧色值不再用于新物料。
| 角色 | VI 1.0(停用) | VI 2.0(启用) | 备注 | |
|---|---|---|---|---|
| 深蓝 / 重色 | #1165BF | → | #1E3A8A | 深海蓝,页眉页脚与封面 |
| 主蓝 | #1F8AF1 | → | #2563EB | 漏刻蓝,标题/表头/链接 |
| 亮青 | #05BCFF | → | #00D4FF | 仅暗色大屏使用,Word 中不出现 |
| 浅底 | #ECF5FE | → | #F0F4FF | 雾蓝底 |
| 标签底纹 | #E4F2FE | → | #E4EAFF | 或 rgba(37,99,235,.07) |
使用规则
什么场景用哪套📄 文档 / 商务场景
- 主色只用
#2563EB:标题、表头底白字、超链接、强调词 - 重色用
#1E3A8A:页眉页脚横条、封面大标题 - 浅底用
#F0F4FF/ 标签底rgba(37,99,235,.07) - 禁止在白底 Word 中使用发光青
#00D4FF,印刷发飘、对比度不足 - 正文文字保持
#0F172A/#475569,不用彩色写正文
🌌 大屏 / 产品场景
- 底色
#050B1A/#030810,卡片rgba(10,20,50,.85) - 强调色
#00D4FF:发光数据、飞线、边框悬停(配 text-shadow / box-shadow 辉光) - 辅助紫
#7B2FFF只做渐变副色与氛围,不单独承载关键信息 - 青色描边常态
rgba(0,212,255,.14),悬停.45 - 告警三色:荧绿
#00FF9D/ 琥珀#FFB800/ 品红#FF3D71
落地节奏:本色卡定版后,新出物料一律采用 VI 2.0;待生成的专家简历 Word 将首次启用新色,合同模板下次重印时同步替换;官网 lockdata.cn 与大屏产品在下次迭代时对齐暗色主题变量。