构建高密度数据看板/管理后台时…

适用于仪表盘、管理面板、数据分析、Bloomberg/Retool 风格的数据密集型内部工具的设计与打磨。

适用场景

解决思路

1. 锁定三个风格旋钮：CRAFT_LEVEL=7（精致但不矫饰，运维优先速度）、MOTION_INTENSITY=3（仅微动效）、VISUAL_DENSITY=9（紧凑 4/8px 网格）；Discovery 阶段不再重新询问这些，只确认品牌强调色与深/浅色偏好。
2. 字体搭配：UI 用 IBM Plex Sans 或 Inter（400/500）；等宽字体用 IBM Plex Mono 或 Geist Mono，用于所有 ID、哈希、时间戳、代码、版本号、kbd。
3. 字号：正文默认 13-14px，密集表格可用 12px；标题紧凑，页面标题 18-20px，区块标题 14-15px/500。
4. 所有数字列、指标卡、时间戳、时长使用 tabular-nums；ID 与代码使用 font-variant-numeric: tabular-nums slashed-zero。
5. 必须使用语义色板：success oklch(60% 0.12 150)、warning oklch(72% 0.13 75)、danger oklch(58% 0.15 25)、info oklch(62% 0.12 240)，外加一个品牌强调色；色相保持低饱和（lightness 50-60，chroma ≤ 0.15），避免高饱和色。
6. 状态点、徽章文字、chip 文字使用语义色，背景保持中性。
7. 间距严格用 4/8px 刻度：只用 4/8/12/16/24，绝不用 5、7、9、10。
8. 表格单元格默认 px-3 py-2，超密集用 px-2 py-1.5；工具栏行 gap-2、控件 h-9、text-sm。
9. 侧边栏窄（200-240px），用细微背景色调，图标+标签，绝不用全深色。
10. 卡片 p-4、8px 圆角，用 1px 边框而非阴影。
11. 每个数字列右对齐并加 tabular-nums；每个 ID/哈希/commit/时间戳用等宽字体。
12. 行内嵌入 sparkline 提供趋势上下文，高 24-40px、单色；分类图用水平条，时间序列用面积图（15% → 0% 渐变），绝不用饼图或 3D 图。
13. 变化量用纯文本 +12.5% 配语义色，不用胶囊标签。
14. 空状态给一行提示 + 创建用的键盘快捷键。
15. 面包屑 + 标签页 + 子工具栏同时出现是预期且可接受的；筛选 chip 用描边样式、可移除 ×、不用填充胶囊。
16. 全局命令面板：在头部搜索入口显示 ⌘K；行操作在悬停时显示内联图标，同时可通过键盘访问。
17. 分页显示文本 Page 3 of 42 并用 tabular-nums，支持 J/K 导航。
18. 动效：行悬停背景切换（浅色 oklch(96% 0.002 250) / 深色 oklch(20% 0.005 250)），80ms；选中行用约 6% 不透明度的品牌强调色 + 2px 强调色左边框；内联保存/确认 150ms 淡入 + 对勾图标切换。
19. 表格区域禁止滚动触发的入场动画或交错动画；排序箭头、筛选展开、列宽调整即时或 <100ms。
20. 先阅读参考文件：dashboard.md（指标卡、图表、侧边栏、表格）、typography.md（tabular-nums、等宽搭配、字号刻度）、motion.md 的 Rendering Performance 部分（合成器管线、图层提升、滚动联动动效）、responsive.md（平板与笔记本断点、工具栏折叠）；跳过 inspiration.md 与 sound.md。
21. 避免本风格的反模式：chrome 或数据区出现衬线字体；数字列用比例数字；高饱和色相；每个变化量都加彩色胶囊；饼图/环形图/3D 图；时间序列用垂直柱状图；指标卡统一彩色顶边；大量留白的卡片网格；全深色侧边栏；表格区滚动触发动画；隐藏键盘快捷键；模糊的加载状态（应显示与列结构匹配的骨架行而非通用 spinner）。

适用边界 · 注意事项

• 面向消费者、营销或编辑类界面（本风格是运维工具风格，编辑风属于其他变体）。
• 需要大量留白、轻盈感或强烈视觉冲击的落地页/展示型页面。
• 无法接受紧凑密度或键盘优先交互的场景。