数字海南研发门户

主题

设计系统使用规范 ​

本规范描述设计原则与参考值。实际 Token 变量名以项目设计系统为准，编写代码时应优先查找并使用项目中已定义的 Token/CSS 变量，而非硬编码具体数值。

一、Design Token 使用原则 ​

  • 颜色、字号、字重、行高、圆角、阴影、间距，优先使用项目设计系统中定义的 Token 变量
  • 若当前项目有 Token 系统（CSS 变量、JS 常量、设计稿标注等），必须使用，禁止绕过 Token 硬编码数值
  • 若项目尚无 Token 系统，直接写入本规范的参考色值/数值，并在注释中标注语义用途
css
/* ✅ 使用项目 Token（变量名以实际项目为准） */
color: var(--color-primary);          /* 项目中的品牌主色 */
font-size: var(--font-size-body);     /* 正文字号 */

/* ✅ 无 Token 系统时，写入参考值并加语义注释 */
color: #075AED;   /* 品牌主色 */
font-size: 14px;  /* 标准正文 */

/* ❌ 硬编码但无任何语义说明 */
color: #075AED;
font-size: 14px;
  • 主题切换（亮/暗）使用语义级 Token（如"主文字色"），不使用具体色值 Token（如"grey-9"）

二、色彩规范 ​

2.1 色彩结构 ​

设计系统色彩分为四类，职能分明：

类型说明范例
品牌色核心识别色，主按钮、导航高亮、核心入口蓝色系主色
功能色状态反馈，成功/警告/错误/信息绿/橙/红/蓝
扩展色数据可视化、标签、专题场景全色域 12 色
中性色文本、背景、边框、分割线灰色阶

2.2 品牌主色参考值 ​

用途参考色值说明
主色（默认态）#075AED主按钮、导航高亮、核心入口、强调
悬停态#3A8AFF比主色亮一级
按下态#0542B3比主色深两级
浅色填充背景#F2F7FF选中态背景、Tag 底色
浅色描边#B9D5FF选中框边框

2.3 功能色参考值 ​

功能参考色值适用场景
成功#17B864操作完成、审核通过、合规状态
告警#F78B3C待办、提醒、风险提示、中期状态
错误#E23F3F删除、驳回、高危操作、错误提示
信息/品牌#075AED强调、选中、信息提示

功能色浅色配套（用于 Tag/Badge 背景）：

功能背景参考值描边参考值
成功#F2FFF7#AFF0D0
告警#FFF9F0#FFE1B9
错误#FFF6F6#FFCFCF
信息#F2F7FF#B9D5FF

2.4 扩展色板参考值 ​

共 12 色，每色 10 级色阶（0 最浅 → 9 最深），主色为第 5 级，色阶递增表示颜色加深。

色板主色（5级）典型语义
red（丹黎红）#E23F3F错误、删除、高危
coral（熔礁橙）#E65C3C热度、活跃
sunset（落日橙）#F78B3C告警、提醒
gold（自贸金）#F5B800价值标签、VIP
lime（清柠黄绿）#C8E02F环保、生态辅助
green（雨林绿）#17B864成功、通过、合规
cyan（潮汐青）#00C2A8数据辅助
sky（海岛蓝）#00B4D8信息辅助
blue（自贸蓝）#075AED品牌主色
legacy（琼韵蓝）#334BE4政务、传统科技
purple（科创紫）#6B46D1科技创新、AI
magenta（云境紫）#B74FD1高端、创意

完整色阶速查（部分色板）：

色阶blueredgreensunsetcyanpurple
0#F2F7FF#FFF6F6#F2FFF7#FFF9F0#F0FFFB#F8F5FF
1#E0ECFF#FFE8E8#D9F9E8#FFF0DC#CFF9F0#EDE4FF
2#B9D5FF#FFCFCF#AFF0D0#FFE1B9#9FF0E1#D3C2FF
3#84B8FF#FFB3B3#86E7B8#FFD296#6FE7D2#B9A0FF
4#3A8AFF#F47A7A#4FD693#FFB35C#1FD4B8#8D6AE7
5#075AED#E23F3F#17B864#F78B3C#00C2A8#6B46D1
6#064ED0#B81B1B#129E54#E67728#00A892#5A39B8
7#0542B3#901111#0D8444#CC6218#008E7C#492C9F
8#043696#660A0A#086A34#A34D08#007466#311870
9#032A79#3D0404#035024#7A3800#005A50#23105A

