docs(design): UI 风格定稿（U5），设计规范与 tokens 升到 v0.2

- ui-demo/explore/：工作台风格的六轮方案（A–F、D2–D5），D5 为定稿样张
- tokens.css v0.2：墨色派生的中性浅灰作页面底色；圆角三档（6 / 8 / 12）；控件高 36；侧栏渐变与套餐标签变量；旧变量保留兼容
- design-system.md v0.2：页面框架（96px 墨色渐变侧栏、透明顶栏、内容区圆角）、只用功能图标、项目行「下一步 / 更多」列、少写说明
- decisions.md 记录 U5；AGENTS.md 与 design/README 同步

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

docs/design/design-system.md

@@ -1,4 +1,4 @@
-# 标博士 · 产品界面设计规范（v0.1 · 2026-11-02）
+# 标博士 · 产品界面设计规范（v0.2 · 2026-11-03）
 
 > 范围：MVP 的 Web 界面（读标 M2、查标 M3、项目工作台与额度 M6）和检查报告 PDF。
 > 依据：视觉方向 A「校样」（决策 B1）、VI 手册 v1.1、品牌策略的语气规则、`docs/analysis/03-functional-requirements.md`。
@@ -9,6 +9,17 @@
 > - `system/components.html`：组件预览页，用真实样本条款演示（起本地服务后打开，见第 13 节）。
 >
 > 第 12 节的 U1–U4 已于 2026-11-02 全部按建议确认（`docs/decisions.md`）。
+>
+> **v0.2（2026-11-03，决策 U5）**：UI 精修时，用户认为 v0.1 风格过于陈旧（处处描边框、2px 圆角、灰色凹陷表头）。经过六轮工作台方案，定稿为 `ui-demo/explore/workbench-d5.html`，并据此修订：
+> - 第 3.1 节：页面底色；
+> - 第 3.4 节：渐变；
+> - 第 5 节：圆角、层次、页面框架；
+> - 第 6 节：图标；
+> - 第 7.1 节：按钮；
+> - 第 7.9 节：项目行；
+> - 第 9.5 节：文案精简。
+>
+> 颜色语义、字体、问题级别的形状规则、产品红线都**没有变**。其余 demo 页和原型还是 v0.1 的样式，待按本版重刷。
 
 ---
 
@@ -45,13 +56,16 @@
 
 | 名称 | 变量 | HEX | 用途 |
 |---|---|---|---|
-| 校样纸 | `--c-paper` | #F5F6F3 | 页面底色（冷灰白，不是米色） |
+| 校样纸 | `--c-paper` | #F5F6F3 | 品牌色板保留（VI、报告用）；**v0.2 起不再作页面底色** |
 | 白 | `--c-white` | #FFFFFF | 卡片、表格、输入框、原文页面 |
-| 凹陷灰 | `--c-sunken` | #ECEEEA | 表头、「提示」级底色、只读区 |
+| 凹陷灰 | `--c-sunken` | #ECEEEA | v0.1 的表头、「提示」级底色；v0.2 起界面改用 `--c-n100` |
 | 墨 | `--c-ink` | #1D2733 | 正文、标题、主按钮、人工确认后的内容、焦点环 |
 | 辅助灰 | `--c-sub` | #5C6670 | 次要文字、说明、「提示」级 |
 | 禁用灰 | `--c-muted` | #7A838C | **只用于**禁用文字和控件边框 |
-| 分隔线 | `--c-rule` | #D9DDD8 | 装饰性分隔线 |
+| 分隔线 | `--c-rule` | #D9DDD8 | v0.1 的分隔线；v0.2 起界面改用 `--c-nline` |
+| 中性浅灰 50 | `--c-n50` | #F8F8F9 | **页面底色**、行 / 格悬停（墨 3% 混白） |
+| 中性浅灰 100 | `--c-n100` | #F1F2F3 | 中性标签底、文字按钮悬停、进度槽（墨 6%） |
+| 发丝线 | `--c-nline` | #E6E7E9 | 卡片边框、行间分隔线（墨 11%） |
 | 蓝铅笔 | `--c-pencil` | #2F5BD3 | AI 标注、出处、跳转原文的链接 |
 | 蓝铅笔浅 | `--c-pencil-soft` | #E7EDFB | 原句高亮 |
 | 致命红 | `--c-fatal` | #C4122F | **只用于「致命」级问题** |
