设计系统¶
文档站用的是 Aether —— 一套磨砂玻璃材质的设计系统（Apple 亮色语言）。
规范原文在项目根目录的 DESIGN.md，本页是所有组件的实际渲染效果，改样式时以这里为准。
给写文档的人： 你不需要懂 HTML。正文里能直接用的是 按钮、徽章、提示框 和 图标， 下面的写法照抄即可。其余组件（命令坞、标签页、开关等）属于站点框架的一部分， 由样式表统一控制，正文里用不到。
颜色¶
整站的颜色只有下面这些，全部定义在 stylesheets/system.css 里。
写新样式时请引用变量，不要写死色值。
--color-bg--color-surface-glass-strong--color-ink--color-ink-secondary--color-ink-tertiary--color-accent--color-success--color-warning--color-danger强调色的用法有严格限制
系统蓝只用于焦点环、链接、开关的开启态。不要拿它当按钮底色或装饰色 ——
设计规范里写得很明确：玻璃材质上加彩色填充会直接破坏质感。
同理，石墨 --color-ink 只用于主操作、选中态和文字，不能拿来做大面积背景。
排版¶
字体是 Inter（正文）+ JetBrains Mono（代码、键盘按键、数字）。 中文没有对应字形时回落到系统黑体（苹方 / 微软雅黑），不会出现方块。
Display 48 / 600
标题 32 / 600
小标题 24 / 600
正文 15 / 400 —— 这是文档正文的默认字号，行高 1.6，字距 -0.002em。
标签 13 / 500 —— 用于次级说明
Micro 11 / 600 / 大写
JetBrains Mono 0123456789
标题不要超过 600 字重
700 及以上的粗体会破坏系统的冷静语气。正文里用 **加粗** 会被渲染成 600，
这是上限。
按钮¶
正文里直接写 Markdown 就能生成按钮：
实际效果：
设计系统还定义了更细的按钮层级（玻璃药丸 + 炭黑图标圆片）， 用于首页 hero 那种强调场景：
悬停会微微上浮，按下会向内收紧 —— 这是「玻璃被按过边缘」的触感， 不是简单的变色。
徽章¶
草稿 已验证 UE 5.4.4
徽章是小号大写字母 + 宽字距，用来标状态或版本，不承担主要信息。
提示框¶
用 MkDocs 原生的 admonition 语法，圆角和材质已经按设计系统调好：
普通说明
用于补充信息，不打断阅读节奏。
技巧
用于「这样做更好」的建议。
注意
用于「这样做会出问题」的提醒。
危险操作
用于不可逆、会丢数据的操作。
卡片¶
容器类内容用卡片：24px 圆角玻璃板，内边距 24px。
任务系统
AI 对话系统
表单控件¶
键盘按键用 <kbd>：
按 Ctrl + S 保存，按 F5 重新构建。
标签页¶
选中态是炭黑药丸，未选中是雾色文字 —— 像一枚卡进凹槽的筹码。
命令坞¶
这是整套设计系统的招牌组件：搜索药丸 + 玻璃图标片 + 竖分隔线 + 主按钮， 全部叠在一层带折射高光的玻璃上。
文档站里为什么看不到它
命令坞是 App 界面的组件（全局搜索 + 快捷操作），文档站的导航由 MkDocs 的 侧边栏承担，没有它的位置。上方的搜索框用的是同一套材质语言（玻璃药丸 + 聚焦换系统蓝描边），只是形态更简单。
图标¶
图标全部来自 Lucide，统一 1.75 描边、继承当前文字颜色。
不要在页面里手写 SVG 路径，也不要引入别的图标库。
正文里插图标写成这样：
aa-i 是基础类，aa-i-<名字> 选具体图标。图标颜色自动跟随周围文字颜色，
所以放在标题里就是标题色，放在链接里就是系统蓝，不用单独设色。
图标类由 tools/build_icons_css.py 从 overrides/.icons/lucide/ 生成。
要加新图标：把 SVG 放进那个目录，然后重跑一次脚本：
玻璃与层级¶
所有玻璃面都由三层叠成：填充 + 发丝线描边 + 内倒角高光 + 外悬浮阴影。 四者缺一不可 —— 发丝线是浏览器不支持背景模糊时唯一还存在的边缘。
--color-surface-glass · 0.55
--color-surface-glass-strong · 0.75
--color-surface-raised · 0.85 + 更强的外阴影
玻璃不要叠超过两层
背景模糊是靠「透过玻璃看到后面的东西」制造错觉的。叠到第三层之后， 后面的东西已经被前面的玻璃糊掉了，质感会塌掉变成一块灰板。
无障碍¶
以下三条是硬性要求，改样式时不能破坏：
- 焦点环不能删。 每个可交互元素都必须有
:focus-visible的 3px 系统蓝焦点环。用键盘 Tab 走一遍页面，焦点必须始终可见。 - 发丝线不能删。 见上文，它是玻璃面在降级环境下的唯一边缘。
- 尊重「减少动态效果」。 系统在
prefers-reduced-motion下会自动把 所有过渡压到 1ms，这是system.css里统一处理的，不要覆盖。