历史 · 配色、字体与基础变量
重构前档案,仅供追溯,不作为新版本执行指令
历史档案 · 2026-09-11 重构前快照。 本文中的“当前”“已冻结”和实施顺序属于旧基线。新版本以现行总览和实施计划为准。
当前配色、材质和平台差异以 Design 规范为准。
以下保留存量 Ocean Foundation 的映射,供迁移对照,不是所有平台的新默认配色。
Logo 黑白独立于动作蓝;Ocean Air 动态环境仅属于 Studio,实验室全局使用中性环境。
原 token 快照版本 0.2.0-candidate / DESIGN_CANDIDATE 是历史来源标记,不能宣称完整视觉已冻结。
现有颜色映射
| 语义 | CSS / TS 入口 | Ocean Air 浅色 | Abyss 深色 |
|---|---|---|---|
| Logo | --ow-brand-ink(品牌接入增量) | #000000 | #FFFFFF |
| 页面底层 | --ocean-air-background / background | #F3F6FA | #11161D |
| 内容表面 | --ocean-air-surface / surface | #F8FAFC | #1A2028 |
| 次级表面 | --ocean-air-surface-soft / surfaceSoft | #EAF0F6 | #242D37 |
| 正文 | --ocean-air-text / text | #1D2025 | #F5F7FA |
| 辅助文字 | --ocean-air-text-muted / textMuted | #5C6570 | #B8C1CC |
| 动作/焦点 | --ocean-air-primary / primary | #2F7FD3 | #0A84FF |
| 实心主动作 | --ocean-air-action-fill / actionFill | #1F5F9C | #0874DF |
| 主动作悬停 | --ocean-air-action-hover / actionHover | #174C7E | #096FD1 |
| 主动作文字 | --ocean-air-on-primary / onPrimary | #FFFFFF | #FFFFFF |
| 边框 | --ocean-air-border / border | rgba(46,61,78,.14) | rgba(232,241,250,.14) |
primary 和 actionFill 是现有不同角色,不能合并后无意改变按钮对比度;
Ant Design 当前读取 primary,自有 Button 读取 actionFill,应在实验室对照后决定是否调整。
状态继续使用已有 success/warning/danger 与对应文字色,不将蓝色扩散到普通正文或所有选中背景。
运行状态带文字、轻底和边框,颜色不是唯一信息。实际对比度必须按最终背景、透明度、
hover/disabled/选中状态验证,不能只凭 token 表宣称无障碍通过。
字体、间距与圆角
沿用原 JSON 中的系统字体栈,不额外加载字标字体。现有候选值:正文 14px/1.5、 控件标签 13px、辅助信息 12px、小节标题 16px、页面标题 22px;营销和阅读模式可以 有明确的字号变体,不能把工作台字号当成官网标题上限。
间距基准沿用 4px,已有 4/8/12/16/20/24/32/40/48/64px。 角色圆角为 control 14px、card 18px、panel 24px、agent/sidebar 30px、pill 999px。 这是角色基线,不代表所有组件都同一个圆角;现有 Button 的 sm/md/lg 已有 12/14/16px, 应登记为组件尺寸变体,不用全局替换把差异抹平。
材质与动效
保留现有玻璃材质变量及降级实现,但不要求所有页面开启玻璃、背景 WebGL 或指针动效。 Studio 可使用 Ocean Air 动态环境;Site 的局部品牌表达按自己的规范设计,不能从 Studio 继承全局动态背景。 账单、模型配置和 Admin 密集表格优先稳定表面、可读文字与性能。实验室中的候选效果不是页面默认依赖。
沿用候选微交互 140ms、面板 180ms、空间过渡 220ms;支持 reduced-motion、 reduced-transparency 和静态回退。这些只描述视觉,不用于任务轮询、重试或业务超时。
密度与响应式
阅读、标准、紧凑按用户任务选择;现有 Button 的 sm/md/lg 高度为 32/40/48px。 触屏命中区、可见尺寸和表格密度分别验收,不能用缩小文字代替移动适配。 Drawer/Modal 不超过视口,内容保留可滚动容器;媒体按真实比例展示。
Token 治理边界
当前 JSON、CSS、TypeScript 和 Ant Design 映射不是全自动生成的单一来源。
先按复用与映射页固定现有快照、
登记同义项与差异;本轮不另复制可编辑 token 文件到 Docs,也不批量重命名 --ocean-air-*。
唯一可编辑来源位于 Design 的 design-system/packages/tokens/;源码移交已经完成,
后续实现生成/校验方案,覆盖 CSS、Ant Design、Canvas/OGL 的
实际消费者;不能只处理 DOM 配色就宣称画布主题已统一。主题入口沿用各应用既有实现,
不引入跨域 localStorage 同步;统一登录与主题偏好同步是不同问题。