ecotrack-viz-design

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

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

1. 设计理念

Regenerative stewardship。Fraunces 标题把系统的语气从“监控”拉向“治理”，奶油色背景和森林绿让 ESG 数据更像需要被照料的生态资产，而不是被处罚的合规负担。绿色渐变只在“行动”和“改善”上出现，天空蓝、泥土棕与太阳黄作为环境语义的补色存在，整套界面像一份会实时更新的可持续发展报告。

核心张力：温和可信的报告感，对撞实时运营面板的即时性。视觉上要足够柔和，让用户愿意停留并理解长期趋势；结构上又必须足够清晰，让异常排放、延期项目和供应链风险能被迅速发现。

设计血统：B Corp 年报版式、再生农业包装的有机轮廓、气候科技品牌常见的自然渐变，以及现代 SaaS 仪表板的卡片式运营结构。

2. 制作规范 — 如何构建

视觉层次层

排版纪律

• 每屏字体预算：3 种。 Fraunces 只用于标题与大结论，DM Sans 负责正文与数据界面，IBM Plex Mono 仅保留给时间戳、ID、导出名和规范说明。
• 标题必须带书面感。 页面主标题、图表组标题、空状态标题都用 Fraunces。不要用无衬线标题把整套语言拉回通用 SaaS。
• 数据默认不用等宽。 mono_for_data: false。数值、百分比、吨位、进度都使用 DM Sans，让可持续指标保持人文而非终端化的气质。
• 标签永远大写。 label、筛选器名、图例分组、时间段说明使用 letter-spacing: 0.08em 的大写 DM Sans。

间距语义

• 24px 是核心容器节奏。 KPI 卡、图表卡、表格卡默认内边距 --space-lg（24px）。再紧就失去呼吸感，再松就失去运营界面的效率。
• 8px 网格是底层秩序。 所有 padding 和 gap 都只能从 2/4/8/12/16/24/32/48/64/96 中取值。
• 图表比装饰更重要。 场景插画、叶片轮廓和自然渐变只能占屏幕的一角，绝不能压过真实数据。

颜色策略

• 绿色只代表行动和改善。 主按钮、进行中项目、改善趋势、达标状态使用绿色。不要把绿色当作所有可点击元素的默认底色。
• 一个屏幕只允许一条主渐变。 #228B22 → #4CAF50 的自然渐变只能给当前主 CTA 或关键进度组件，不能同时铺满多个卡片。
• 补色必须服务语义。 sky 用于水与气候，earth 用于高排放或原材料，sun 用于能源与预警。不要把它们当成随机的装饰色。
• 奶油底是系统稳定器。 所有亮色模式页面必须让 --background 和 --surface2 保持可见占比，避免退化成纯白通用后台。

构图方法

• 标准卡片是圆润矩形，特色卡片才允许有机轮廓。 大多数卡片用 20-24px 圆角；60px 20px 的 leaf card 形态每屏最多出现一次。
• 一行只允许一个大决定。 顶栏 CTA、KPI row、图表 row、行动列表 row 各自完成单一任务，不要在一个区域同时塞“解释 + 过滤 + 图表 + CTA”。
• 眯眼测试。 退后一臂距离看屏幕：主结论应是 Fraunces 大标题或绿色进度，不应是彩色装饰块或边角插画。

数据可视化工艺

• 虚线网格、柔和坐标。 grid_line: dashed，grid_opacity: 0.14，轴线只做轻提示，不做粗黑框。
• 图表圆角要软，不要糖果化。 柱形、tooltip、legend 色块统一 8px 以下圆角；pill 只属于按钮和 badge。
• tooltip 像注释卡，而不是黑盒。 使用浅色卡片、深绿文字、轻阴影和 16px 圆角；保持报告式的解释感。
• 分类色板必须像生态系统。 绿色、叶绿、天蓝、日黄、泥土棕和深鼠尾草都应该有实际业务对象，对不上语义就不要上图。

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

1. No 纯白大屏。 --background 必须保留暖奶油色倾向；纯白会直接消掉 EcoTrack 的品牌气质。
2. No 黑色或霓虹深色 dashboard。 这个系统不是安全中心，也不是 crypto 面板。不要切成黑底荧光绿。
3. No 多条绿色渐变同屏。 主渐变一屏一次即可；多个渐变 CTA 会把“行动”稀释成装饰。
4. No 半径小于 12px 的主容器。 输入框、徽章例外；主卡片、图表区、表格区都不能回到 4px/6px 的企业默认值。
5. No 将 Fraunces 用到正文。 衬线只负责标题和结论，正文一律 DM Sans。
6. No 把所有数字都改成等宽字体。 mono_for_data 为 false。等宽只留给时间戳、导出名、技术标识。
7. No 彩色背景 KPI。 KPI 卡必须以 surface1/surface2 为底，颜色只出现在状态线、图标、标签和微型图形里。
8. No 玻璃拟态大面积铺满。 模糊只允许出现在导航和少量悬浮筛选器，不要把整个应用做成 frosted glass。
9. No 红绿对撞作为唯一编码。 当图表区使用红/绿状态时，必须同时给形状、位置或标签补充语义。
10. No 夸张投影。 卡片 hover 阴影不能超过 0 24px 60px rgba(27, 67, 50, 0.16)，否则品牌会从“治理”滑向“营销”。
11. No 图表轴标签小于 11px。 ESG 数据需要被读懂，而不是只被看成纹理。
12. No 一屏多于一个 leaf-shape 特殊卡片。 有机异形是强调手段，不是布局默认值。

4. 工作流程

1. 声明字体 — 查阅 references/platform-mapping.md 了解加载说明
2. 设置令牌 — 应用 references/tokens.md 中的变量
3. 构建组件 — 使用 references/components.md 中的规格
4. 检查层级 — 眯眼测试：能否一眼看出最重要的改善信号和异常项？
5. 验证双模式 — 亮色和暗色都必须感觉像 EcoTrack，而不是简单反相
6. 测试极端情况 — 长项目名、0% 进度、100% 达标、空数据、超长时间范围
7. 平台适配 — 查阅 references/platform-mapping.md 了解输出规范

5. 参考文件