色彩
色彩分两层：品牌色来自 CBTIS VI 手册的标准色与辅助色；语义色描述用途（背景、文字、边框、状态），组件只使用语义色和少量品牌色。
所有颜色定义在 src/styles/tokens.css，本页色板直接从该文件解析生成，对比度按 WCAG 2.1 实时计算。
品牌色
Aa
--navy
企业标准色 · PANTONE 275 C。主按钮、深色区块、选中态
白底对比度 11.52 AA
配 --navy-foreground 11.52 AA
Aa
--navy-foreground
深蓝底上的文字与图标
配 --navy 11.52 AA
Aa
--navy-muted
辅助色 · PANTONE 293 C。主按钮悬停、深色区块的次级底色
白底对比度 6.22 AA
Aa
--brand
辅助色 · PANTONE 2935 C。浅底上的品牌蓝：链接、强调文字、焦点边框
白底对比度 5.56 AA
配 --brand-foreground 5.56 AA
Aa
--brand-foreground
品牌蓝底上的文字
配 --brand 5.56 AA
Aa
--sky
辅助色 · PANTONE 2995 C。仅用于深蓝底上的点缀：眉题、强调按钮
白底对比度 2.28 不达标
配 --sky-foreground 5.06 AA
Aa
--sky-foreground
天蓝底上的文字
白底对比度 11.52 AA
配 --sky 5.06 AA
品牌色怎么用
| 颜色 | 用在 | 不要用在 |
|---|---|---|
navy 标准色 | 主按钮、深色区块、选中态、图标块、标题强调 | 大段正文（用 foreground） |
navy-muted | 主按钮悬停 | 静态元素（会与 brand 混淆） |
brand 品牌蓝 | 链接、焦点描边、次级强调文字、成功以外的状态图标 | 深蓝背景上的文字（对比度 2.1） |
sky 天蓝 | 只在深蓝背景上：眉题、首屏主按钮、徽标 | 白色背景上的文字和图标（对比度 2.3） |
语义色
Aa
--background
页面底色
Aa
--foreground
正文文字（标准色加深）
白底对比度 15.32 AA
Aa
--card
卡片底色
配 --card-foreground 15.32 AA
Aa
--card-foreground
卡片文字
白底对比度 15.32 AA
配 --card 15.32 AA
Aa
--popover
浮层（下拉、弹出框）底色
配 --popover-foreground 15.32 AA
Aa
--popover-foreground
浮层文字
白底对比度 15.32 AA
配 --popover 15.32 AA
Aavar(--navy)
--primary
主色，等同标准色
白底对比度 11.52 AA
配 --primary-foreground 11.52 AA
Aavar(--navy-foreground)
--primary-foreground
主色上的文字
配 --primary 11.52 AA
Aa
--secondary
次级底色 · 标准色 10% 色阶。次按钮、标签
配 --secondary-foreground 9.70 AA
Aavar(--navy)
--secondary-foreground
次级底色上的文字
白底对比度 11.52 AA
配 --secondary 9.70 AA
Aa
--muted
弱化底色。区块底、提示框、表头
配 --muted-foreground 5.13 AA
Aa
--muted-foreground
次要文字。说明、辅助信息、占位符
白底对比度 5.79 AA
配 --muted 5.13 AA
Aa
--accent
强调底色。悬停、选中项底色
配 --accent-foreground 4.84 AA
Aavar(--brand)
--accent-foreground
强调底色上的文字
白底对比度 5.56 AA
配 --accent 4.84 AA
Aa
--destructive
错误 / 危险操作
白底对比度 5.67 AA
配 --destructive-foreground 5.67 AA
Aa
--destructive-foreground
错误色底上的文字
配 --destructive 5.67 AA
Aa
--success
成功状态（新增，VI 未定义，取与标准色协调的深绿）
白底对比度 5.71 AA
配 --success-foreground 5.71 AA
Aa
--success-foreground
成功色底上的文字
配 --success 5.71 AA
Aa
--warning
警告状态（新增，VI 未定义）
白底对比度 5.67 AA
配 --warning-foreground 5.67 AA
Aa
--warning-foreground
警告色底上的文字
配 --warning 5.67 AA
Aa
--border
分割线、卡片描边
Aa
--input
表单控件描边
Aavar(--brand)
--ring
焦点环
白底对比度 5.56 AA
文字颜色层级
| 层级 | 类名 | 白底对比度 | 用途 |
|---|---|---|---|
| 主要 | text-foreground | 15.3 | 标题、正文、表单输入内容 |
| 次要 | text-muted-foreground | 5.8 | 说明、提示、占位符、辅助信息 |
| 导航 | text-foreground/75 | 6.8 | 页头导航链接 |
| 强调 | text-navy / text-brand | 11.5 / 5.6 | 小标题强调、链接 |
透明度用法
Tailwind 的 /数字 透明度写法在本系统中很常见，固定用下面几档：
| 写法 | 用途 |
|---|---|
bg-accent/50 | 选中的选择卡片 |
bg-{状态色}/8 · /10 | 提示条、状态徽标底色 |
border-navy/30 · hover:border-navy/40 | 描边按钮、可选卡片悬停 |
bg-foreground/40 | 对话框遮罩 |
text-navy-foreground/75 · /65 | 深蓝背景上的次要文字 |
border-navy-foreground/15 | 深蓝背景上的分割线 |
使用建议
推荐
- 优先使用语义色（
bg-muted、text-muted-foreground），不要写死bg-gray-100 - 状态同时用颜色 + 图标 / 文字表达
避免
- 使用 Tailwind 默认色板（
blue-600、slate-500等）——它们不在品牌体系内 - 在
:root之外覆盖颜色变量
与 v2 的差异
| v2 现状 | 规范 |
|---|---|
没有成功、警告色；成功状态借用 brand | 新增 success、warning（及 -foreground），VI 手册未定义，按 AA 对比度选取 |
destructive 没有配对的前景色 | 新增 destructive-foreground |
sky 在白底服务卡片上作为图标色 | 限定只用于深蓝背景 |
定义了 @custom-variant dark 但没有暗色变量 | 删除，本系统不提供暗色模式 |