# DESIGN.md — verify-cli Web UI

## Aesthetic
Terminal Developer Tool — 命令行工具的可视化包装。暗底、等宽、最小装饰。
用户的第一反应应该是"这是我的终端，只不过多了个表单"。

## Typography
- Primary: SF Mono / Fira Code / Cascadia Code / Consolas (等宽字体堆栈)
- 全部使用系统原生字体，零外部依赖
- 层级差异通过字号和颜色区分，不换字体家族

## Color
| Token | Hex | Usage |
|-------|-----|-------|
| bg | #0a0e14 | 页面底色 |
| panel | #12171f | 卡片/表单容器 |
| border | #1f2937 | 分割线 |
| text | #b2becd | 正文 |
| dim | #5c6e80 | 标签/次要信息 |
| accent | #39bae6 | 链接/操作色 |
| green | #7fd962 | 成功状态 |
| red | #f26d78 | 错误状态 |
| yellow | #ffad66 | 等待中状态 |

## Layout
- 单栏，最大宽度 680px
- Header → Sections → Footer 的垂直流
- 表单使用 CSS Grid 双列布局
- 结果页 Section 分离 Summary 和 Field Results

## Spacing
- 页面 padding: 3rem 1.5rem
- Section 内 padding: 1.5rem, 间距 1rem
- 表单 label 间距: .75rem

## Decisions
- 不使用 Jinja2（3.1+ 与 Starlette 不兼容），改用字符串替换
- 不使用任何 CSS 框架，纯手写 CSS variables
- 不使用 emoji 或装饰图标，状态通过颜色边框表达
- 无紫色渐变、无 3 列 icon grid、无居中布局、无装饰性波浪 — AI slop 反模式检查通过