defi-yield

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

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

1. 设计理念

这不是泛 Web3 营销页，而是一间把收益承诺拉回到数据纪律里的协议控制室。Space Grotesk 负责把方向感做硬，DM Sans 负责消化说明和筛选器，JetBrains Mono 接管 APY、排放率、锁仓期、提款队列和时间戳这些任何一个字符都不能飘的字段。电蓝只负责结构和选中，酸绿只负责“去执行”，粉与橙只允许出现在奖励分配和高波动层，避免整页陷入廉价霓虹。

设计血统：night-session trading desk、glass HUD、DeFi emissions terminal、protocol treasury board。

2. 制作规范 — 如何构建

视觉层次层

排版纪律

• 标题永远用 Space Grotesk。 不要让 hero 标题回落到默认 sans。
• 所有数据字段切到 mono。 APY、TVL、收益、时间、区块高度、队列位次、风险阈值、tooltip、legend、axis 一律 JetBrains Mono。
• label 与 caption 统一 uppercase。 保留 0.08em 左右字距，像终端标签，不像 marketing eyebrow。
• 正文保持克制。 DM Sans 只负责解释和可读性，不承担品牌姿态。

颜色与信号预算

• 蓝色负责结构。 主图表系列、选中态、聚焦、导航激活、主要指标引用都由电蓝承担。
• 绿色只负责 go。 连接钱包、部署资金、收益为正、提款就绪时才允许 acid lime 上场。
• 粉色和橙色只用于奖励/热度。 不要把 reward 色扩散到普通按钮和表格。
• 单张卡片最多一个亮色热点。 如果 CTA 已经发光，图表标题就退回中性。

玻璃与海拔

• 面板是深蓝雾化玻璃，不是白雾玻璃。 透明度足够低，让数据看起来被容器承接。
• hover 先改边框，再补 glow。 层级先靠面色和边框，不靠浮夸阴影。
• 发光必须有语义。 蓝光表示结构聚焦，绿光表示可执行结果，粉光表示奖励排放。

布局与图表

• 先搭协议台骨架。 sidebar、toolbar、KPI、主图、次级分析区、数据表格先确定，再摆视觉花活。
• 图表必须带参考结构。 保留 subtle axis、solid grid、mono ticks、hover crosshair。
• 每张图先有用途，再有风格。 折线图回答趋势，柱图回答分布，表格回答行动明细。

快速校验

• 眯眼测试。 眯眼时先看到当前收益与风险，再看到图表结构，最后才看到说明文字。
• 灰度测试。 去掉颜色后，仍能靠明度和布局看出优先级。
• 长数字测试。 把 245.8% 改成 245.873%、把 $2.4B 改成 $2,438,440,210，版式不能塌。

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

1. No purple-first crypto wallpaper. 粉紫不能接管整个系统。
2. No lime everywhere. 酸绿不是默认强调色，只能代表可执行动作或正收益。
3. No transparent glass with floating text. 卡片必须有足够深的承接色。
4. No chart without axis or grid. 装饰折线不属于收益控制台。
5. No proportional numerals in data regions. 所有数据区必须用等宽数字。
6. No pill everything. 只有标签、筛选 capsule、状态 chips 才允许 999px。
7. No multiple glow colors in one panel. 一张卡片里最多一个发光热点。
8. No warm consumer beige or pastel surfaces. 背景必须保持冷、深、金融化。
9. No bounce or playful spring. 交互要稳、短、可预测。
10. No rainbow categorical palettes. 分类色只允许使用系统定义的 6 色协议色板。
11. No centered marketing composition inside product views. 产品界面保持左对齐操作骨架。
12. No fake loading skeleton festival. 加载态优先用结构占位和明确进度，不用整页发灰闪烁。

4. 工作流程

1. 声明字体 — 加载 Space Grotesk 600/700、DM Sans 400/500/600、JetBrains Mono 500
2. 设置令牌 — 先应用 references/tokens.md 中的 dark / light 模式与收益色板
3. 搭骨架 — 先定 sidebar、toolbar、12 列 chart grid 与卡片层级
4. 构建组件 — 使用 references/components.md 中的 observed / derived 规格
5. 检查数据字体 — 所有 APY、时间、TVL、legend、tooltip、axis 都必须切到 mono
6. 检查信号预算 — 每个 panel 是否只保留一个真正亮的动作热点
7. 验证主题 — dark 像夜盘协议台，light 像日间分析台，而不是简单反色
8. 压测极端情况 — 6 系列图表、超长池名、负收益、空列表、排队激增都要成立

5. 参考文件