Halcyon

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

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

1. 设计理念

Quiet motion。冷石墨画布承载体积化钴蓝玻璃，排版克制，信号稀少，所有戏剧性都留给空间和材质。Halcyon 的界面不是为了“看起来很忙”，而是为了让复杂因果链在一种近乎安静的氛围中被看清。

设计血统来自三条线：科幻仪器玻璃、代码审查工作台，以及带有冷光晕的工业可视化界面。主要张力是“空间感很强，但文字很平静”；“材质有存在感，但交互本身从不吵闹”。

2. 制作规范 — 如何构建

视觉层次层

排版纪律

• 展示字只做两件事：结论与章节。 Manrope 只用于标题、KPI 和图表卡片标题，不进入正文。
• 正文永远用 Inter。 任何解释性文案、段落、说明、空状态描述都交给 Inter 400。
• 所有数字走等宽。 KPI、坐标轴、表格数值列、trace ID、时间戳全部使用 JetBrains Mono。
• 不要让颜色替代层级。 标题和正文的差异靠字号、字重和留白，而不是“标题染成蓝色”。

材质规则

• 材质只给容器，不给内容。 玻璃感存在于面板、浮层、顶部条，不存在于按钮文本、标签字或数据标记本身。
• 背景有体积，前景必须清楚。 任何置于玻璃层上的正文都需要更深的 scrim 或更高的不透明度。
• 模糊只用在一级容器。 卡片内部的子项、表格行、图例色块不再叠加 blur。

颜色策略

• 蓝色是信号色，不是地毯。 交互、选中、焦点和关键数据系列才使用 --accent。
• 同一屏最多两种高饱和色。 默认是钴蓝 + teal；红和 amber 只在语义状态或偏离数据时出现。
• 图表比营销更克制。 即便背景有氛围，图表本身仍然使用清晰、可区分的实色和淡渐变。

构图方法

• 大容器圆角 20px，子卡片 12px。 结构级别靠圆角层次区分：外层更柔，内层更紧。
• Explorer 布局优先左右分工。 左侧筛选，中央主视图，右侧 trace/detail。不要把所有东西堆成普通 dashboard。
• 标题先于过滤器。 工具条里先给页面上下文，再给筛选控件。

数据可视化工艺

• 网格线要看得见，但只能轻声说话。 使用 dashed + 低透明度；它们是空间标尺，不是装饰。
• 线条圆端，标记柔和。 折线端点和 marker 全部使用圆端，保持“quiet motion”。
• tooltip 必须是实用工具。 标题、系列名、值、时间四项齐全；数值总是等宽。

快速验证

• 眯眼测试。 眯眼看屏幕时，应该先看到结论卡和当前 trace，再看到图表轮廓，最后才是气氛背景。
• 去色测试。 把页面想象成灰度后，仍然能分辨层级、选中状态和图表主次。

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

1. No pure black backgrounds. 背景必须是冷石墨蓝黑，不要用 #000000。
2. No neon-everywhere. 不要让所有按钮、图表线和标签都发蓝光。
3. No opaque slabs for primary panels. 一级面板必须保留一定透气感，不要做成完全实心卡片。
4. No hard 90-degree corners. Halcyon 没有硬切角；最小也要 4px。
5. No proportional numerals in data views. 指标、轴标签、时间、ID 禁止使用比例数字。
6. No more than two saturated accents per screen. 钴蓝和 teal 足够；第三种鲜色只能是语义告警。
7. No thick borders. 常规边框始终 1px；靠层次和透明度区分，而不是靠粗线。
8. No shadow stacks without blur logic. 阴影若存在，必须与玻璃材质和光感有关；禁止普通 SaaS 阴影。
9. No pill bars in charts. 数据柱形和进度条不做 999px 胶囊，最大 6px 圆角。
10. No crowded top toolbars. 工具条不能塞满十几个按钮；筛选必须分组。
11. No decorative empty states. 空状态只用排版、图标和一句清晰解释，不用插画。
12. No playful spring motion. Halcyon 的运动是顺滑、克制、无弹跳的。

4. 工作流程

1. 声明字体 — 查阅 references/platform-mapping.md，先说明 Manrope、Inter、JetBrains Mono 如何加载。
2. 设置令牌 — 先应用 references/tokens.md 中的颜色、字号、间距、圆角、海拔和动效。
3. 建立三段布局 — 左筛选 / 中主图 / 右细节；除非明确是 narrative 页面，不要退回常规 dashboard。
4. 构建容器 — 先画一级玻璃面板，再放二级图表卡和数据表。
5. 放置数据 — 用 references/components.md 中的图表容器、轴标签、图例、tooltip 和数据表规格。
6. 验证数字排版 — 所有数值、时间、trace ID 是否都使用等宽字体。
7. 验证对比度 — 玻璃层上的正文、tooltip 中的数值、图例标签都必须保持清晰。
8. 验证双模式 — 亮色模式应保留同样的冷静和材质感，而不是机械反色。

5. 参考文件