数字海南研发门户

主题

设计系统使用规范（DH Design System） ​

基于数字海南 DH 设计体系。所有颜色、字体、间距等视觉属性必须严格遵循本规范，禁止使用任何未经规范定义的硬编码值。

一、Design Token 优先原则 ​

  • 颜色、字号、字重、行高、圆角、阴影、间距，全部使用设计 Token 变量
  • 禁止硬编码任何色值、字号数值
  • 主题切换（亮/暗）必须通过 Semantic Token 实现，不依赖具体色值 Token
css
/* ✅ 正确 */
color: var(--dh-color-primary);
font-size: var(--dh-font-size-md);

/* ❌ 错误 */
color: #075AED;
font-size: 14px;

二、色彩规范 ​

DH 色彩系统遵循感知均匀、过渡自然、层级清晰、无障碍兼容原则，采用 0–9 十级渐变色阶，严格遵循 WCAG 2.1 AA 级无障碍标准。

2.1 品牌色（自贸蓝） ​

品牌主色为 #075AED（blue-5），源于数字海南官方 Logo，代表科技感与信任感。

用途Token色值
主按钮、导航高亮、核心入口--dh-color-primaryblue-5 #075AED
悬停态--dh-color-primary-hoverblue-4 #3A8AFF
按下态--dh-color-primary-activeblue-7 #0542B3
浅色背景--dh-color-primary-bgblue-0 #F2F7FF
浅色描边--dh-color-primary-borderblue-2 #B9D5FF
css
/* 主按钮 */
.btn-primary {
  background: var(--dh-color-primary);       /* #075AED */
  border-color: var(--dh-color-primary);
  color: #fff;
}
.btn-primary:hover {
  background: var(--dh-color-primary-hover); /* #3A8AFF */
}
.btn-primary:active {
  background: var(--dh-color-primary-active);/* #0542B3 */
}

2.2 功能色（状态反馈） ​

功能色用于界面状态反馈，遵循用户通用认知，全系统统一，不得随意替换或混用。

功能类型名称Token色值适用场景
品牌/信息自贸蓝--dh-color-primaryblue-5 #075AED强调、选中态
错误丹黎红--dh-color-dangerred-5 #E23F3F删除、驳回、高危操作、错误提示
告警落日橙--dh-color-warningsunset-5 #F78B3C待办、提醒、风险提示、中期状态
成功雨林绿--dh-color-successgreen-5 #17B864操作完成、审核通过、合规
css
/* 状态反馈示例 */
.tag-success { color: var(--dh-color-success); }   /* #17B864 */
.tag-warning { color: var(--dh-color-warning); }   /* #F78B3C */
.tag-danger  { color: var(--dh-color-danger);  }   /* #E23F3F */
.tag-info    { color: var(--dh-color-primary); }   /* #075AED */

/* 浅色背景配套 */
.tag-success-bg { background: var(--dh-green-0); border-color: var(--dh-green-2); }
.tag-warning-bg { background: var(--dh-sunset-0); border-color: var(--dh-sunset-2); }
.tag-danger-bg  { background: var(--dh-red-0); border-color: var(--dh-red-2); }

2.3 扩展色板（12色） ​

扩展色共 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高端、创意

色阶命名规则：var(--dh-{色板名}-{0~9})

css
/* 色阶使用示例 */
.chart-item-1 { color: var(--dh-blue-5); }    /* #075AED */
.chart-item-2 { color: var(--dh-cyan-5); }    /* #00C2A8 */
.chart-item-3 { color: var(--dh-green-5); }   /* #17B864 */
.hover-bg     { background: var(--dh-blue-0); } /* #F2F7FF */
.deep-accent  { background: var(--dh-blue-7); } /* #0542B3 */

扩展色色阶速查（部分）：

色阶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.4 中性色（礁石灰） ​

中性色用于文本、背景、边框、分割线等基础元素，保证界面层级清晰、可读性强。

色阶色值典型用途
grey-0#FFFFFF纯白，卡片/容器背景
grey-1#F7F7F7页面底色、斑马纹底
grey-2#F2F2F2输入框禁用背景
grey-3#EBEBEB分割线、描边
grey-4#E0E0E0骨架屏、占位
grey-5#CCCCCC禁用态边框
grey-6#A6A6A6占位文字、次要图标
grey-7#858585辅助说明文字
grey-8#525252次要文字
grey-9#1A1A1A主要文字（深色）

