kiln-viz-design

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

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

---

1. 设计理念

窑铸工业风。赤陶强调色作为热源信号，暖棕深色画布承载毛衬线标题与锐利几何组件。粗野边框被窑火辉光软化——临床数据精度与材料温度之间的张力创造视觉节奏。Fraunces 可变衬线体以 SOFT 50 柔化标题棱角，Inter 无衬线体承载正文，JetBrains Mono 等宽字体锚定数据精度。减法，而非加法——每个像素都在服役。

设计血统：Dieter Rams 的减法原则 + 陶艺工作室的材料诚实 + 工业仪表盘的功能密度。主要张力：温暖材料感与冷数据精度之间的平衡——画布是黏土，数据是火焰。

---

2. 制作规范 — 如何构建

视觉层次层

排版纪律

每屏字体预算：3 种字体，不超过 4 种字重。

Fraunces 必须启用 font-variation-settings: "opsz" 144, "SOFT" 50。 这是 Kiln 的签名字体处理——SOFT 50 给衬线体注入材料温度，不让标题过于刚硬。

等宽字体用于数据： 轴刻度标签、KPI 数值、时间戳、百分比、ID 字符串一律使用 JetBrains Mono。定价数字（$20）使用 Fraunces 展示字体。

间距语义

8px 基准网格。所有间距值为 8 的倍数或 8 的一半。

颜色策略

• 强调色是信号，不是装饰。 赤陶色 #E0572A 仅用于交互元素（按钮、链接、活跃指示器）和热源信号（当前温度、告警峰值）。大面积使用强调色 = 失去信号能力。
• 次强调色 #C9A36D 用于辅助标注——锥体标记、峰值指示、分类标签。不与主强调色争抢注意力。
• 中性色永远是暖棕。 从 #F0E4D1（暖羊皮纸）到 #1C1410（深陶土），所有灰色都带赤陶底调。冷灰 = 不属于这个系统。
• 每屏最多 2 种彩色。 中性画布让每个颜色的到来都感觉特别。
• 状态色遵循语义： 绿色（#5A7860）= 目标达成/安全区间；琥珀色（#E5A73B）= 接近阈值/警告；红色（#E5484D）= 超限/危险。

构图方法

• 1px hairline 边框承担深度。 不用渐变边框，不用双线，不用粗于 1px 的分割线。深度来自边框 + 背景层级变化 + 辉光。
• 卡片必须有边框。 无边框的卡片在这个系统中是未完成的——1px --border 实线是最低要求。
• 窑火辉光作为背景处理。 英雄区和 CTA 区使用径向渐变（从强调色到透明）模拟窑内火光，不是装饰——是空间定义。
• 毛玻璃头部。 固定导航使用 backdrop-filter: blur(12px) + 半透明背景，让内容在滚动时穿透。
• 眯眼测试： 眯眼看屏幕，你应该只看到暖棕画布上的赤陶色信号点。如果看到多个色块抢注意力，减少强调色使用。

数据可视化工艺

• 温度曲线是核心图表。 面积图带渐变填充（fill: url(#heat-grad)，从强调色 70% 不透明度到 0%），虚线网格，2px 数据线。
• 锥体标记用次强调色。 虚线（stroke-dasharray: 3 4），#C9A36D 色，60% 不透明度。
• 轴标签用等宽字体。 9-10px JetBrains Mono，--text3 色，大写可选。
• 网格线是虚线。 stroke-dasharray: 4,4，50% 不透明度的边框色。实线网格 = 太重。
• 数据点标记极简。 圆点 r=2.5-3，仅填充强调色，无描边。悬停时放大 + 辉光。

---

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

1. No border-radius > 4px。 Kiln 是锐利的，不是圆润的。按钮 2px，卡片 4px，超过这个值就失去了工业感。
2. No 冷色调灰色。 所有中性色必须是暖棕色。#808080、#C0C0C0、hsl(0, 0%, 50%) 都不属于这个系统。
3. No 纯白 #FFFFFF 背景。 浅色模式用暖陶土色 #E8D8C0，不是白色。纯白在这个系统中是刺眼的。
4. No 纯黑 #000000。 最深色是 #1C1410，永远带暖色调。纯黑是数字原生的，Kiln 是材料原生的。
5. No 无辉光的强调色悬停。 主要按钮悬停必须发出窑火辉光（box-shadow: 0 0 40px -8px var(--accent)），不是简单变暗。
6. No 渐变填充数据元素。 数据柱、数据点用纯色或透明度，不用渐变。渐变保留给面积图下方和背景辉光。
7. No 无边框的卡片。 每个卡片必须有 1px 实线边框。无边框 = 未完成。
8. No 圆形端点图标。 图标端点可以是锐利或微圆角的，但不是完全圆形的。
9. No 粗于 1px 的分割线。 所有分割线都是 1px hairline。粗线 = 噪音。
10. No 等宽字体用于标题。 Fraunces 衬线体独占标题，等宽只用于数据。标题用等宽 = 丢失材料温度。
11. No 大面积彩色背景。 强调色只用于小面积交互元素和信号标记。整块彩色背景 = 视觉过载。
12. No 不带 SOFT 50 的 Fraunces。 Fraunces 不启用 variation settings = 刚硬的衬线体，不是 Kiln 的毛衬线。

---

4. 工作流程

1. 声明字体 — 查阅 references/platform-mapping.md 了解加载说明。Fraunces 必须加载 opsz 9..144, wght 500..700 轴；Inter 加载 400, 500；JetBrains Mono 加载 500。
2. 设置令牌 — 应用 references/tokens.md 中的变量。先设 :root 暗色模式，再设 [data-theme="light"] 浅色模式。
3. 构建组件 — 使用 references/components.md 中的规格。注意：Kiln 的组件是锐利的（2-4px 圆角）和有边框的（1px 实线）。
4. 检查层级 — 眯眼测试：能否一眼看出赤陶色信号点？如果看到多个色块抢注意力，减少强调色使用。
5. 验证双模式 — 暗色模式是主模式，必须感觉刻意设计。浅色模式用暖陶土色（不是白色），同样必须感觉是刻意选择的。
6. 测试极端情况 — 长文本、空数据状态、单个数据点、100+ 行数据表格。
7. 平台适配 — 查阅 references/platform-mapping.md 了解输出规范。

---

5. 参考文件