2.5 中性色参考值 ​

语义参考色值典型用途
纯白#FFFFFF卡片/容器背景
页面底色#F7F7F7页面背景、斑马纹
禁用背景#F2F2F2输入框禁用态
分割线/描边#EBEBEB分割线、边框
骨架屏#E0E0E0骨架屏、占位块
禁用边框#CCCCCC禁用态边框
占位文字#A6A6A6Placeholder、次要图标
辅助文字#858585说明文字
次要文字#525252辅助内容
主要文字#1A1A1A标题、正文（深色模式关键色）

文字色——透明度色阶（亮暗双模式通用）：

层级参考色值用途WCAG
主要文字rgba(0, 0, 0, 0.90)正文内容、标题AA ✅
次要文字rgba(0, 0, 0, 0.68)辅助说明、描述AA ✅
辅助文字rgba(0, 0, 0, 0.48)提示信息、占位—
禁用文字rgba(0, 0, 0, 0.35)禁用状态—

透明度写法在暗色模式下将 rgba(0,0,0,N) 替换为 rgba(255,255,255,N) 即可实现双模式适配。

2.6 色彩使用禁忌 ​

  • 禁止将告警色（橙）与错误色（红）互换使用
  • 禁止仅凭颜色区分关键状态，需同时配合图标或文字（色盲友好）
  • 禁止在白色背景上使用 0~3 级浅色作为独立文字色（对比度不足）
  • 错误（红）与成功（绿）场景必须额外使用图标区分，支持红绿色盲用户

三、字体规范 ​

3.1 字体家族 ​

场景字体栈
中文界面通用'PingFang SC', 'Hiragino Sans GB', 'Segoe UI', 'Microsoft YaHei', 'OPPO Sans', sans-serif
数字/金额/统计数值'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif

数字、金额、时间、统计指标等场景必须切换为数字专用字体，提升可读性与排版精度。

css
body {
  font-family: 'PingFang SC', 'Hiragino Sans GB', 'Segoe UI',
               'Microsoft YaHei', 'OPPO Sans', sans-serif;
}

/* 数据面板、金额、统计数值 */
.data-number,
.amount,
.stat-value {
  font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
}

3.2 字重 ​

仅使用三段式字重，禁止使用 300、700、900 等其他字重。

字重值语义用途
400Regular（常规）正文、说明、描述
500Medium（中等）副标题、UI 标签、强调正文
600Semibold（半粗）标题、数据大字、重要提示

3.3 行高规则 ​

行高递进以 8 为基数，公式：行高 = 字号 + 8（小字号）或 字号 + 8的倍数。

字号行高
12px20px
14px22px
16px24px
18px28px
20px28px
24px32px
28px36px
32px40px
40px48px

3.4 字阶参考 ​

移动端 ​

级别字号字重行高用途
Display28px60036px大标题
H124px60032px页面主标题
H220px60028px章节标题
H318px50028px卡片标题
Body-L16px40024px大号正文
Body14px40022px标准正文
Caption12px40020px辅助说明、标签

PC 端 ​

级别字号字重行高用途
Display40px60048px大屏展示标题
H132px60040px页面主标题
H228px60036px章节标题
H324px50032px三级标题
H420px50028px卡片/面板标题
Body-L16px40024px大号正文
Body14px40022px标准正文（默认）
Caption12px40020px辅助说明、提示

3.5 文字颜色选用 ​

文字颜色优先使用透明度色阶（2.5节），保证亮暗双模式兼容：

css
/* 正文：主要文字 */
color: rgba(0, 0, 0, 0.90);

/* 辅助说明：次要文字 */
color: rgba(0, 0, 0, 0.68);

/* 提示/占位：辅助文字 */
color: rgba(0, 0, 0, 0.48);

/* 禁用态 */
color: rgba(0, 0, 0, 0.35);

四、间距与圆角 ​

4.1 间距系统 ​

基础单位 8px，所有间距取 8 的倍数（或 4 的倍数作为补充）。

用途推荐值
组件内元素间距（紧凑）4px / 8px
组件内元素间距（标准）12px / 16px
卡片内边距16px / 24px
区块间距24px / 32px
页面区段间距48px / 64px / 96px

4.2 圆角系统 ​

