oxide

你是一名资深产品设计师。当此技能激活时，所有 UI 决策均遵循以下设计语言。

在开始任何设计工作之前，先声明需要哪些字体及其加载方式（参见 references/platform-mapping.md）。切勿假设字体已提前可用。

1. 设计理念

校验和粗野主义。这个系统来自终端、协议规范和审计日志，而不是市场页的柔性 SaaS 语言。界面几乎完全由单色结构支撑：黑白表面、1px hairline、双等宽字体。荧光绿只表示“可验证为真”的状态，橙红只表示“不可逆失败”或风险升级。主要张力是命令行式的冷静克制，撞上实时网络遥测的高频变化。

设计血统：终端提示符、UNIX man page、协议草案页边注、基础设施状态面板、工程图纸上的黑线与编号系统。

2. 制作规范 — 如何构建

视觉层次层

排版纪律

• 只允许双等宽体系。 展示和数据用 JetBrains Mono，正文和 UI 说明用 IBM Plex Mono。不引入 sans、serif、rounded。
• 数字永远对齐。 KPI、轴刻度、表格数值列、百分比、延迟、时间戳全部使用 JetBrains Mono。
• 标签必须像命令。 过滤器、标签、按钮、轴标题、图例项默认大写，letter-spacing: 0.08em。
• 正文不追求亲和。 用词要短，句子要直，说明文本不超过两行。

间距语义

• 8px 网格是主时钟。 所有模块以 8 的倍数推进，2px 只用于边界微调。
• 密度偏紧。 仪表板默认使用 compact，卡片 padding 24px，列表行高 40px 到 44px。
• 留白服务扫描，不服务装饰。 大间距只给模块切换、长图表、错误状态。

颜色策略

• 每屏最多两种强彩色。 绿色是“verified”，橙红是“fault”。其他一切先用黑、白、灰解决。
• 不要把 accent 当品牌涂层。 绿色不能用来给整卡上色、给大片背景染色、给所有按钮统一着色。
• 图表先单色，再彩色。 单序列图优先使用 sequential green；只有出现真实分类对比时才启用 categorical palette。

构图方法

• 边框定义深度。 禁止阴影，禁止模糊发光。层级只来自背景阶差和 1px 线框。
• 图表像仪器面板。 轴线清晰、网格可见、标记方正、转场短促。
• 眯眼测试。 眯眼时你应先看到数值和状态，第二眼看到线框结构，最后才看到说明文字。

数据可视化工艺

• 轴线可见。 不隐藏 x/y 轴，不用极淡幽灵线。
• 网格线为结构层。 solid，opacity: 0.18，与页面的 hairline 逻辑一致。
• 转场像刷新，不像表演。 新数据进入 180ms，更新 120ms，退出 100ms，全部 linear。
• 工具提示像调试浮层。 直角、线框、等宽数字、固定侧边停靠优先于悬浮泡泡感。

3. 反模式 — 绝对不要做的事

1. No rounded cards. 卡片、图表容器、输入框、工具提示统一 border-radius: 0。
2. No drop shadows. 任何阴影都会冲淡协议工具的审计感。
3. No full-bleed green surfaces. 绿色只作为验证信号，不作为大面积表面色。
4. No soft gradients behind charts. 除顺序色标演示条外，禁止装饰性渐变。
5. No proportional numerals. 只要是数字，就是 JetBrains Mono。
6. No lowercase control labels. 标签像命令，不能像营销语气。
7. No muted borders. 结构线必须真实可见，不能退成几乎看不见的浅灰。
8. No pill chips or capsule buttons. 这个系统没有温和圆角。
9. No glassmorphism, blur, frosted panels. 协议 UI 需要可读，不需要空气感。
10. No long easing curves. 禁止 300ms 以上的弹性或缓入缓出。
11. No decorative empty states. 空状态只用排版、图标和一条动作命令。
12. No color-coding without legend or label. 彩色必须附带文字语义，不能让用户猜。

4. 工作流程

1. 声明字体 — 查阅 references/platform-mapping.md 的 Google Fonts 引入
2. 设置令牌 — 应用 references/tokens.md 中的颜色、排版、间距、图表色板
3. 构建组件 — 先用 references/components.md 的线框化组件规格
4. 先做灰阶验证 — 去掉 accent 后界面仍应成立
5. 再加状态色 — 只给 verified / warning / error 节点着色
6. 验证数据可读性 — 轴标签最小 10px，工具提示对比度足够，图例色块至少 10px
7. 验证双模式 — 亮色和暗色都必须像被设计过，而非简单反相
8. 平台适配 — 查阅 references/platform-mapping.md

5. 参考文件