@@ -61,6 +75,17 @@
 
 每个功能色都有一个浅色底（`-soft`），只用作背景，文字仍用对应的深色。
 
+**v0.2 的浅灰都从墨色派生**：原来的校样纸、凹陷灰、分隔线偏绿，页面整体显得发灰发闷；改为墨色按比例混白，更亮、更中性。
+
+**侧栏的颜色**（v0.2，`--side-*`）：
+- 底色：墨色竖向渐变，下端是墨混 18% 蓝铅笔得到的深墨蓝 #203050。蓝铅笔混在深色里看上去是藏青，只作底色，不承担「AI」语义。
+- 文字和选中态：都用白色按比例叠加。
+
+**套餐标签的颜色**（v0.2，`--plan-*`，例外）：
+- 只用于账户区的套餐标签：免费版是中性灰，专业版是浅金色底加金边，企业版是金色实底加墨色字。
+- 金色从赭色派生，靠深浅区分档次。
+- 不得用在其他地方，以免和表示提醒的赭色混淆。
+
 **不进界面的颜色**：印章红 #D9291C 和藏青 #1C2554 只属于 logo（VI 手册第 03 章）。
 
 ### 3.2 对比度实测
@@ -94,7 +119,7 @@
 - 不用红色做按钮（包括删除按钮）、表单错误、系统错误、倒计时、额度用完提示。删除这类操作靠二次确认，不靠颜色吓人。
 - 不用定稿绿表示「通过 / 合格」。绿色只表示「有人确认过」，不表示结论好。
 - 不用蓝铅笔做普通导航链接、主按钮。蓝色只属于系统说的话和出处。普通链接用墨色加下划线。
-- 不用渐变、不用大面积彩色底。一屏之内彩色面积越少，致命红越显眼。
+- 不用渐变、不用大面积彩色底。一屏之内彩色面积越少，致命红越显眼。**唯一的例外**是侧栏的墨色竖向渐变（v0.2）：只在墨色和深墨蓝之间过渡，不出现在内容区。
 
 ---
 
@@ -142,8 +167,15 @@
 
 - 间距以 4px 为基准：4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 64（`--sp-*`）。
 - 组件内部用 4–12，组件之间 16–24，区块之间 32–48。
-- 圆角：控件和卡片 2px（纸张感，接近直角），对话框和浮层 4px。不用大圆角和胶囊形。
-- 层次靠分隔线和底色区分，不靠阴影。阴影只用于浮层（下拉、对话框、提示）。
+- **圆角三档**（v0.2）：
+  - 标签 6px（`--radius-tag`）；
+  - 按钮、输入框、菜单项 8px（`--radius-ctl`）；
+  - 卡片、对话框、浮层、内容区左上角 12px（`--radius-card`）。
+  - 不用胶囊形；圆形只用于头像和状态小圆点。
+- **层次**（v0.2）：浅灰页面上放白卡片，卡片是 1px 发丝线边框，**全页只有这一种容器**，卡片里不再套面板。
+  - 表头不用底色和粗线，只用 12px 辅助灰列名；行与行之间用发丝线分隔。
+  - 阴影只用于浮层（下拉、对话框、提示），以及滚动后的顶栏。
+- **整齐**：一种中性标签样式；卡片间距统一 16px；卡片内左右边距统一 20px。
 
 ### 5.2 平台与尺寸
 
@@ -154,19 +186,37 @@
 ### 5.3 页面框架
 
 ```
-┌──────────┬──────────────────────────────────────────────┐
-│ 侧边栏    │ 顶栏：面包屑 · 项目名 · 截止倒计时 · 额度 · 账号 │
-│ 216px    ├──────────────────────────────────────────────┤
-│ 工作台    │                                              │
-│ 项目      │  页面内容（最大宽度 1200px，三种主布局见下）     │
-│ 资质库    │                                              │
-│ 额度      │                                              │
-└──────────┴──────────────────────────────────────────────┘
+┌──────┬────────────────────────────────────────────────────┐
+│ 侧栏  │ 顶栏（透明）：公司 / 页面            搜索 │ 额度 · 通知 │
+│ 96px ├────────────────────────────────────────────────────┤
+│ logo │╭ 内容区（浅灰底，左上角 12px 圆角压在侧栏深色上）       │
+│ 菜单  ││                                                   │
+│ …    ││   页面内容（三种主布局见下）                          │
+│ 头像  ││                                                   │
+└──────┴────────────────────────────────────────────────────┘
 ```
 