黑色透明度色阶（适配亮暗双模式）：

透明度色值Token用途
90%rgba(0,0,0,0.90)--dh-color-text-primary正文内容
68%rgba(0,0,0,0.68)--dh-color-text-secondary辅助说明
48%rgba(0,0,0,0.48)--dh-color-text-tertiary提示信息
35%rgba(0,0,0,0.35)--dh-color-text-disabled禁用状态

主要文字（90%）和次要文字（68%）均满足 WCAG 2.1 AA 级（对比度 ≥ 4.5:1）。

css
/* 文字色使用 */
.text-primary   { color: var(--dh-color-text-primary);   } /* rgba(0,0,0,0.90) */
.text-secondary { color: var(--dh-color-text-secondary); } /* rgba(0,0,0,0.68) */
.text-hint      { color: var(--dh-color-text-tertiary);  } /* rgba(0,0,0,0.48) */
.text-disabled  { color: var(--dh-color-text-disabled);  } /* rgba(0,0,0,0.35) */

2.5 色彩使用禁忌 ​

  • 禁止将告警色（橙）与错误色（红）互换使用
  • 禁止仅凭色相区分关键状态（需配合图标/文字），确保色盲友好
  • 禁止在白色背景上使用 0~3 级浅色作为独立文字色（对比度不足）
  • 数据可视化多系列配色，优先使用扩展色中不同色系的 5 级主色，语义保持一致

三、字体规范 ​

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; /* OPPO-Sans Bold 风格 */
}

3.2 字重 ​

仅使用三段式字重，不使用其他字重。

字重值名称Token用途
400Regular（常规）--dh-font-weight-regular正文、说明
500Medium（中等）--dh-font-weight-medium副标题、强调正文
600Semibold（半粗）--dh-font-weight-semibold标题、数据大字
css
.body-text    { font-weight: var(--dh-font-weight-regular);  } /* 400 */
.label-text   { font-weight: var(--dh-font-weight-medium);   } /* 500 */
.heading-text { font-weight: var(--dh-font-weight-semibold); } /* 600 */

3.3 行高规则 ​

行高以固定数值 8 为基础变量递进，公式为：line-height = font-size + N×8，保证各字号呼吸空间均衡、排版节奏统一。

字号行高计算关系
12px20px12 + 8
14px22px14 + 8
16px24px16 + 8
18px28px18 + 8×1.25
20px28px20 + 8
24px32px24 + 8
28px36px28 + 8
32px40px32 + 8

3.4 字阶标准 ​

移动端（Mobile） ​

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

PC 端 ​

级别字号字重行高用途
Display40px60048px大屏展示标题
H132px60040px页面主标题
H228px60036px章节标题
H324px50032px三级标题
H420px50028px卡片/面板标题
Body-L16px40024px大号正文
Body14px40022px标准正文（默认）
Caption12px40020px辅助说明、提示
css
/* PC端标准正文 */
.text-body {
  font-size: var(--dh-font-size-body);       /* 14px */
  font-weight: var(--dh-font-weight-regular);/* 400 */
  line-height: var(--dh-line-height-body);   /* 22px */
  color: var(--dh-color-text-primary);       /* rgba(0,0,0,0.9) */
}

/* 页面标题 */
.text-h1 {
  font-size: var(--dh-font-size-h1);         /* 32px */
  font-weight: var(--dh-font-weight-semibold);/* 600 */
  line-height: var(--dh-line-height-h1);     /* 40px */
  color: var(--dh-color-text-primary);
}

3.5 文字色彩规范 ​

文字采用基于 #000000 透明度的四级色阶，适配亮暗双模式，不使用固定 HEX 文字色。

级别Token色值用途WCAG
主要文字--dh-color-text-primaryrgba(0,0,0,0.90)正文内容、标题AA ✅
次要文字--dh-color-text-secondaryrgba(0,0,0,0.68)辅助说明、描述AA ✅
辅助文字--dh-color-text-tertiaryrgba(0,0,0,0.48)提示信息、占位—
禁用文字--dh-color-text-disabledrgba(0,0,0,0.35)禁用状态—

