---
name: OMK Studio
description: Studio 当前实现的设计基线与已确认改进方向；目标配色在正文单列，尚未接入运行时。
colors:
  primary: "#5145cd"
  primary-hover: "#4235b5"
  text: "#192236"
  text-secondary: "#657085"
  navigation-hover-text: "#293348"
  canvas: "#f7f8fb"
  surface: "#ffffff"
  border: "#e2e6ee"
  navigation-selected: "#eef0f6"
  navigation-hover: "#f4f6fa"
typography:
  body:
    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif'
  measure-page-title:
    fontSize: "18px"
    lineHeight: "26px"
  reader-body:
    fontSize: "14px"
    lineHeight: "1.8"
  page-description:
    fontSize: "12px"
    lineHeight: "20px"
  session-title:
    fontSize: "14px"
    fontWeight: 500
rounded:
  control: "6px"
  container: "8px"
spacing:
  compact: "8px"
  small: "12px"
  regular: "16px"
  content-inline: "20px"
  section: "24px"
components:
  navigation-item:
    textColor: "{colors.text-secondary}"
    rounded: "{rounded.control}"
    padding: "7px 10px"
  navigation-item-hover:
    textColor: "{colors.navigation-hover-text}"
    backgroundColor: "{colors.navigation-hover}"
  navigation-item-selected:
    textColor: "{colors.text}"
    backgroundColor: "{colors.navigation-selected}"
  table-container:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.container}"
---

# OMK Studio 设计基线

## Overview

**设计主旨：让知识与证据清楚可读、可核对。**

Studio 是知识工作的全屏操作界面，服务于真实工作观测、知识维护与受控测量。内容、来源和结论之间的关系优先于装饰；界面不能以视觉上的“成功”替代领域中尚未成立的判断。产品定位以 [PRODUCT.md](./PRODUCT.md) 为准。

本文件只覆盖 Studio，不定义官网、文档站或第三方插件的视觉。正文以中文维护；英文节名用于兼容 DESIGN.md 的工具格式。执行边界与验收要求以根 [AGENTS.md](./AGENTS.md) 和 [Studio 领域规则](./src/studio/AGENTS.md) 为准，本文件不扩大它们的授权。

### 基线的使用方式

- **已确认约束与方向**：品牌、导航归属、全屏布局、表格可达性和证据语义，后续设计必须遵守；目标配色在 Colors 单列，不代表源码已经采用。
- **当前可复用基础**：frontmatter 提取自现有主题与 CSS，作为本版相应角色的默认值；它不是已经接入运行时的 token 文件，也不表示所有页面已经统一。
- **待收敛项**：以“待收敛”标注的差异仅用于识别现状，不作为新页面的默认模板。重设计提案和代表页构图单独讨论，验证后再更新本文件。

提取依据是 [StudioTheme](./src/studio/web/components/layout/theme.tsx)、[studio.css](./src/studio/web/app/studio.css) 与 [StudioShell](./src/studio/web/components/layout/shell.tsx)。本版是源码基线，不声称完成所有页面的计算样式、对比度或响应式验收。

