# ASL Workspace 视觉约定

2026-10-13。适用于本机与跨平台桌面工作台；用户已授权参考 Apple／Google 校准审美。首轮先统一颜色与关键流程，整体操作直觉由后续用户反馈继续校准。

## 方向

浅色中性表面、清楚的文字层级、单一蓝色操作强调。页面属于任务型工具（Operate）：先让资料、关系和状态易读，再表达品牌。保持已有导航、业务内容、React／CSS 与 Lucide 图标。

Taste 参数按桌面任务场景收敛为设计变化 3、动效 2、信息密度 5。系统字体承载全部界面；不添加展示字体、连续动画或装饰玻璃层。

## 颜色角色

| 角色 | 值 | 用途 |
|---|---|---|
| 画布 | `#f5f5f7` | 主工作区底色 |
| 内容表面 | `#ffffff` | 内容、表单与浮层 |
| 次级表面 | `#f0f1f3` | 侧栏、工具区 |
| 主文字 | `#1d1d1f` | 标题、正文、主要标签 |
| 次级文字 | `#51545b` | 用途、辅助说明 |
| 辅助文字 | `#62666f` | 来源、时间、数量 |
| 操作蓝 | `#2e66ce` | 主操作、选中与焦点 |
| 操作深蓝 | `#245bc2` | 悬停、强调文字 |
| 选中底色 | `#eaf0fb` | 蓝色关联状态 |
| 边框／分隔 | `#d3d5d9`／`#e7e8eb` | 结构分隔 |
| 成功 | `#21684b`／`#eaf6ee` | 核对通过；同时保留文字标签 |
| 警告 | `#805312`／`#fff7e6` | 待处理与冲突；同时提供恢复操作 |
| 错误 | `#a93632`／`#fdf0ef` | 失败与完整诊断入口 |

复用已有 CSS 变量，不增设第二套主题系统。蓝色用于行动与选中；大面积背景保持中性。浮层用轻阴影表达层级，普通内容以边框或间距组织。

## 可读性与操作

- 正文及辅助文字对比度至少 4.5:1；焦点、重要图形与控件识别至少 3:1。
- 标题保持适度字号，表单使用原生语义和持续可见的焦点。
- 画板全图用于看关系，原始大小用于读文字；缩放和复位不改业务文档。
- 冲突先解释阻断原因，再提供现有范围／位置选择；所有路径继续走原有核心预检。
- 动效只表示状态，尊重减少动态效果设置。状态同时使用文字和图标，不仅依赖颜色。

## 参考与边界

- [Apple HIG：Color](https://developer.apple.com/design/human-interface-guidelines/color)：克制强调、一致语义、可读性与非颜色线索。
- [Material Design：Color roles](https://m3.material.io/styles/color/roles)：表面、文字、操作和错误以角色成对定义。

这些是设计参考；本 App 使用 Electron，当前颜色是自身浅色角色，不宣称已原生跟随 macOS 强调色或完成深色模式。完整 VoiceOver 与跨平台验收另行记录。