DESIGN.md · git:20261013.5c6f5aa · 2026-10-13 · sha256 cd2f829cf09e2f04
DESIGN.md git:20261013.5c6f5aaA
Immutable. This exact content never changes and is served at /api/v1/blob/cd2f829cf09e2f04.
# 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 与跨平台验收另行记录。