Design System 1.2
冻结范围
| 层 | 冻结内容 | 页面开发可以填写 |
|---|---|---|
| Foundation / Token | 色彩、字体、间距、圆角、Elevation、Motion、z-index、Density | 无 |
| Pattern | Theme、Shell、Workspace、List、Filter、Saved View | 选择批准的模式 |
| Recipe | List、Detail、Edit、Wizard、Dashboard、Identity | SDK、权限、字段、列、文案 |
| Product Page | 不创建设计规则 | 业务内容与编排 |
依赖方向固定为:
Reference -> System -> Component -> shadcn Compatibility ↓ Pattern -> Recipe -> Page“Frozen”表示稳定合同不能由页面自行改写,不表示所有高级 Pattern 都已在产品中交付。下游 实现缺口应继续向合同收敛,并在符合性账本中保留明确状态。
权威顺序
发生冲突时按以下顺序处理:
- 主仓库 ADR 0801 与
frontend/AGENTS.md; - 本章 Design System 1.2 文档;
- Frontend Design Guardian 与 UI Done Checklist;
- shadcn 组件契约;
- 外部设计技能、竞品、旧截图和 Axhub 参考。
旧系统和 Axhub 只用于理解业务复杂度、字段规模和用户偏好,不是视觉基线。
稳定主题
| 顺序 | ID | 显示名 | 定位 |
|---|---|---|---|
| 0 | enterprise-neutral | 曜灰 | Framework / 通用 Platform fallback |
| 1 | legal-navy | 衡蓝 | Legal 默认,稳健通用 |
| 2 | legal-amber | 香槟金 | 温暖商业与高端服务 |
| 3 | legal-burgundy | 章红 | 精品所与合伙人门户 |
| 4 | legal-jade | 青律 | 知识、合规与东方专业 |
| 5 | legal-orange | 暖橙 | 能源、制造与活力品牌 |
显示名与 theme.tokens.json 的 name 字段和 i18n 文案一致。工作台主题选择器按 workspaceBrandThemeIds 展示:衡蓝 → 香槟金 → 章红 → 青律 → 曜灰 → 暖橙。曜灰(enterprise-neutral)既是 Framework fallback,也出现在工作台选择器中供用户切换。
冻结的体验 Profile
| Profile | Shell | Workspace | Density | 场景 |
|---|---|---|---|---|
platform-workbench | Side | Managed Tabs | Compact | 登录后的法律业务主工作台 |
platform-portal | Top | Single Route | Compact | 模块较少或搜索中心门户 |
identity-flow | Minimal | Single Route | Comfortable | 登录、邀请、MFA、验证码、找回密码 |
touch-context | Responsive | Single Route | Comfortable | 窄屏与触摸环境 |
Density 实际有四档:dense、compact、comfortable、spacious。Profile 表只标注每类场景的默认档;dense 面向高密表格批量操作,spacious 面向触摸与无障碍放大场景,用户可在偏好中切换。
Theme、Mode、Density、Shell 和 Workspace 相互独立。换主题不会换导航,换密度不会改间距 Reference,前端隐藏权限也不会替代后端 Authorization。
当前实现状态
| 能力 | 设计契约 | 当前代码 |
|---|---|---|
| Token 分层与所有权 | Frozen | 已落地于 packages/materials,确定性生成器输出 CSS/TS/schema |
| 六套品牌主题 | Frozen | 已生成色阶并由 AppearanceProvider 运行时注入 |
| Light/Dark × Brand × Density | Frozen | 已落地四级密度、六主题与模式级联 |
| 无障碍覆写 | Frozen | 已落地 fontScale、highContrast、colorVision、reduceMotion 四组轴 |
| Shell / Workspace | Frozen | Side/Top 与 Single Route 已落地;Managed Tabs 的恢复与脏状态矩阵尚未闭环 |
| List / Filter | Frozen | 共享列表与筛选基础已落地;Advanced Filter、Query Studio 和 Saved View 仍按切片推进 |
| Identity | 已交付 | 已作为 tracer-bullet 完成全链路 |
推荐阅读
本章核心导航
- 01/09
设计语言与借鉴边界
Design System 1.2 的视觉配方、法律行业借鉴边界与反模板化设计红线。
- 02/09
Token 架构与所有权
Design System 1.2 的 Reference、System、Component、shadcn Compatibility 分层、命名和工程所有权。
- 03/09
色彩与法律主题
Design System 1.2 的中性表面、状态色、品牌语义和衡蓝、香槟金、章红、青律、暖橙五套法律主题。
- 04/09
排版、空间与材质
Design System 1.2 的字体、字号、间距、圆角、Elevation、Motion、z-index 与四级 Density。
- 05/09
多品牌、暗色与体验 Profile
Design System 1.2 的 Mode、Brand、Density、Shell、Workspace 正交轴、无障碍覆写及持久化和租户边界。
- 06/09
应用壳层与工作区
Design System 1.2 的 Side/Top Shell、导航所有权、磁吸 Local Tabs、全局工具与 Single Route/Managed Tabs 语义。
- 07/09
列表与复杂检索
Design System 1.2 的 List Recipe、Simple/Structured/Expert 检索、Saved View、表格密度和 URL 状态。
- 08/09
界面使用指南
面向最终用户的主题、导航、工作区 Tab、筛选、保存视图、表格与状态使用约定。
- 09/09
实现与符合性门禁
Design System 1.2 的生成链、已落地实现、质量门禁和扫尾检查。