Ledger

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

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

1. 设计理念

Printed markets。Ledger 不是科技产品的默认 dashboard 皮肤，而是一份能被机器消费、也能被人类细读的晨报。暖纸色画布承接长篇阅读，黑色硬规则负责结构，信号红只在真正需要强调时出现。层级来自报纸版式，而不是卡片阴影。

设计血统是金融报纸、档案馆、wire service 和排版时代的 broadsheet。Display serif 提供权威感，正文 serif 提供长阅读耐性，UI sans 只承担时间戳、栏目名和操作元数据。主要张力是“编辑权威”对“机器精度”: 视觉上像被印出来，交互上却像可查询、可导出、可追溯的市场文档。

2. 制作规范 — 如何构建

视觉层次层

排版纪律

• 每屏最多 3 个字体角色。 Playfair Display 只用于标题；PT Serif 只用于正文与长读；Inter 只用于 UI 标签、时间戳、表头、按钮。
• 标题不靠颜色建立层次。 标题永远用 --text1，通过字号、字重、规则线和留白建立权威感。
• 正文宽度必须克制。 叙事段落宽度控制在 34 到 42 个中文字符或等效英文 measure 内。
• 数字不用等宽，但必须启用表格数字。 font-variant-numeric: tabular-nums lining-nums 适用于 tape、价格、轴标签、脚注索引。

间距语义

• 4px / 8px： 细节对齐、icon 与标签、脚注号与正文。
• 16px / 24px： 正文与图表的标准节距，卡片内边距，分组呼吸空间。
• 32px / 64px： 章节断点与叙事停顿。Narrative 页面依靠这些留白完成节奏，不靠背景色块堆砌。

颜色策略

• 默认是单色页面。 暖纸、黑字、深灰元数据构成 90% 的画面。
• 红色是信号，不是品牌糖浆。 一屏内红色出现超过 3 处时，说明你在滥用强调。
• 状态色只在数据语义中出现。 绿用于上行/正向，琥珀用于观察，红用于风险与 CTA。不要把状态色当装饰色。
• 图表先考虑黑白可读，再上色。 即使去掉分类色板，结构仍要成立。

构图方法

• 先做版面，再放组件。 像排一份报纸，而不是往 12 栏 dashboard 网格里塞卡片。
• 规则线先于容器。 如果一段内容可以靠一条线与留白分隔，就不要先画一个盒子。
• 章节需要栏目感。 使用 kicker、双横线、pull quote、边注和 byline strip 建立节奏。
• 图表像文中插图，而不是 SaaS 卡片。 标题、来源、脚注与图例要成为一个统一单元。

图表语气

• 轴线可见，网格细而克制。 像报纸上印出来的测量线，不像后台系统的辅助线。
• 标注优先。 少量直接标注优于把读者赶去图例。
• tooltip 是旁注。 它应像边栏脚注，而不是黑色浮层气泡。

快速验证

退后一臂距离眯眼看屏幕：

1. 你应该先看到标题、再看到规则线、最后才看到交互按钮。
2. 红色只能像编辑笔一样偶尔出现，而不是铺满页面。
3. 去掉阴影后，页面层级仍必须清楚。因为这个系统本来就不依赖阴影。

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

1. No 大圆角卡片。 所有主要容器默认 0px 圆角。最多允许 2px 用于 tooltip 或微型控件。
2. No 渐变背景。 暖纸底必须是平的。质感来自色温和细纹，不来自多色渐变。
3. No 彩色标题。 大标题只用 --text1。彩色标题会把编辑权威感变成营销页面。
4. No 阴影层级。 深度来自规则线、背景差和留白。禁止 box-shadow 做产品感。
5. No pill 按钮海。 pill 形只允许用在小筛选标签，不允许作为主容器或大按钮风格。
6. No 玻璃拟态、模糊面板。 这套语言属于新闻印刷，不属于未来操作系统。
7. No 五颜六色的数据系列。 分类色最多 6 个，而且必须偏低饱和、可打印。
8. No 默认 dashboard 侧边栏。 Narrative 视图里不要硬塞左侧导航树。
9. No 密集图标行。 这个系统由排版驱动，图标只用于动作和少量语义提示。
10. No 把 tooltip 做成黑底科技弹层。 tooltip 应该像页边注释卡，浅底、细边、可引用。
11. No 英文 all caps 正文段落。 全大写只保留给 kicker、表头、按钮和时间标签。
12. No 过度动画。 页面切换、hover、数据更新都应该短、平滑、克制。没有弹簧，没有炫技入场。

4. 工作流程

1. 声明字体 — 查阅 references/platform-mapping.md 了解加载说明
2. 设置令牌 — 应用 references/tokens.md 中的颜色、字体、间距、动效
3. 先排版面 — 先决定报纸式节奏、栏目、图文关系，再布置交互元素
4. 构建组件 — 使用 references/components.md 的按钮、tape、chart container、tooltip、archive 列表规格
5. 检查信号克制 — 红色是否只出现在必要位置？是否任何一处都能说清其语义？
6. 验证双模式 — 亮色像新闻纸，暗色像夜班 desk 终端，但两者都必须保留 Ledger 气质
7. 测试极端情况 — 长标题、长脚注、单数据点、无数据档案、风险告警
8. 平台适配 — 查阅 references/platform-mapping.md 输出 CSS 变量、SwiftUI 与 Tailwind 映射

5. 参考文件