diff --git a/docs/development/visual-direction.md b/docs/development/visual-direction.md
index 9f25d4a..78822cb 100644
--- a/docs/development/visual-direction.md
+++ b/docs/development/visual-direction.md
@@ -1,56 +1,230 @@
-# Ferese visual direction: quiet structure
+# Ferese Graphite 视觉方案
 
-Reference reviewed on 2026-10-28: the user supplied a 9.78-second, 60 fps
-2168 × 2160 screen recording. It is an edited design progression, not a recording
-of a working desktop's interaction latency or animation timings. Local analysis
-frames and the source fingerprint live in `.artifacts/visual-reference-20261028/`.
+- 文档版本：1.0
+- 整理日期：2026-10-28
+- 实现基线：`1e34ec4`
+- 适用范围：Ferese 设置、Shell 共享控件、锁屏与原生 Rime 候选界面的主题协同。
 
-## What the reference changes
+## 1. 视觉目标
 
-| Segment | Observed change | Ferese application |
+以中性表面、细边界和清晰排版建立界面层次，让配置内容和操作状态成为视觉重点。
+
+1. **中性底色**：使用石墨灰与纸白两种外观，通过相邻表面的明度差区分区域。
+2. **少量强调色**：将颜色集中在选中、键盘焦点、开关与状态提示上。
+3. **统一节奏**：统一页边距、分组间距、图标尺寸和导航行高。
+4. **文字分层**：用字号、字重和次级文字颜色区分标题、说明与辅助信息。
+5. **克制装饰**：降低光晕、玻璃染色和阴影的存在感，保留必要的层次提示。
+6. **状态清晰**：分别表达悬停、按下、选中、键盘焦点和禁用状态。
+
+## 2. 参考视频分析
+
+参考文件：`ir9g5tra15711hQD.mp4`，时长约 9.78 秒，2168 × 2160，60 fps。
+
+视频展示的是界面重设计过程。可提取其配色、布局和排版原则；剪辑中的变化速度不能用于确定真实交互的延迟、缓动曲线或动画时长。
+
+| 视频阶段 | 可观察的变化 | 在 Ferese 中的落地 |
 | --- | --- | --- |
-| 0–3 s | Spacing guides replace uneven navigation and card offsets. | A 4 px spacing scale; 24 px page/section rhythm, 12 px card gutters, 36 px navigation rows. |
-| 3–5 s | Purple glows and saturated surfaces recede into neutral planes. | A selectable Graphite family, paired dark and light appearances; near-opaque surfaces and restrained tint/shadow. |
-| 5–7 s | Outline icons, a smaller brand, consistent insets and quieter selection. | 24 px brand mark, small outline icons, neutral navigation selection plus an accent marker. Keyboard focus stays explicit. |
-| 7–9.78 s | Typography and content become the hierarchy; color remains on meaningful data. | MiSans retained; medium-weight page/card titles, readable secondary text, color reserved for active state and status. |
+| 0–3 秒 | 调整导航、卡片与标题间距，统一对齐关系 | 建立主要间距尺度，统一导航行高和页面边距 |
+| 3–5 秒 | 紫色光晕和高饱和背景逐渐收敛为中性表面 | 新增 Graphite 深浅主题，降低染色与阴影强度 |
+| 5–7 秒 | 换用细线图标、缩小品牌标识、简化选中态 | 使用小型轮廓图标、中性选中底色与细指示条 |
+| 7–9.78 秒 | 通过排版与内容形成层级，颜色集中在有意义的信息上 | 保留 MiSans，统一标题字重、说明文字和状态色使用方式 |
 
-## Implemented layout
+## 3. 主题与配色
 
-Appearance is a configuration overview, with no invented metrics or dashboard
-content. Quick access puts language/general preferences and the complete editor
-on the first row. Desktop, interaction and system settings follow as grouped,
-equal-width cards. The card text owns the flexible space; chevrons align to the
-far edge. Above 680 logical pixels of content width the overview has two columns;
-below that it becomes one column. Card height follows the text, including Chinese
-and English line wrapping.
+主题族 ID 为 `graphite`。深色预设 ID 为 `graphite`，浅色预设 ID 为 `graphite-light`；通常选择主题族后，通过外观模式切换深浅。
 
-Normal settings use thin section boundaries instead of large colored blocks.
-Each 36 px navigation hit area centers the complete content row vertically; the
-row then centers its text, icon and indicator internally. Both layers are necessary
-because the native custom button places its child at the top padding.
-Navigation selection and keyboard focus are independent: the former uses a quiet
-fill and a small accent marker, while keyboard focus has a clear outline. Stronger
-boundaries remain available through the existing high-contrast preference.
-Explicit gradient theme choices still apply to theme controls and window focus.
+### 3.1 基础色板
 
-Graphite is an ordinary registered theme family (`graphite`, `graphite-light`),
-so the Shell, Settings, locker and native Rime candidate popup receive it through
-the existing theme protocol. Theme selection changes only in the isolated preview
-for this review; choosing another family remains available in Appearance → Theme.
-No new configuration keys or input gestures are introduced by the visual update.
+下表是预设源值。实际绘制颜色经过共享主题解析与对比度校正，组件应消费解析后的主题令牌，避免各自复制一份色值。
 