四、组件库使用原则 ​

  • 优先使用 DH 设计系统中已有组件，不重复造轮子
  • 通过 Props / Slots 定制样式，禁止直接修改组件库源码
  • 需要扩展时，创建**包装组件（Wrapper）**而非 Fork 源码
  • 组件内颜色、字体必须通过 Token 覆盖，不写内联样式硬编码值
vue
<!-- ✅ 正确：通过 Token 覆盖主色 -->
<Button type="primary">提交</Button>

<!-- ✅ 正确：包装扩展 -->
<template>
  <Button v-bind="$attrs" :style="{ '--dh-color-primary': customColor }">
    <slot />
  </Button>
</template>

<!-- ❌ 错误：直接修改组件样式 -->
<style>
.dh-btn { background: #075AED !important; }
</style>

五、响应式设计 ​

  • Mobile First：先写移动端样式，再用媒体查询向上扩展
  • 使用 DH 规范断点变量
断点名尺寸Token
xs< 480px--dh-bp-xs
sm480px--dh-bp-sm
md768px--dh-bp-md
lg1024px--dh-bp-lg
xl1280px--dh-bp-xl
2xl1600px--dh-bp-2xl
  • 避免固定宽高，优先用弹性布局（Flexbox / Grid）
css
/* Mobile First 示例 */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 768px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .card-grid { grid-template-columns: repeat(3, 1fr); }
}

六、暗黑模式 ​

  • 必须使用 Semantic Token（如 --dh-color-text-primary）而非具体色值 Token（如 --dh-grey-9），确保主题切换自动生效
  • 文字色使用透明度色阶（rgba(0,0,0,N)），暗黑模式下自动映射为 rgba(255,255,255,N)
  • 禁止使用 filter: invert() 模拟暗黑模式
  • 背景色层级（亮色模式）：页面底色 grey-1 #F7F7F7 → 卡片 grey-0 #FFFFFF → 弹层 grey-0 #FFFFFF

七、无障碍（A11y）规范 ​

  • 主要文字 / 次要文字必须满足 WCAG 2.1 AA 级（对比度 ≥ 4.5:1）
  • 大字号（≥ 18px 或加粗 ≥ 14px）满足 AA Large（对比度 ≥ 3:1）
  • 禁止仅用颜色传递状态信息，必须同时配合图标或文字
  • 支持红绿色盲友好：错误（红）与成功（绿）场景必须额外使用图标区分
  • 交互元素（按钮、链接、表单）必须有明确的 focus 样式
css
/* focus 样式示例 */
:focus-visible {
  outline: 2px solid var(--dh-color-primary);
  outline-offset: 2px;
}

八、图标规范 ​

  • 统一使用 DH 图标库（@szhn/dh-icons），不混用多套图标库
  • 图标必须配合文字标签或 aria-label（纯图标按钮必须有 aria-label）
  • 图标尺寸使用 Token：16px / 20px / 24px / 32px
  • 图标颜色继承文字色（currentColor），不单独硬编码
vue
<!-- ✅ 正确 -->
<Icon name="search" :size="20" aria-label="搜索" />

<!-- ❌ 错误：硬编码颜色 -->
<Icon name="search" style="color: #075AED" />

九、数据可视化配色 ​

数据大屏 / 图表场景，使用以下推荐配色序列（基于扩展色 5 级主色），确保视觉区分度最大：

序号色板色值名称
1blue-5#075AED自贸蓝
2cyan-5#00C2A8潮汐青
3green-5#17B864雨林绿
4sunset-5#F78B3C落日橙
5purple-5#6B46D1科创紫
6sky-5#00B4D8海岛蓝
7gold-5#F5B800自贸金
8legacy-5#334BE4琼韵蓝
  • 同一图表中不同系列颜色对比度需清晰区分
  • 避免相邻序号使用相近色相（如 blue 与 legacy）
  • 热力图、连续数据使用同色系 0→9 渐变，不混用色系

Power By 数字海南

Copyright © 2026 Digital Hainan