+**侧栏**（v0.2）：
+- 宽度固定 96px，只有一种状态，**不折叠**。
+- 底色是墨色竖向渐变，底部有一片淡点阵，向上渐隐。
+- 顶部是竖版反白 logo（上印章、下字标），在侧栏内居中，宽约 60px。
+- 菜单项上图标、下文字：图标 22px，文字 12px，项高 62px。
+- 当前项：圆角矩形的半透明浅色底，白色加粗文字。悬停用同一形状，底色更淡。
+- 分组之间只用一条细分隔线，不写分组标题。
+- 底部：44px 头像、姓名，以及套餐标签（见 3.1）。
+
+**顶栏**（v0.2）：
+- 高 56px。左侧是「公司 / 页面」；右侧依次是搜索框（宽 280px，聚焦时变宽，Ctrl K 聚焦）、额度、通知。
+- 页面在顶部时，顶栏透明，和内容区底色连成一片；滚动后变为半透明白，加毛玻璃和一条发丝线。
+- 顶栏不用深色，避免和侧栏连成一个「门」字形边框。
+
+**内容区**：
+- 浅灰底 `--bg-page`，左上角 12px 圆角，压在侧栏的深色上。
+- 页面左右内边距 32px，1400px 以下为 24px。
+
 | 布局 | 页面 | 结构 |
 |---|---|---|
-| 列表 | 工作台、资质库、额度流水 | 筛选栏 + 表格，单栏 |
+| 列表 | 工作台、资质库、额度流水 | 页头 + 统计 + 白卡片里的列表；工作台右侧另有 296px 信息栏 |
 | 对照 | 读标（清单）、查标（问题列表） | 左：分类导航 200px；中：列表；右：**原文查看器**，宽度可拖动（默认 45%） |
 | 批注 | 查标结果的默认视图 | 问题列表 + 右侧 280px 页边批注栏（出处）；窄于 1440 时批注收进问题下方 |
 
@@ -180,6 +230,10 @@
 - 图标只做辅助，必须和文字一起出现；只有图标的按钮要有 `aria-label` 和悬停提示。
 - ★ ▲ 是招标文件里的标注符号，按文字显示，不换成图标。
 - 不用笑脸、奖杯、盾牌对勾这类暗示「保证」的图形。
+- **只用功能图标，不用装饰图标**（v0.2，用户试过后否决）：
+  - 统计卡、区块标题、列表行首都不加图标；
+  - 图标只出现在导航、按钮、出处、提醒、搜索、通知这类有操作含义的地方。
+- 侧栏菜单图标：工作台 `house`、资质库 `award`、额度 `wallet`。
 
 ---
 
@@ -195,7 +249,7 @@
 | 次按钮 | 白底墨字，控件边框 | 其他操作，包括问题处理三按钮 |
 | 文字按钮 | 墨字，无边框，悬停出底色 | 表格行内、次要操作 |
 
-- 高度 32（默认）/ 28（表格行内）/ 40（登录页、空状态）。左右内边距 12 / 8 / 16。
+- 高度 36（默认）/ 32（表格行内、筛选标签）/ 40（登录页、空状态），圆角 8（v0.2）。左右内边距 14 / 10 / 16。
 - **没有红色的危险按钮**。删除项目、删除文件用次按钮 + 确认对话框；删除项目要输入项目名才能确认。
 - 会扣点的按钮，旁边直接写扣多少、还剩多少（见 8.3），不放在弹窗里才说。
 - 状态：悬停（主按钮变浅 8%，次按钮出 `--bg-hover`）、按下、禁用（禁用灰字、无边框底色）、加载中（文字换成「正在…」，按钮宽度不变）。
