# Design Tokens（具体数值）

> 统一的设计变量。Tailwind 项目落到 `@theme`，AntD 项目落到 `ConfigProvider` 的 `theme.token`。同一界面不要出现 token 之外的魔法数值。

## 中性色（背景 / 文字 / 边框）

| Token | 值 | 用途 |
|---|---|---|
| `bg-page` | `#f7f8fa`（或 `slate-50`） | 页面底色 |
| `bg-surface` | `#ffffff` | 卡片 / 面板 |
| `text-primary` | `#1f2937`（`slate-800`） | 主文字 |
| `text-secondary` | `#6b7280`（`slate-500`） | 次要文字 |
| `text-muted` | `#9ca3af`（`slate-400`） | 占位 / 禁用 |
| `border` | `#e5e7eb`（`slate-200`） | 分割线 / 卡片描边 |

主文字与次要文字、次要与占位之间要拉开对比，避免「一片灰」。

## 主色与强调色

| Token | 建议值 | 用途 |
|---|---|---|
| `brand` | `#2563eb`（`blue-600`） | 主操作 / 链接 / 选中态 |
| `brand-hover` | `#1d4ed8`（`blue-700`） | 主色 hover |
| `brand-soft` | `#eff6ff`（`blue-50`） | 选中底色 / 浅底标签 |

> 主色可换成项目已有的品牌色，但**选定后全局统一**，不要一个页面两个主色。

## 语义色

| 语义 | 前景 | 浅底 | 描边 |
|---|---|---|---|
| success | `#16a34a` | `#f0fdf4` | `#bbf7d0` |
| warning | `#d97706` | `#fffbeb` | `#fde68a` |
| danger | `#dc2626` | `#fef2f2` | `#fecaca` |
| info | `#2563eb` | `#eff6ff` | `#bfdbfe` |

状态提示统一用「浅底 + 前景字 + 描边」三件套，不要用纯色块糊脸。

## 间距阶梯（8pt）

`0 4 8 12 16 24 32 48 64 96`

- 组件内部元素间：`4 / 8 / 12`
- 卡片内边距：`16 / 20 / 24`
- 卡片间距：`16 / 24`
- 区块间距：`32 / 48 / 64`

## 字号阶梯

| 层级 | 字号 | 行高 | 字重 |
|---|---|---|---|
| display（页面大标题） | 30 / 36 | 1.2 | 700 |
| h1 | 24 | 1.25 | 700 |
| h2 | 20 | 1.3 | 600 |
| h3 | 16 | 1.4 | 600 |
| body | 14 | 1.6 | 400 |
| small / caption | 12 | 1.5 | 400 |

> 具体字号可随项目微调，但**比例关系要稳定**：每一级差约 1.2–1.25 倍，不要相邻两级只差 1px。

## 圆角

| Token | 值 | 用途 |
|---|---|---|
| `radius-sm` | 6px | 按钮 / 输入框 / 徽章 |
| `radius-md` | 10px | 卡片 / 弹窗 |
| `radius-full` | 9999px | 头像 / 胶囊 / 全圆徽章 |

同一界面最多 2 档圆角。

## 阴影（克制使用）

| Token | 值 | 用途 |
|---|---|---|
| `shadow-sm` | `0 1px 2px rgba(0,0,0,.05)` | 卡片默认 |
| `shadow-md` | `0 4px 12px rgba(0,0,0,.08)` | 悬浮 / 弹窗 |
| `shadow-lg` | `0 12px 32px rgba(0,0,0,.12)` | 下拉 / 模态框 |

## z-index 约定

`0 内容` → `10 吸顶导航` → `20 下拉/浮层` → `30 模态框` → `40 toast/通知`
