meadow-viz-design

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

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

1. 设计理念

温暖编辑叙事。Lora 衬线赋予文学质感，珊瑚橙是唯一饱和色——像书签别在阳光下。画意有机背景与极致留白创造呼吸感，数据被收藏和展示，而非被分析。这是 mymind 的反组织哲学遇上杂志编辑的排版精度：每个数据故事都像一页精心编排的特稿，而非仪表盘上的一个格子。

核心张力：衬线字体的编辑精确性与画意有机背景的柔软松弛之间的拉扯。Lora 的笔画曲线是理性的，水彩般的表面是感性的——两者共存，让数据既可信又可亲。叙事排版引用杂志版面的不对称构图和奢侈留白，每屏只讲一件事。

设计血统：编辑杂志版面（Vogue、Kinfolk 的编排节奏）、mymind 的反组织哲学（收藏而非分类）、水彩画（画意有机背景、渐变无形边界）。

2. 制作规范 — 如何构建

视觉层次层

排版纪律

• 每屏字体预算：3 种字体。 Lora（展示/标题/数据故事）、Inter（正文/UI 铬金）、JetBrains Mono（数据/代码）。不引入第四种。
• 衬线统领一切标题。 叙事标题、章节名、数据故事标题——全部 Lora。它赋予文学编辑质感，是整个系统的灵魂字体。无衬线仅用于 UI 铬金：按钮、输入框、导航。
• 等宽字体用于所有数值。 KPI、轴刻度、时间戳、百分比——全部 JetBrains Mono。数字的等宽对齐是数据可信度的基石。
• 元数据标签大写追踪。 轴标签、来源标注、分类标记——text-transform: uppercase + letter-spacing: 0.08em。小写标签在编辑排版中是失礼的。

间距语义

• 8px 基础网格。 所有间距是 8 的倍数或其细分（2、4、8、12、16、20、24、32…）。
• 留白是最重要的设计元素。 卡片内边距 --space-lg（24px），章节间距 --space-4xl（96px）。叙事节奏需要呼吸——间距不是浪费，是留白。
• 宽松密度。 density: spacious。元素之间的最小间距是 16px。紧凑是仪表盘的做法，Meadow 是杂志。

颜色策略

• 每屏最多 2 种彩色。 珊瑚橙（--accent）是唯一饱和色，用于信号级数据和交互元素。其余全部用中性色完成信息层次。中性色承载 80% 的视觉区分——四级文本灰度完成叙事节奏。
• 强调色是书签，不是装饰。 珊瑚橙像书签别在页面上——只标记最重要的信息。标题用 --text1，正文用 --text2，标签用 --text3。强调色出现在不超过 3 个元素上。
• 图表色板按序取色。 从 categorical palette 中顺序取用，不跳选。超过 6 类时合并为"其他"。

构图方法

• 编辑网格，不对称布局。 叙事内容不求对称——左重右轻、上图下文的杂志编排节奏。12 列网格是底层的秩序，但视觉结果是不对称的。
• 圆角传递柔软。 卡片 16px，容器 30px，按钮 30px，元素 6px——最小圆角 6px，没有尖锐边角。尖锐边角与 Meadow 的温暖编辑调性矛盾。
• 眯眼测试。 退后一臂距离眯眼看屏幕：叙事标题应最突出（Lora 大号 + 珊瑚橙），标签应退入背景，画意底纹应若隐若现。

数据可视化工艺

• 等宽字体用于所有数字。 KPI、轴刻度、工具提示数值——全部 JetBrains Mono。比例字体用于数字在 Meadow 中是不可接受的。
• 稀疏标签。 label_density: sparse。轴标签只标注关键刻度，不填满每个刻度。数据故事不需要刻度尺精度。
• 渐变填充。 fill_style: gradient，fill_opacity: 0.6。面积图底部渐变至透明，柱形底部渐变至表面色——纯色填充是僵硬的，渐变是画意的。
• 轴线消失，网格虚线。 axis_line: none，grid_line: dashed，grid_opacity: 0.12。轴线是仪表盘的语言，Meadow 用虚线网格暗示结构。

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

1. No 圆角小于 6px。 最小圆角 6px。尖锐边角（0px/2px/4px）与 Meadow 温暖柔软的调性矛盾。数据容器、卡片、按钮——全部 6px 起步。
2. No 每屏超过 1 种饱和色。 珊瑚橙是唯一的饱和色。第二色相可以从分类色板取用，但饱和度必须克制。三种饱和色同屏是配色灾难。
3. No 密集数据网格。 表格斑马纹、密集行列、紧凑信息密度——这些是仪表盘的做法。Meadow 是叙事，每屏讲一个故事。数据表格最多展示 5 行，更多时分页或折叠。
4. No 小写标签。 轴标签、来源标注、分类标记、元数据——全部大写 + 字间距追踪。小写元数据标签在编辑排版中是不专业的。
5. No 比例字体用于数字。 KPI、轴刻度、百分比、工具提示数值——全部等宽。比例字体的数字宽度不一致，破坏数据对齐，在编辑语境中是对读者的不尊重。
6. No 可见轴线。 axis_line: none。轴线是分析工具的视觉噪音，Meadow 用虚线低透明度网格替代。如果必须暗示方向，用渐变淡出的边缘。
7. No 纯色填充图表区域。 面积图、柱形图——全部渐变填充（fill_style: gradient）。纯色填充是僵硬的，渐变是画意的、呼吸的。
8. No 小元素上的阴影。 按钮、标签、输入框、数据点——不加阴影。阴影仅用于卡片和容器级别（shadow_y: 8px, shadow_blur: 32px），小元素上的阴影是廉价的深度假象。
9. No 商业库存照片。 画意背景用渐变和模糊色块营造，不用 Unsplash 占位图。Meadow 的温度来自排版和色彩，不是来自装饰图片。
10. No 药丸形数据条。 数据柱形、进度条、图例色块——border-radius 不超过 4px（corner_radius: 4）。Pill 形状（999px）仅用于按钮和标签。
11. No toast 通知。 叙事应用不需要弹窗打断阅读。状态反馈用内联消息或微妙的颜色变化。Toast 是工具类应用的做法。
12. No 尖角骨架屏。 加载占位符的圆角必须 ≥ 6px，与系统圆角一致。圆角灰色条搭配尖角骨架块是视觉矛盾。

4. 工作流程

1. 声明字体 — 查阅 references/platform-mapping.md 了解加载说明
2. 设置令牌 — 应用 references/tokens.md 中的变量
3. 构建组件 — 使用 references/components.md 中的规格
4. 检查层级 — 眯眼测试：能否一眼看出最重要的内容？
5. 验证双模式 — 亮色和暗色都必须感觉是经过刻意设计的，而非自动推导的
6. 测试极端情况 — 长文本、空状态、单个条目、100 个条目
7. 平台适配 — 查阅 references/platform-mapping.md 了解输出规范

5. 参考文件