# Design brief

> 这份文件是视觉资产的“为什么”。原则来自 `emotion-design`、`apple-design`、`hallmark` 三个 skill，落到本仓库的 logo / 图片 / 动效。

## 情绪

**安静的精修感**（calm precision），不是“AI 工具的未来感”。

- 读者第一眼应该相信：这个工具会认真对待我的仓库。
- 所以：少一点辉光、少一点装饰环、少一点伪 UI；多一点对齐、留白、字号层级和一致的几何。
- 动效只用来解释“发生了什么”，不做背景循环。

## 三条硬规则

1. **每个像素都要能解释**：颜色、间距、圆角、字号、时长都进 token；资产里不出现临时数值。
2. **不画假 chrome**：终端截图不用红黄绿交通灯伪装成 macOS 窗口；用标题栏 + 真实命令。
3. **动效有信息量**：进入展示构造过程（90 → 320ms 的节奏），结束后停住；不做无限装饰循环。

## 视觉 token（与 `assets/brand-tokens.json` 同步）

| Token | 值 | 用途 |
|---|---|---|
| spacing | `4, 8, 12, 16, 24, 32, 48, 64, 80` | 4pt 网格 |
| radius | `8, 12, 16, 24, 112` | 卡片 / 图标 / 大容器 |
| display tracking | `-0.03em`（大字号） | 标题随字号收紧 |
| body tracking | `0` | 正文不额外加 tracking |
| type scale | `12, 14, 16, 19, 24, 30, 44, 64` | 固定字号阶梯 |
| motion · enter | `160ms`（元素）/ `320ms`（页面） | 进 |
| motion · exit | `100ms`（≈60% enter） | 出 |
| motion · press | `90ms` | 即时反馈 |

## 动效决策表

| 场景 | 情绪 | 做法 |
|---|---|---|
| README 首屏 demo | “这是真的” | 真实终端输出，打字节奏 + 结尾停顿；不循环装饰 |
| Logo 构造 | “这个标记是设计出来的” | 网格 → 笔画 → tile → lockup，四拍；结束停 1.6s |
| 概念切换 | “有 12 个可选项” | 静态 brand-sheet 为主；gif 只做一次慢速浏览，末尾长停顿 |
| 社媒/发布图 | 无动效 | 静态图，保持安全区 |

## 图片规则

- 一张图只讲一件事：banner 讲定位，social 讲分享，brand-sheet 讲概念。
- 背景最多一个纹理；去掉同心圆、光点、重复的装饰线。
- 文字层级：H1 用 weight 800 + 负 tracking；说明文字用 400/500 + 正 tracking；数字用 tabular。
- 深色图最小对比：正文 ≥ 7:1，图形 ≥ 3:1（`palette.mjs` 自动检查）。
- 图片必须有 alt；README 首屏图宽度受控。

## 检查清单（发版前）

- [ ] 所有 SVG 使用同一组 token（spacing / radius / type scale）
- [ ] 对比度 QA PASS（`repo_brand` 输出）
- [ ] 没有假窗口 chrome
- [ ] 动效有明确意图、结束有停顿、退出快于进入
- [ ] 首屏 40 行内出现视觉锚点
- [ ] alt 覆盖率 ≥ 80%