设计规范

考公云 · 三端统一设计系统 · 唯一数值源 packages/design-tokens/tokens.json · 三端只统一值，不统一组件形态

v3 · 2026-09-12 · 提案态
色系统· 标尺· 间距与圆角· 组件规格· 无障碍硬约束

色系统

浅色基准：暖底 #F5F1E8 / 纸卡 #FFFDF6 · 比值按 WCAG 2.1 实算，正文全部达 AA

品牌色相 229.6° · 距最近语义色 38.9°

品牌与语义

brand · #3A4785
brandDeep · #232C5C
danger · #AF2F26
warning · #8A5A0B
success · #1D6F52
accent · #8C5A16

中性暖墨阶（色相 34–37°，低饱和）

bg · #F5F1E8
surface · #FFFDF6
sunken · #EAE4D6
ink · #2A2723 · 底 13.19
sub · #5A554E · 底 6.55
mut · #635E56 · 底 5.70

标注四色（用户划线用，深色下另有取值）

考点 exam_point · #FFE7A0
观点 viewpoint · #C9E7CE
术语 term · #B9DEE6
数字 figure · #F8C8D8

标注软底（AI 标注正文用：彩度 ×0.55，对正文底 1.18）

考点 exam_point · #EBDFB9 · 底 1.18
观点 viewpoint · #D3E4D6 · 底 1.18
术语 term · #CFE3E7 · 底 1.18
数字 figure · #F3D8E1 · 底 1.19

深色（深暖灰，独立取值，不做反色）

dark bg · #1A1815
dark surface · #242220
dark ink · #EDE8DE（暖白，避眩光）
dark brand · #9099E0

标尺

字号 8 档按 1.2 比例 · 行高 4 档 · 字重 4 档 · 遗留值就近归并，不新增零散档位

字号 · 8 档

时政精选 34 display · 首页 hero
政策档案 28 titleL · 文章标题
天府新区协同救助 24 titleM · 区块标题
服务出海：新抓手 20 titleS · 卡片标题
社会救助从给钱转向给服务 17 body · 正文
新华社 · 2026-09-12 · 阅读约 6 分钟 14 meta · 次级 UI
按栏目分组 · 入选 3 篇 12 caption · 序号来源
AI 概括已通过校验 11 micro · 微角标

行高 · 4 档（存比值）与字重 · 4 档

1.25 tight · 大标题
1.3 heading · 小标题
1.7 ui · 界面文本
1.8 reading · 正文框
400 常规 时政500 中等 时政600 半粗 时政700 粗体 时政

间距与圆角

间距 4 基线 8 档 · 圆角以鸿蒙为准（Web 原 12 / 18 收敛为 10 / 14）

间距 · 8 档

hair · 2
xs · 4
s · 8
m · 12
l · 16
xl · 20
xxl · 24
xxxl · 32

圆角 · 6 档

xs · 4
sm · 8 · 输入框
md · 10
lg · 14 · 卡片
xl · 20
full · 999 · 胶囊

组件规格

只约规格与命名，不改各端布局 · 三端渲染同一套值后，差异只剩组件形态

开始阅读 主按钮 · h40 · full 圆角
查看提示 次按钮 · h40 · line 描边
考点 3 胶囊标签 · h22 · micro 字
搜索时政 / 政策 输入框 · h40 · sm 圆角
分层分类社会救助体系 卡片 · radius lg + 单像素描边 + space l

无障碍硬约束

  • 交互元素高度 ≥ 44 —— 条目行、筛选按钮、列表行统一提到 44
  • 文本对比度 ≥ 4.5:1 —— mut 暖底 5.70 / 纸卡 6.32，双底过 AA
  • 不依赖颜色单独传达 —— 标注除底色外同时带类型文字标签
  • 品牌色相与任一语义／标注色距离 ≥ 30° —— 229.6° 距最近邻 38.9°