-## Acceptance
+| 角色 | 深色 | 浅色 |
+| --- | --- | --- |
+| 基础表面 / 侧栏 | `#101113` | `#F7F8FA` |
+| 抬升表面 | `#1B1D21` | `#FFFFFF` |
+| 应用背景 | `#141518` | `#F1F3F5` |
+| 主要文字 | `#E7E9ED` | `#23262C` |
+| 次级文字 | `#9A9FA9` | `#626A76` |
+| 强调色 | `#8EABD8` | `#3F6DAA` |
+| 边界基色，含透明度 | `#FFFFFF16` | `#00000018` |
 
-Check both Graphite appearances and all existing presets, keyboard focus and text
-contrast, a narrow single-column view and a wide two-column view, card boundaries
-and reachability, the complete editor's scrolling, and a native Rime candidate.
-The edited video does not provide evidence for copying an easing curve or duration;
-existing motion and Reduce motion settings continue to own those behaviors.
+边界与控件底色会结合当前背景和文字颜色派生。普通分区采用细边界与轻微明度差；高对比度模式加强边界与文字校正。
 
-Validation completed in this fork: 115 Settings tests, 32 shared theme/control
-tests, 247 Shell tests and 46 configuration tests; optional profiling tests remain
-ignored. Native captures cover dark/light appearances and a 631 px window.
-All 15 navigation items have a centering regression check, including the three
-Interaction destinations selected in turn; a hover-only native probe confirms
-Windows aligns inside its highlighted hit area. Native Rime input, horizontal
-candidates, paging, theme changes and service recovery also passed.
+### 3.2 材质参数
+
+| 参数 | 深色 | 浅色 |
+| --- | ---: | ---: |
+| 材质不透明度 | 0.96 | 0.98 |
+| 模糊半径 | 8 | 4 |
+| 染色强度 | 0.06 | 0.02 |
+| 阴影不透明度 | 0.12 | 0.08 |
+
+这些数值由主题和组件共同解释。设置应用的正文表面保持清楚稳定；Shell 等支持材质的组件使用对应材质令牌。
+
+导航选中背景采用中性色。用户明确选择的渐变主题，继续通过现有主题机制作用于相关控件和窗口焦点。
+
+## 4. 字体与图标
+
+### 4.1 字体层级
+
+界面使用 **MiSans**；Rime 候选优先使用 **MiSans / MiSans TC**。
+
+| 角色 | 逻辑字号 | 字重 / 用法 |
+| --- | ---: | --- |
+| 页面标题 | 24 px | Medium |
+| 总览卡片标题 | 14 px | Medium |
+| 侧栏导航、普通字段名称 | 13 px | Regular |
+| 总览分组标题 | 12 px | Semibold、次级色 |
+| 页面说明、卡片说明 | 12 px | Regular、次级色 |
+| 侧栏分组、字段辅助说明、保存状态 | 11 px | Regular、次级色 |
+
+卡片高度跟随文字换行，适应中文和英文。标题、说明与操作控件各自保留清楚的空间。
+
+### 4.2 图标
+
+- 品牌标识：24 px。
+- 页面与导航轮廓图标：19 px。
+- 小型操作图标、卡片箭头：16 px。
+- 普通图标使用主要或次级文字色，选中导航图标使用强调色。
+- 图标与同行文字垂直居中；卡片箭头固定在行的末端。
+
+## 5. 间距与形状
+
+本文的 px 均指逻辑像素，截图中的物理像素会随显示缩放变化。
+
+以 **4 px** 为主要间距基准；文本行间距、细边界和字形光学校正允许采用更细的数值。
+
+| 项目 | 规格 |
+| --- | --- |
+| 页面上边距、左右边距 | 24 px |
+| 总览分组间距 | 24 px |
+| 同组卡片间距 | 12 px |
+| 卡片内部边距 | 16 px |
+| 卡片图标与文字间距 | 12 px |
+| 卡片标题与说明间距 | 4 px |
+| 侧栏宽度 | 208 px |
+| 折叠侧栏抽屉宽度 | 244 px |
+| 侧栏内边距 | 上下 24 px、左右 12 px |
+| 导航按钮高度 | 36 px |
+| 导航按钮左右内边距 | 8 px |
+| 导航行内元素间距 | 8 px |
+| 选中指示条 | 2 × 14 px |
+| 普通输入框圆角上限 | 7 px |
+| 按钮圆角上限 | 9 px |
+| 分区容器圆角上限 | 10 px |
+| 常规边界 | 1 px |
+| 键盘焦点轮廓 | 2 px |
+
+圆角上限受现有主题圆角设置约束，方角等用户偏好继续生效。
+
+## 6. 设置总览与自适应布局
+
+Appearance 作为全部设置的入口，内容按实际功能分组：
+
+| 分组 | 入口 |
+| --- | --- |
+| 快速访问 | 常规、全部配置 |
+| 桌面 | 主题、壁纸、面板与 Shell、托盘图标 |
+| 交互 | 窗口、键盘与鼠标、辅助功能 |
+| 系统 | 显示器、连接、通知、锁屏、登录启动项 |
+
+总览使用等宽卡片，文字区域占用弹性空间，箭头在卡片末端对齐。
+
+- 总览**可用内容宽度 ≥ 680 逻辑像素**：双列。
+- 总览**可用内容宽度 < 680 逻辑像素**：单列。
+- **窗口宽度 < 960 逻辑像素**：侧栏收起，通过按钮打开导航抽屉。
+- 常规页面内容框最大宽度为 1040 px；面板编辑页为 1120 px。
+- 卡片高度由内容决定，说明换行后保持完整显示。
+- 超出视口的内容通过滚动访问，保存状态与撤销、重新加载操作位于页脚。
+
+卡片列数依据正文可用宽度计算，侧栏折叠依据窗口宽度计算，二者使用独立阈值。
+
+## 7. 组件状态与对齐
+
+| 状态 | 视觉表达 |
+| --- | --- |
+| 普通 | 中性表面、细边界、正常文字对比度 |
+| 悬停 | 轻微改变底色明度，保持几何位置稳定 |
+| 按下 | 比悬停更明确的明度或色彩反馈 |
+| 选中 | 中性选中底色，配合小面积强调色；导航显示左侧指示条 |
+| 键盘焦点 | 明确的 2 px 焦点轮廓，与选中态分别表达 |
+| 禁用 | 使用次级文字与图标颜色，保持状态可辨认 |
+| 高对比度 | 加强边界，并校正文字颜色以保持可读性 |
+
+### 7.1 导航垂直居中
+
+导航需要同时满足两层对齐：
+
+1. 图标、文字与指示条在内容行内部垂直居中。
+2. **整个内容行在 36 px 按钮及悬停区域内垂直居中。**
+
+原生自定义按钮会从上内边距放置子内容，因此仅设置行内居中，会使整行仍处于按钮上方。实现中增加填满按钮高度的居中容器，确保普通、悬停、选中和焦点状态使用同一条中心线。
+
+### 7.2 Rime 候选界面
+
+- 候选横向排列，使用 MiSans 字体。
+- 编号、中英文候选字按实际字形边界进行垂直居中。
+- 背景、边界与选中态通过共享主题保持一致。
+- 保留数字键选字以及数字行 `-`、`=` / `+` 翻页的既有行为。
+
+## 8. 动效原则
+
+保留现有动画与“减少动画”配置。动效服务于状态变化与空间关系，悬停和按下反馈保持简洁。
+
+参考视频没有提供可验证的交互时长或缓动参数，因此本轮视觉方案没有新增动画时长、缓动曲线或输入手势。
+
+## 9. 配置示例
+
+```kdl
+theme {
+    family "graphite"
+    mode "dark"
+    typography {
+        font-family "MiSans"
+    }
+}
+```
+
+将 `mode` 改为 `"light"` 可使用同一主题族的浅色外观。现有其他主题仍可从“外观与设置 → 主题”切换。
+
+## 10. 验收与实现索引
+
+### 验收要点
+
+- 深浅外观均能区分背景、分区、文字和操作状态。
+- 鼠标悬停与按下不会导致文字或图标跳动。
+- 选中态与键盘焦点分别清楚可辨。
+- 导航文字、图标和指示条相对完整按钮区域居中。
+- 窄窗口单列、宽窗口双列，所有设置入口均可到达。
+- 中文与英文换行后，卡片内容完整且互不重叠。
+- 原生 Rime 候选保留横向排列、选字、翻页与主题跟随。
+
+### 已完成的验证
+
+基于实现基线 `1e34ec4`：
+
+| 验证项 | 结果 |
+| --- | --- |
+| 设置测试 | 115 项通过 |
+| 共享主题与控件测试 | 32 项通过 |
+| Shell 测试 | 247 项通过 |
+| 配置测试 | 46 项通过 |
+| 布局检查 | 覆盖 480–1800 px 窗口宽度 |
+| 原生预览 | 已检查深浅外观及 631 px 窄窗口 |
+| 导航居中 | 全部 15 项；包含“交互”分组和实际悬停检查 |
+| Rime | 原生输入、候选、翻页、主题变化与进程恢复通过 |
+
+可选性能分析测试未计入上述通过项。
+
+### 实现位置
+
+| 内容 | 文件 |
+| --- | --- |
+| 主题色与材质预设 | `crates/ferese-config/src/presets.rs` |
+| 主题族注册 | `crates/ferese-config/src/families.rs` |
+| 共享按钮、导航、输入框状态 | `crates/ferese-theme/src/controls.rs` |
+| 页面结构与导航居中 | `shell/ferese-settings/src/pages.rs` |
+| 总览卡片与双列布局 | `shell/ferese-settings/src/all_options.rs` |
+| 分区表面与图标 | `shell/ferese-settings/src/visuals.rs` |
+| 布局及对齐回归检查 | `shell/ferese-settings/src/scroll_tests.rs` |
+
+本机参考帧、深浅预览、导航悬停截图及验收记录保存在 `.artifacts/visual-reference-20261028/`，这些验收资料不随仓库分发。