@@ -209,7 +263,7 @@
 [提示]  无边框，凹陷灰底，辅助灰字
 ```
 
-- 字号 12，字重 600，高 20，左右内边距 6，圆角 2。
+- 字号 12，字重 600，高 20，左右内边距 6，圆角 6（v0.2）。
 - 级别由规则决定（FR-M3-03 的级别表），用户不能改级别；不同意可以「反馈：判断有误」。
 - 计数徽标也用同一套形状：「致命 2」实心、「重要 5」描边、「提示 11」无框。
 
@@ -299,9 +353,11 @@
 | 项目 | 项目名（16/24 600）+ 采购人（辅助灰） | |
 | 所投包 | 「采购包 2」或「全部」 | |
 | 截止 | 倒计时 | 见下 |
-| 状态 | 跟进中 / 编制中 / 已检查 / 已递交 / 已归档 | 中性描边标签，不用彩色 |
+| 状态 | 跟进中 / 编制中 / 已检查 / 已递交 / 已归档 | 中性标签：浅灰实底（`--c-n100`），无描边，不用彩色（v0.2） |
 | 就绪 | 只在「已检查」显示 | 见下 |
-| 致命 | 待处理的致命问题数 | 实心标签「致命 2」；为 0 时显示「—」 |
+| 致命 | 待处理的致命问题数 | 实心标签「致命 2」；为 0 时显示「—」；本列居中 |
+| 下一步 | 当前最该做的一个动作（确认清单、导出检查报告、处理致命问题……） | 文字链加 ›，表头和内容**左对齐**；行悬停时箭头右移 3px，不加边框和底色 |
+| 更多 | 「⋯」按钮 | 单独一列 32px，不设表头；常驻显示，平时是辅助灰，行悬停时变墨色。会扣点的操作在菜单里写明扣多少、还剩多少 |
 
 **倒计时**（以投标截止时间为准）：
 
@@ -454,6 +510,18 @@
 | 改法 | 「请在技术偏离表第 12 行补充响应。」 |
 | 签章 | 「投标函第 2 页的签章位置未发现盖章。本检查只看有无，不鉴定真伪。」 |
 
+### 9.5 少写说明（v0.2）
+
+用户反馈：「文案多了反而会增加 AI 感。」界面上只留做决定需要的信息：
+
+- 统计卡只写标题和数字，不加「在 2 个项目里」这类小字。
+- 不重复：页头、提醒条、统计卡说的是同一件事时，只留一处。
+- 解释性的话放进悬停提示，例如「就绪」的说明。
+- 产品红线要求明示的不能删：
+  - 扣点按钮旁的「扣 1 次 · 剩 37 次」（8.3）；
+  - 签章的「只看有无，不鉴定真伪」（红线 7）；
+  - 报告首页的检查范围和免责声明。
+
 ---
 
 ## 10. 无障碍检查清单
@@ -493,7 +561,17 @@
 | U3 | 图标用 Lucide（ISC 许可） | 采纳 | 线性风格和校样方向一致，图标全，可商用 |
 | U4 | 「致命」级问题点「确认无误」时，也要求写一句说明（目前需求只要求「忽略」填原因） | 采纳 | 对致命问题说「没问题」，等于认为系统判断错了：留下说明既便于审计，也是最有价值的误报反馈。会改动 FR-M3-07 |
 
-组件库（TDesign / Ant Design / Arco 等）由技术架构阶段选定；本规范的正文 14/22、4px 间距与这些组件库一致，选定后把 `tokens.css` 映射到它的主题配置即可。
+**U5（2026-11-03）**：UI 风格定稿为 `ui-demo/explore/workbench-d5.html`。要点：
+- 白色主调，浅灰从墨色派生；
+- 圆角三档；
+- 墨色渐变窄侧栏，上图标、下文字，不折叠；
+- 透明顶栏；
+- 只用功能图标；
+- 少写说明。
+
+详见 `docs/decisions.md` U5。
+
+前端不用带样式的 UI 框架（AR10）：组件样式直接引用 `tokens.css`，复杂交互用无样式组件库 Reka UI 打底。
 
 ---