ak-ui 设计语言
设计目标
ak-ui 是一套独立的设计语言，灵感来自《明日方舟》界面的信息层级、工业几何和战术终端氛围。它为独立产品提供可复用的设计约束，不以还原某个游戏画面、构图、品牌或素材为目标。
评价界面时，应检查是否符合这份设计契约，而不是与某张截图有多相似。
风格强度
accent
保留宿主产品的布局和品牌身份。加入语义信号色、醒目的操作标题、可见的焦点和紧凑的元信息；每个组件最多使用一种克制的切角或线条处理。
system
完整应用组件设计语言：分层的中性表面、非对称强调、切角几何、密集但清晰的元信息、功能信号和明确的交互反馈。这是默认模式。
terminal
仅在内容适合时使用沉浸式构图。有目的地加入指令平面、运行数据、透视、视差或分阶段动效。为移动端重新组织紧凑布局，不要直接缩小桌面控制室。
设计原则
先建立层级，再添加装饰
每个界面区域都应有一个主要操作或数值、支撑它的上下文，以及低调的元信息。添加边框或辉光前，先通过尺寸、字重、对比度、对齐和留白建立层级。
短标签、标识符、计数、时间戳、进度和状态文字应传达真实信息。不要仅为营造氛围添加无意义的编号。
使用有目的的非对称几何
优先使用矩形模块、切角、错位线条、阶梯边缘或单一倾斜轴。即使可见形状被裁切，点击区域也应保持矩形并足够大。
圆角卡片、统一的胶囊形状、柔和悬浮阴影和等间距的通用仪表盘方块不应成为主导。宿主品牌或控件辨识需要时，可以使用小圆角。
让颜色表达功能
大部分界面使用纸面色、石墨色、黑、白和低饱和灰。青色／蓝色表示信息，黄色表示操作或警告，橙色用于局部强调，绿色表示成功，红色表示危险。
颜色变化还应配合标签、图标、图案或几何变化。辉光用于局部反馈，不作为永久的背景效果。
用排版承载结构
条件允许时，主要中文操作标题使用粗衬线字体或高字重展示字体。正文与控件使用中性无衬线字体；标识符、运行数据和对齐数值使用等宽字体。
官网风格的导航与内容展示优先使用窄体无衬线主标签和较小的补充标签，不能把操作标题的粗衬线规则推广到所有标题。字体角色与来源边界见官网风格覆盖与示例。
操作标签保持简短，数字保持清晰，元信息可适当增加字距。避免每一行都使用大写、斜体、等宽字体或额外字距。
通过表面建立层次，避免堆叠装饰
需要对比时，可以组合纸面感的亮色表面和石墨色的暗色表面。用醒目的分隔线、小幅错位和受控阴影表达层次。不要在同一元素上叠加多重边框、渐变、噪点、辉光与浮雕。
让交互反馈明确
悬停、按压、选中、加载和焦点状态，应至少改变信号、位置、填充、线条或标签中的两项。过渡保持快速、利落。键盘焦点指示必须可见，且不能被裁切隐藏。
将控件反馈、区块入场与环境动效分开处理。现有动效控制器的默认值是 ak-ui 的选择，不代表官网原始时间线；参数与降级说明见官网风格覆盖与示例。
布局规则
- 将相关数据对齐到稳定网格，仅为主要操作或焦点对象打破网格。
- 即使布局密集，触控目标也应至少为 44 × 44 CSS 像素。
- 保持易读的行长，并在主要操作周围留下足够空间。
- 为窄屏重新组织多平面的终端布局，不依赖水平滚动。
- 浮层应位于带变换的祖先元素之上；检查 Portal／Teleport 内容在实际 DOM 位置中的表现。
- 让内容决定信息密度，普通产品页面不应默认继承演示终端的运行数据密度。
品牌融合
保留产品有意选择的品牌色、字体与文案语气。先将它们映射到 ak-ui 的语义角色，再应用 ak-ui 的几何、层级、密度和反馈。
不要把默认青黄配色强加给已有鲜明品牌的产品。危险、警告、成功和焦点等角色不能因过度映射而失去原有含义或对比度。
原创性边界
使用原创、已获授权或用户提供的图像。不要复制或抓取游戏 Logo、角色立绘、界面纹理、图标、截图、音频或拆包素材，也不要逐像素复刻某个具名游戏界面。
移除 ak-ui 样式后，最终界面仍应能被识别为用户自己的产品。
常见问题
- 只使用黑色背景、青色边框和无处不在的辉光。
- 每个元素都切角、倾斜、编号，或使用大写和等宽字体。
- 装饰性运行数据抢占真实内容的注意力。
- 用“游戏式高密度”为过小的标签和控件辩解。
- 把桌面终端缩小到移动端无法使用。
- 直接覆盖品牌色，而没有映射到语义角色。
- 为了方便改样式，用手写交互替换原有 Headless 行为。
- 依靠复制游戏素材获得相似感，而没有应用设计契约。