文档
历史档案文档OceanWay 架构品牌与统一设计系统

历史 · 配色、字体与基础变量

重构前档案,仅供追溯,不作为新版本执行指令

历史档案 · 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 / borderrgba(46,61,78,.14)rgba(232,241,250,.14)

primaryactionFill 是现有不同角色,不能合并后无意改变按钮对比度; 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 同步;统一登录与主题偏好同步是不同问题。

On this page