设计规范
灵感来自《刀剑神域：序列之争》中的 Augma：在真实环境之上，以清晰、轻盈、克制的方式呈现信息。这里将这一方向提炼为原创的 Web 界面语言。
同一界面，两种光线
浅色适合明亮环境，深色减少大面积亮面。两侧使用相同的公共组件和语义变量，可以独立调整亮度、隐藏 HUD，再恢复默认。
我的视界
让信息保持清晰，让操作足够轻。
我的视界
让信息保持清晰，让操作足够轻。
在页面根元素使用 .dark 或 data-agm-theme="dark" 开启深色；嵌套的 data-agm-theme="light" 可以恢复浅色。Dialog、Select、Tooltip 和 Toast 的浮层挂载到 body，因此应用主题应设置在 html 或 body 上；局部主题示例只包含内联组件。
表面与层级
白色与冰灰构成主要表面。透明度与细线边框建立层次，切角只用于可操作入口，环形元素用于状态和进度。阅读区域保持安静，复杂背景上的面板应有足够实色背景，保证文字对比。
颜色
| Token | 浅色值 | 深色值 | 用途 |
|---|---|---|---|
--agm-bg | #ffffff | #131e29 | 页面背景 |
--agm-surface | #f3f6f8 | #1b2936 | 次级表面 |
--agm-text | #263442 | #edf4fa | 主要文字 |
--agm-muted | #5c7187 | #a0b6c9 | 辅助说明 |
--agm-accent | #b75e08 | #f1a74c | 主要操作与提醒 |
--agm-highlight | #f28c12 | #f28c12 | 装饰性高亮、HUD 图形与计量条警示 |
--agm-cyan | #258ca4 | #67c8da | 连续控制 |
--agm-success | #287947 | #7cdaa0 | 成功 |
--agm-danger | #bc394a | #ff95a4 | 错误 |
在应用根部覆盖变量即可定制主题。改变强调色时同时检查 --agm-on-accent 的文字对比。状态必须包含文字，不能仅用颜色表达。
字体与排版
站点使用 Exo 2 的几何字形，中文回退系统无衬线字体。组件通过 --agm-font 接受宿主字体；CSS 包不请求外部字体。正文与控件保持易读尺寸，数字适合展示实时状态。
状态与反馈
| 状态 | 表达方式 | 使用建议 |
|---|---|---|
| 默认 / 聚焦 | 细边框 / 外侧焦点环 | 键盘焦点不能被切角或容器裁剪 |
| 禁用 | 降低对比并停止交互 | 附近说明不可用原因，不用 Tooltip 承载唯一解释 |
| 输入错误 | 错误边框与具体错误文字 | 用 error 指出修正方式，用 hint 保留输入要求 |
| 处理中 | Button 的 loading 或未知进度 | 禁止重复提交；未知进度省略 value，不能传入虚假的百分比 |
| 操作反馈 | Toast 的 tone 与结果文字 | success / warning / danger / neutral 分别对应成功、提醒、失败、消息 |
| 空结果 | 说明当前筛选没有匹配项 | 提供清除筛选或下一步操作 |
错误说明和辅助说明通过 aria-describedby 与字段关联。验证时保留用户输入，修正后清除错误；异步提交失败不能只靠通知颜色表达。
操作与动效
按钮、浮层关闭入口至少提供 44px 的触控高度；小尺寸开关和滑块通过扩展命中区域保持轻盈的外观。布局时保留空间，避免相邻命中区域重叠。焦点环保持完整，不被切角裁剪。动效用于解释状态变化，尊重 prefers-reduced-motion。
动效取自 Augma 界面“浮现”于现实的方式：快速出现，柔和落定，离开时更短。
| 动效 | 用于 | 表达 |
|---|---|---|
| 浮现 | Dialog；任意元素加 .agm-materialize | 先出现一条亮线，再纵向展开；关闭时沿原路折叠 |
| 光扫 | Button 悬停、Dialog 打开 | 一道光掠过表面，只在进入时播放 |
| 环绕 | IconButton 悬停与聚焦 | 两段弧线环绕目标；pressed 时以强调色填充，如同被选中的菜单圆钮 |
| 声呐 | HudStatus | 状态点向外扩散；危险状态更急促，中性状态保持静止 |
| 余影 | HudGauge | 数值下降时浅色余影稍后收回，让损失清晰可见 |
| 倒计时 | Toast | 底部细线显示剩余时间，悬停或聚焦通知区域时暂停 |
--agm-duration（160ms）用于颜色与按压，--agm-duration-slow（420ms）用于展开与位移；--agm-ease 负责进入，--agm-ease-in 负责离开，--agm-ease-spring 只用于开关滑块这类实体回弹。--agm-light、--agm-sheen 与 --agm-glow 控制玻璃顶边、光扫和强调光晕。.agm-materialize 可用 --agm-delay 编排先后顺序，动画结束后不残留裁剪，阴影和强调线保持完整。
开启减少动态效果时，浮现、光扫、环绕、声呐与倒计时全部停止，内容直接以最终状态出现；余影随数值立即更新。
组合
Panel 用标题、description、内容和 footer 建立信息分组；actions 放置标题栏的次要操作，footer 承载当前分组的主要动作。窄屏操作区自然换行。HudStatus 说明当前状态；HudProgress 表达过程；HudGauge 表达剩余存量，例如电量或信号。先确定信息层级，再选择视觉元素。文档页和工作界面无需复用主页上的装饰轨道。
来源
设计方向参考 Augma 官方设备介绍。这是独立的界面实验，与作品版权方没有关联。