mechanik

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

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

1. 设计理念

机械温度。源自打字机和工程蓝图的等宽优先设计系统。奶油色画布上的橄榄绿与洋红双强调色创造视觉张力。可见网格线是结构元素，而非脚手架。深度仅来自边框——从不来自阴影。圆角柔化了机械精度。每个数字用等宽字体，每个标签用大写。电机械的严谨与有机温暖之间的张力，是这个系统的核心冲突。

设计血统：打字机时代（GT Mechanik 字体）、工程蓝图（可见网格线）、瑞士编辑设计（严格网格、大写排版）、日本工业标签（功能先于装饰）。

2. 制作规范 — 如何构建

视觉层次层

排版纪律

• 每屏字体预算：3 种字体。 Space Mono（展示/标题）、Inter（正文）、JetBrains Mono（数据/代码）。不引入第四种。
• 等宽字体用于所有数字。 KPI、轴刻度、时间戳、百分比、ID 字符串——全部使用 JetBrains Mono。这是不可协商的。
• 标签永远大写。 轴标签、筛选器标签、状态标签、按钮文字——全部 text-transform: uppercase + letter-spacing: 0.05em。
• 标题不使用大写。 展示和标题使用正常大小写，字间距微负（-0.02em 到 -0.03em）。

间距语义

• 8px 基础网格。 所有间距是 8 的倍数或其细分（2、4、8、16、24、32…）。
• 网格线是设计元素。 图表网格线使用 --border 颜色，solid 样式，0.25 不透明度。它们不是要隐藏的东西。
• 内容留白慷慨。 卡片内边距 --space-lg（24px）。章节间距 --space-xl（32px）或更多。

颜色策略

• 每屏最多 2 种彩色。 橄榄绿（--accent）+ 洋红（分类色板第二色）是默认组合。酸黄（#E8F80D）仅用于选中/高亮状态。
• 中性色承载信息层次。 四级文本灰度（text1–text4）完成 80% 的视觉区分。强调色是信号，不是装饰。
• 边框即深度。 1px --border 边框区分表面层级。激活状态使用 --border-visible（橄榄绿）。

构图方法

• 网格先行。 布局从 12 列网格开始。KPI 卡片 3 列，标准图表 6 列，全宽图表 12 列。
• 圆角柔化边界。 卡片 16px，按钮 8px，模态框 24px。尖锐边缘仅用于数据单元格和表格行。
• 眯眼测试。 眯眼看屏幕：KPI 数字应最突出，标签应消失，网格应均匀退入背景。

数据可视化工艺

• 轴线细而实。 1px 实线，--border 颜色。不要隐藏轴线——它们是结构的一部分。
• 网格线可见。 solid 样式，0.25 不透明度。这是打字机网格的精神。
• 柱形圆角 2px。 仅微圆角——保持机械感，避免尖锐感。
• 工具提示用等宽字体。 数值永远用 JetBrains Mono 显示。

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

1. No box-shadow. 阴影被禁止。深度来自边框 + 背景变化。如果某物需要浮动，使用 1px --border 边框。
2. No gradient fills on data elements. 柱形、面积、饼图扇区使用纯色填充。渐变仅用于顺序色阶的图例渐变条。
3. No rounded corners > 24px on data containers. 图表容器 16px，模态框 24px。更大的圆角破坏机械精度。
4. No lowercase labels. 轴标签、筛选器、状态标签、按钮文字——全部大写。正文和标题除外。
5. No proportional fonts for numbers. KPI、轴刻度、工具提示数值、百分比——全部等宽。比例字体用于数字是类型犯罪。
6. No hidden grid lines. 网格线是设计语言的一部分。grid_line: solid，grid_opacity: 0.25。不要设为 none。
7. No more than 2 accent colors per screen. 橄榄绿 + 洋红是默认。酸黄仅用于选中状态。不要引入第四种彩色。
8. No pill-shaped data elements. 数据柱形、进度条、图例色块——最大 border-radius: 4px。Pill 形状（999px）仅用于按钮和标签。
9. No decorative illustrations in data views. 空状态用排版和图标，不要插画。机械系统不需要装饰画。
10. No skeleton loading with rounded shimmer bars. 加载状态用 1px 边框占位框 + 脉冲边框动画，不要圆角灰色条。
11. No drop shadows on tooltips. 工具提示使用 1px 实线边框 + 不透明背景。不要模糊阴影。
12. No animated data transitions longer than 250ms. 机械动效是快速的。数据入场 250ms，更新 150ms，退出 100ms。不要缓慢的弹性动画。

4. 工作流程

1. 声明字体 — 查阅 references/platform-mapping.md 了解加载说明
2. 设置令牌 — 应用 references/tokens.md 中的变量
3. 构建组件 — 使用 references/components.md 中的规格
4. 检查层次 — 眯眼测试：KPI 数字最突出？标签退入？网格均匀？
5. 验证双模式 — 亮色和暗色都必须感觉是经过刻意设计的，而非自动推导的
6. 测试极端情况 — 长文本、空状态、单个条目、100 个条目
7. 验证等宽 — 所有数字是否用 JetBrains Mono？所有标签是否大写？
8. 平台适配 — 查阅 references/platform-mapping.md 了解输出规范

5. 参考文件