cobol-java-v3/DESIGN.md

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 反模式检查通过