hangshuo652
41 lines
1.4 KiB
Markdown
41 lines
1.4 KiB
Markdown
# 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 反模式检查通过
|