级别数值适用场景
小圆角4pxinline code、小 tag、tooltip
中圆角8px小按钮、下拉项、小容器
标准圆角12px输入框、标准卡片、弹窗
大圆角16px内容卡片、图片容器
特大圆角24px大卡片、主要面板
胶囊/全圆9999px按钮、Badge、搜索框

五、阴影与层级 ​

遵循轻量化阴影原则，通过边框透明度实现层级分离，尽量减少阴影。

层级样式用途
无层级无阴影、无边框页面背景、文本块
轻边框1px solid rgba(0,0,0,0.05)卡片、分割线
中边框1px solid rgba(0,0,0,0.08)交互元素、输入框
轻浮起0 2px 4px rgba(0,0,0,0.03)卡片悬浮
按钮深度0 1px 2px rgba(0,0,0,0.06)按钮微投影
浮层/弹窗0 8px 24px rgba(0,0,0,0.12)Modal、Popover

六、组件使用原则 ​

  • 优先使用项目设计系统/组件库中已有组件，不重复造轮子
  • 通过 Props / Slots 定制外观，禁止直接修改组件库源码
  • 需要扩展时，创建**包装组件（Wrapper）**而非 Fork 源码
  • 样式覆盖必须通过组件暴露的 Token/CSS 变量实现，不写 !important 强制覆盖
vue
<!-- ✅ 通过 Props 定制 -->
<Button type="primary" size="large">提交</Button>

<!-- ✅ 包装扩展 -->
<template>
  <Button v-bind="$attrs"><slot /></Button>
</template>

<!-- ❌ 强制覆盖内部样式 -->
<style>
.btn { background: #075AED !important; }
</style>

七、响应式设计 ​

  • Mobile First：先写移动端样式，再用媒体查询向上扩展
  • 断点参考（可按项目调整）：
断点尺寸说明
xs< 480px小屏手机
sm480px手机横屏
md768px平板
lg1024px小桌面
xl1280px标准桌面
2xl1600px大屏
  • 避免固定宽高，优先用 Flexbox / Grid 弹性布局
  • 卡片网格：移动单列 → 平板双列 → 桌面三列
css
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 768px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .card-grid { grid-template-columns: repeat(3, 1fr); }
}

八、暗黑模式 ​

  • 文字色使用透明度色阶（rgba(0,0,0,N)），暗色模式替换为 rgba(255,255,255,N) 即可
  • 背景色参考层级（亮色）：页面底 #F7F7F7 → 卡片 #FFFFFF → 弹层 #FFFFFF
  • 背景色参考层级（暗色）：页面底 #0d0d0d → 卡片 #141414 → 弹层 #1a1a1a
  • 禁止用 filter: invert() 模拟暗黑模式
  • 使用语义级 Token（"主文字色"）而非具体色阶 Token（"grey-9"）

九、无障碍（A11y） ​

  • 正文/次要文字满足 WCAG 2.1 AA 级（对比度 ≥ 4.5:1）
  • 大字号文字（≥ 18px 或加粗 ≥ 14px）满足 AA Large（对比度 ≥ 3:1）
  • 禁止仅用颜色传递状态，必须同时配合图标或文字
  • 纯图标按钮必须有 aria-label
  • 所有交互元素有明确的 focus 样式
css
:focus-visible {
  outline: 2px solid currentColor; /* 或品牌主色 */
  outline-offset: 2px;
}

十、图标规范 ​

  • 统一使用项目约定的图标库，不混用多套
  • 图标颜色继承父元素文字色（color: inherit / currentColor），不单独硬编码色值
  • 图标尺寸与文字配合：12px 文字配 12–14px 图标，14px 配 16px，16px 配 18–20px
  • 常用固定尺寸：16px / 20px / 24px / 32px

十一、数据可视化配色 ​

图表多系列配色使用扩展色不同色系的主色（第5级），保证视觉区分度最大：

序号色板参考色值
1blue#075AED
2cyan#00C2A8
3green#17B864
4sunset#F78B3C
5purple#6B46D1
6sky#00B4D8
7gold#F5B800
8legacy#334BE4
  • 相邻序号避免使用相近色相（如 blue 与 legacy 紧邻）
  • 热力图、连续数据：同色系 0→9 渐变，不混用色系
  • 语义色（成功/告警/错误）在图表中保持与界面功能色一致，不替换为其他颜色

Power By 数字海南

Copyright © 2026 Digital Hainan