LOCKDATAV · BRAND COLOR SYSTEM

漏刻有时 品牌标准色 VI 2.0

一套品牌,两种气场:白底文档场景用「漏刻蓝」沉稳专业,暗色大屏场景用「漏刻青」发光科技,经品牌化命名后定为漏刻有时标准色。

定版日期 2026-09-02 点击任意色块复制 HEX 替代 VI 1.0(#1165BF / #1F8AF1 体系)

亮色 · 文档主题

合同 / 简历 / 报告 / 印刷 / 白底物料

用于 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。

135deg · #1E3A8A → #2563EB
深海蓝渐变

页眉、页脚、品牌色条、封面主视觉(亮暗通用)

90deg · #2563EB → #7C3AED
蓝紫进度渐变

进度条、加载条、数据增长带

135deg · #00D4FF → #7B2FFF
青紫炫彩渐变(暗色)

暗色主按钮、标题渐变字、飞线光效

135deg · #1D4ED8 → #4338CA → #6D28D9
深靛三段渐变

深色封面、KV 背景、高端大屏过渡色

VI 1.0 → 2.0 迁移映射

存量物料改色对照

合同、简历等 Word 物料下次生成时直接按下表替换;旧色值不再用于新物料。

旧品牌色 → 新标准色(文档场景)
角色VI 1.0(停用)VI 2.0(启用)备注
深蓝 / 重色#1165BF#1E3A8A深海蓝,页眉页脚与封面
主蓝#1F8AF1#2563EB漏刻蓝,标题/表头/链接
亮青#05BCFF#00D4FF仅暗色大屏使用,Word 中不出现
浅底#ECF5FE#F0F4FF雾蓝底
标签底纹#E4F2FE#E4EAFFrgba(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 与大屏产品在下次迭代时对齐暗色主题变量。
已复制到剪贴板