设计改进由 [Issue #1060](https://github.com/lizhiyao/oh-my-knowledge/issues/1060) 跟踪。当前阶段交付规范与设计方案；本文件合并不表示视觉改造已经实现，也不关闭该 Issue。静态稿采用合成数据，不能代替真实组件、交互和可访问性验收。

## Colors

### 品牌与基础表面

| Token | 角色与适用范围 |
|---|---|
| `primary` | 现有主题主色、普通链接及通用键盘焦点线索 |
| `primary-hover` | 正文、弹层中普通链接的悬停色；不替代具备专属状态的组件规则 |
| `text` | 主文字和当前导航文字 |
| `text-secondary` | 辅助说明、默认导航文字与品牌文字 |
| `canvas`／`surface` | 应用背景与侧栏、表格等内容表面 |
| `border` | 结构分隔线与内容容器边界 |
| `navigation-hover-text`／`navigation-hover` | 非当前一级导航的悬停文字与背景 |
| `navigation-selected` | 当前一级导航的背景块 |

品牌名称为 **OMK Studio**。品牌链接的 hover、focus、active 状态保持文字颜色稳定，键盘焦点通过轮廓提示。

项目文档与 Issue 中，配色统一称为“Studio 品牌紫”，通过色值和用途描述，不以外部参考品牌命名。

一级导航、分区导航与侧栏使用墨色层级；正文链接使用品牌色层级。当前导航不参与非当前项的悬停加深。一级导航用背景块标识当前位置，不能复制分区导航的下边框样式。

### 已确认的目标配色

以下是后续视觉改进的方向，区别于 frontmatter 中记录的当前实现值。应用到组件时须同步更新主题、相关样式与本文件，不让当前基线和实现各自漂移。

| 角色 | 目标色值 | 使用边界 |
|---|---|---|
| 主按钮、正文链接 | `#7753FF` | Studio 品牌紫；主按钮采用纯色，不将导航正文一并染紫 |
| 选中背景 | `#F2EEFF` | 浅紫底配深墨色文字，保留清晰的当前项标识 |
| 导航与主文字 | `#192236` | 延续墨色层级，不因配色更新改变信息优先级 |

主紫与白色按 sRGB 相对亮度计算的对比度约为 4.70:1；该数值只说明此配色组合，不代表生成图片或全部组件已经通过无障碍验收。浅紫不作为普通字号白字按钮的底色。

悬停 `#6745EB`、按下 `#5A3CDB` 为交互配色提案，需在真实组件中验证后再纳入默认值。字体、间距、圆角、页面密度与多栏结构继续通过代表页收敛，不从生成图片反推精确 token。

### 状态与证据

现有 CSS 已集中定义 `--tone-success-*`、`--tone-warning-*`、`--tone-error-*`、`--tone-neutral-*`，受管生命周期分类使用 `--managed-tone-*`。语义 tone 与生命周期分类是不同维度，不因共享颜色而合并业务含义。

运行完成、证据完整、结论成立分别表达；候选的保留不等于内容已验证。来源缺失、不可读和不确定性必须明确呈现。状态的具体含义来自领域投影，展示层不重算或改写。

**待收敛：** 候选列表、运行中条目与品牌主题尚有不同的选中色；小字号状态文字的对比度需在实际表面上验证。因此本版不将所有现存状态色扩充为通用配色规范，也不声明其已通过无障碍验收。

## Typography

复用现有系统字体栈，保持中文优先。等宽字体用于代码、技术身份和原始记录，不把整段知识正文改为等宽排版。数字比较区使用等宽数字对齐，长标识仍需完整查看入口。

frontmatter 中的字号按**实际角色**命名：`measure-page-title` 是评测页标题，`reader-body` 是对话正文，`page-description` 是评测页说明，`session-title` 是对话列表标题。它们不是统一全站的 display／headline 阶梯；缺乏明确来源的字重或字号不补默认值。

**待收敛：** Observe、Measure、候选页的标题尺度尚不统一；时间轴存在更小字号；对话文本目前有直接显示 Markdown 标记的路径。后续需要通过长中文标题、代码与长回复设计稿验证阅读层级。本版不把 22–24px 页标题、15px 长文等试稿建议写为已生效规范。

## Layout

### 已确认的空间边界

- 应用占满视口，页面根节点和外壳不承担横向、纵向滚动。导航、页面操作及关键摘要固定可达。
- 左侧栏是品牌、一级导航、工作区列表和设置入口的唯一载体；工作区内容通过外壳槽位加入，不另建一套全局导航。
- 先使用紧凑布局、分页、标签页与按需详情；确有长内容时才在表格、正文、时间轴、证据面板或抽屉内滚动，并约束高度、最小尺寸与滚动传播。
- 不能用 `overflow: hidden` 隐藏无法访问的内容。表格表头和单元格不自动换行；状态、数量和操作列保留空间，长文本用省略加完整提示／详情，或内部横向滚动。
- 普通双行列表优先采用约 56px 行高。独立挂载的报告不强制使用应用外壳；仅挂载 `/measure` 的预览宿主保留无导航的紧凑页头。

### 当前布局参数

这些是现有实现的上下文，不代表新的统一断点体系。

| 范围 | 当前实现 |
|---|---|
| 应用高度 | `100dvh`；弹性内容区域设置最小尺寸约束 |
| 侧栏 | 常规宽度 260px；窗口不超过 1100px 时为 220px |
| 窄窗口侧栏 | 窗口不超过 760px 时切为 280px 宽覆盖侧栏，由移动页头按钮控制 |
| 内容内边距 | 常规为 12px 20px；窗口不超过 700px 时为 8px 12px |
| 无导航预览页头／移动页头 | 高度 52px |
| 对话阅读列 | 宽窗口通过内边距把正文约束在约 860px 范围内 |

frontmatter 的间距值来自已有常用间距，不要求所有现存尺寸立即归入同一比例。

**待收敛：** 当前 700px、760px 等响应式边界分属于不同区域，不能仅凭本文件机械替换；多栏审核在中等宽度和较矮窗口下的分配方式，应在代表页中验证后统一。

## Elevation & Depth

现有主界面主要通过背景、细边界与间距区分区域。桌面侧栏与普通表格容器自身没有专属阴影，不把所有内容都提升成悬浮卡片；Ant Design 控件和浮层仍遵循所用组件主题。

现有自定义阴影主要用于覆盖层或浮动入口：窄窗口侧栏使用 `0 0 24px rgba(25,34,54,.18)`，展开侧栏按钮使用 `0 1px 6px rgba(25,34,54,.12)`。它们是特定角色的当前值，不是任意卡片可复用的通用层级。

当前覆盖侧栏使用 `transform .2s ease` 过渡。本版不推定全局动效时长、缓动或减少动态效果支持已经统一；新增动效规则需另行验证。

## Shapes

控件基准圆角来自主题，导航项沿用 `rounded.control`；表格、证据等容器常见圆角为 `rounded.container`。结构边界通常为细线，而不是粗描边。

品牌标记当前为 32px 圆形，属于品牌元素。时间轴圆点和紧凑节点表达各自的图形角色，不作为普通按钮或卡片的形状规范。

## Components

### 外壳、品牌与导航

复用 `StudioShell`。一级导航包含观测、评测、知识和 Agent；工作区列表与底部设置属于同一侧栏。用 `aria-current` 表达当前位置，并保留可见状态。导航项的默认、悬停与当前状态对应 frontmatter 中的三个 `navigation-item` 角色。

品牌文字在交互时保持稳定；其它可点表面应具有颜色或背景反馈。不能只增加不可见的语义属性，却让可点击项与静态文字完全一样。

### 按钮、输入框与弹层

现有基础控件来自 Ant Design，统一经过 `StudioTheme`。本版只记录实际主题覆盖的主色、文字色、背景、字体与圆角，不凭经验补写 Ant Design 的尺寸、派生悬停色、禁用态或阴影。

自定义链接与按钮的通用键盘焦点为品牌色轮廓（2px，外偏移 3px）；侧栏部分自定义控件使用内偏移（-2px）。已有组件专属焦点样式按其作用范围保留，不能用一条全局覆盖规则替代所有控件状态。

### 列表与表格

表格容器复用 `table-container` 的表面与圆角，用 `border` 分隔。不要把空白表格、列宽或每页条数当作品牌视觉；它们取决于数据和任务。

普通双行列表区分标题与辅助信息。省略显示必须有完整内容提示或详情路径，操作列不得自动换行。横向滚动发生在表格内部，不传播为整个应用的横向溢出。

### 对话、候选与证据

知识正文、原始记录、派生解释与结果应保持可区分的身份。阅读排版可以改进，但不能覆盖原始证据，也不能因为视觉简化而删除来源、时间、修订或关联身份的访问路径。

候选审核要区分维护选择与验证效果；在确认向模型发送内容前保留来源范围预览。错误与证据不完整是可见状态，不包装成普通空白。

**待收敛：** 各页标题区、主要操作、空状态与阅读排版尚未成为统一组件规范。先用对话阅读、评测列表和候选审核三类代表页验证，再确认具体结构；本版不宣称重设计已落地。

## Do's and Don'ts

### 应当

- 复用已有外壳、主题和相应角色的基础值；修改规范时同时说明适用范围与源码依据。
- 保持用户可见文案中文优先，技术标识保留原语法；LLM judge 统一称为“评委”。
- 保留来源和不确定性，分别表达运行、证据、结论和维护状态。
- 改造页面时核对正常桌面与较矮窗口，以及 Observe、Measure、Knowledge、报告和异常页面的布局边界；四条泳道完整可见，表格操作可达。
- 将参考案例和待验证设计参数留在提案中，代表页验证后再提升为正式规范。

### 避免

- 把当前散落的所有硬编码色值、字号和页面特例都提升为全站规范。
- 用来源缺失替代“无问题”，用运行完成或候选保留替代效果已验证。
- 在外壳之外新增一级导航，靠整页滚动或裁切处理布局不足。
- 把官网大标题、装饰和宽留白直接套到密集的审核与证据界面。
- 将本版源码提取误报为像素级复刻、完整无障碍通过或所有页面已统一；把工具面板预览当成真实 Studio 验收。