# toolry 设计系统（DESIGN.md）

视觉基准：deepseek.com（干净浅色、品牌蓝、药丸控件、悬浮收缩导航）。
审计基准：impeccable.style 66 条 slop 规则 + WCAG AA。
**任何新样式不得落在本文件定义的刻度之外；确需扩展时先更新本文件。**

## 字体

| 用途 | 字体 | 说明 |
| --- | --- | --- |
| 界面 / 正文 | `Inter` + 系统中文栈（PingFang SC / 微软雅黑） | **有意选择**：用户指定 deepseek.com 风格 = 中性标准无衬线；中文界面必须带 CJK 回退 |
| 代码 / 安装命令 | `ui-monospace, SF Mono, Menlo, Consolas` | 系统等宽栈 |

## 字号刻度（px，禁止使用刻度之间的值）

```
12   辅助文本（日期、meta、提示、徽标、标签）
13   次要控件（tab、chip、排序、小按钮、投票计数）
14   正文控件（按钮、卡片标语、弹窗正文、表单输入 15）
15   表单输入 / 页脚导航
16   卡片标题
17   Hero 副标题
21   弹窗标题 / 成功面板标题
26+  展示型（提交页 h1 28、Hero h1 clamp(32–46)）
```

- 功能性文本下限 **12px**（<12 禁止）。
- 展示层级与正文的比 ≥1.25，避免扁平层级。

## 圆角刻度（全站唯一形状系统）

```
999  交互药丸（按钮、tab、chip、投票、徽标、搜索框、Toast）
16   大容器（卡片、弹窗、提交卡片、大头像）
12   嵌套容器降一级（小头像、类型选择卡、MCP 字段组）
10   输入与小块（输入框、安装命令块、图标盒）
8    微型（行内复制按钮）
```

- 嵌套容器比父容器**降一级**；卡片上限 16px（禁止 20+ 的"软blob"）。
- 药丸仅用于交互件与标签，不用于内容容器。

## 颜色（浅色 / 深色 双主题，全部过 WCAG AA）

| 令牌 | 浅色 | 深色 | 用途 |
| --- | --- | --- | --- |
| `--brand` | `#4D6BFE` | `#6D87FF` | 链接、强调文字（≥24px 大字或非正文装饰） |
| `--btn-bg` | `#3D5AF5`（hover `#3153DE`） | 同浅色 | **白字实底按钮/选中态专用**；`#4D6BFE` 白字仅 4.33:1 不达标 |
| `--text` | `#1D2733` | `#E9EDF5` | 主文字 |
| `--text-2` | `#57616F` | `#A7B0C0` | 次级文字 |
| `--text-3` | `#5F6B7C` | `#8792A4` | 辅助文字（白底 5.4:1） |
| `--danger` | `#C93A3F` | 同浅色 | 错误（`#E5484D` 白底仅 3.9:1，仅可用于边框） |
| `--success` | `#0A7A54` | `#3ECF9C`（徽标用） | 成功 / 新徽标 |
| 徽标 | b-tool `#3D5AF5`/蓝底、b-mcp `#6D4DE8`/紫底、b-feat `#8A5A0F`/金底 | 对应亮色变体 | 12px 徽标全部 ≥4.5:1 |

- **一种强调色**（品牌蓝）贯穿全站；紫仅作 MCP 的语义区分色，不作装饰。
- 禁止：渐变文字、径向光晕背景、深色模式霓虹辉光、奶油底。

## 图标

- **图标库统一为 [Tabler Icons](https://tabler.io/icons)**（outline 24px 网格，圆头圆角），全部内联 SVG
- **线宽统一 2**；≤14px 小图标与 logo 用 2.5；实心图标仅 `star`（filled 变体，编辑推荐徽标）
- 不混用第二个图标家族；不新增手绘路径，先从 Tabler 取形
- 卡片/弹窗头像使用**真实站点 logo**（favicon 服务链：Google s2 → IconHorse → favicon.im → 首字母兜底）；**禁止 emoji** 出现在界面控件与头像

## 动效

| 动效 | 规格 | 依据 |
| --- | --- | --- |
| 卡片入场 | 0.45s 上移淡入，错峰 28ms | 内容揭示 |
| Header 收缩 | max-width 0.55s `cubic-bezier(0.22, 1, 0.36, 1)` | 复刻 deepseek spring(180,28)，阻尼>1 **无过冲** |
| 悬停 | 0.15–0.22s，位移 ≤3px | 反馈 |
| 弹窗 | 0.2s 淡入 + 0.22s 缩放 | 状态转换 |

- 界面动效一律 ease-out，**禁止 bounce/elastic 过冲**；只动 transform/opacity/max-width。
- `prefers-reduced-motion`：全部动效关闭；`prefers-reduced-transparency`：玻璃药丸退化为实底。

## 布局

- 容器 `max-width 1200px`，左右 24px（移动 18px）。
- **榜单为垂直列表**（非网格卡片）：行间用 1px 细分隔线，悬停整行浅底；排名序号左置，前三名品牌蓝高亮。
- 导航顺序固定：Launchpad → MCP Hub → 分类（下拉）→ 搜索 → Submit → Account；导航项无边框、图标前置。
- 触屏（`pointer: coarse`）交互目标 ≥44px。
- 标题层级不跳级：h1 → h2（榜单标题）→ h3（条目）。