brutal

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

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

1. 设计理念

海报化运营。这个系统把创意 agency 的外向气质压进可审计的 dashboard 结构里。纯红、纯蓝、信号黄像丝网印刷油墨一样出现，纯黑边框像裁切线一样把一切锁回秩序。没有柔化，没有氛围模糊，没有“高级灰”缓冲层。

设计血统来自 neo-brutalism 海报、街头指示牌、编辑式 campaign board 和印刷车间的套准标记。主要张力是：色彩想大声说话，但网格、粗边框和硬阴影要求每个信息块对自己的存在负责。

2. 制作规范 — 如何构建

视觉层次层

排版纪律

• 每屏只准 3 个字体角色。 Syne 负责标题冲击，Manrope 负责正文和界面，Space Mono 只给代码与规格值。
• 数字默认不用等宽。 这个系统的数值应该像 campaign headline 一样有冲击力，因此 KPI、轴标签和表格数字沿用 Manrope；只有代码、文件名和 token 名称使用 Space Mono。
• 操作性文字全部大写。 按钮、标签、导航、图例标题统一 uppercase + 0.05em 字间距。
• 标题永远不加阴影。 冲击来自字重与断行，不来自装饰效果。

间距语义

• 8px 基础网格。 但视觉主节奏用 24 / 32 / 48px，避免小家子气。
• 卡片内边距优先 24px。 只有极窄容器才退到 16px。
• 边框先于留白定义分组。 在 brutal 体系里，边界比空气更重要。

颜色策略

• 一屏最多 3 个高饱和颜色。 红、蓝、黄是主角；绿和橙只在图表分类或状态提示里出现。
• 红是信号，不是背景噪声。 用于当前激活、差值告警、强调标题。
• 黄是操作块。 主 CTA、关键过滤器、阶段贴纸使用黄底黑字。
• 蓝是对位色。 用在第二系列、次级高亮、补充标签。

构图方法

• 每个面板都必须像一张可裁切的纸。 3px 外边框 + 硬阴影或无阴影，零圆角。
• 先排板，再排图。 先决定 panel 网格，再把图表塞进 panel，不能反过来。
• 眯眼测试。 眯眼后，你仍然应该分得清“哪个是 CTA、哪个是 KPI、哪个是普通正文”。

数据可视化工艺

• 轴线必须可见。 使用实线，不能隐身。
• 网格线必须服从边框系统。 用结构线语言，而不是轻柔灰雾。
• 柱形和标记全部直角。 没有胶囊柱，没有圆点情绪化。
• 工具提示像票据。 3px 边框、固定块面、无透明玻璃感。

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

1. No rounded corners. 卡片、按钮、输入框、tooltip、modal 都不允许出现 8px、12px、999px 一类圆角。
2. No blur shadows. 只允许硬阴影偏移，不允许高斯模糊阴影、ambient shadow、glow。
3. No glassmorphism. 半透明卡片、毛玻璃、背景模糊会立即破坏这个系统。
4. No pastel palette. 任何降低为奶油粉、雾霾蓝、浅紫雾的处理都不属于 Brutal。
5. No lowercase control text. 标签、导航、按钮和图例标题不能小写。
6. No border lighter than 2px on structural containers. 主容器和按钮必须是 3px 结构边框，1px 只留给图内网格或分隔线。
7. No more than three signal colors on a single screen. 红蓝黄已经够吵，再加第四种会让信息失控。
8. No gradient data fills. 图表几何使用纯色；渐变只允许出现在颜色比例尺示意条。
9. No spring animation. 交互必须是 snap，不是 bounce。
10. No soft rounded outline icons. 图标必须是锐利几何的，不能是温柔 SaaS 风。
11. No quiet KPI cards. KPI 不能只是一块白板和小数字；至少要有色块、标签或粗边线承担层级。
12. No toast confetti. 成功反馈用标签、内联状态或硬边提示条，不做飘浮式庆祝。

4. 工作流程

1. 声明字体 — 查阅 references/platform-mapping.md 了解 Google Fonts 与图标字体加载方式
2. 设置令牌 — 先应用 references/tokens.md 中的 light/dark 变量，再决定哪些 supporting colors 上屏
3. 排板成块 — 先画 panel 边界，再放图表、按钮和表格
4. 给操作贴色 — 重要交互块优先用信号黄，状态/当前项优先用红
5. 检查结构线 — 面板、工具提示、输入框、表格都必须共享同一套边框语言
6. 验证暗色模式 — 黑底白边不是自动反相；确保红蓝黄依然足够锐利
7. 测试极端内容 — 很长标题、很多分类、空状态、大量表格行都不能丢掉 brutal 性格
8. 平台适配 — Web、SwiftUI、Tailwind 都查 references/platform-mapping.md

5. 参考文件