vaultx

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

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

1. 设计理念

这不是链上赌场，也不是冰冷的风控黑箱。VaultX 的核心气质是“可托付的自托管”：近黑背景让资产信息足够安静，cyan 到 violet 的梯度只在行动、路由和价值变化上发光，Space Grotesk 让所有文字都显得现代且一致，JetBrains Mono 则把余额、净值、时间和链上字段钉进一个可信的节奏里。主要张力是消费级触感与加密级严肃性并存。

设计血统：mobile wallet chrome、glass utility panels、consumer fintech launchers、security status boards、cross-chain route maps。

2. 制作规范 — 如何构建

视觉层次层

排版纪律

• 系统只用一个 sans。 Space Grotesk 同时承担标题和正文，层级靠字重、字距和尺寸建立。
• 所有机器字段都切到 mono。 余额、净值、价格、时间戳、百分比、tooltip、地址缩写、链 ID、执行延迟都必须用 JetBrains Mono。
• 标签不装饰。 eyebrow、legend、表头、状态说明使用更小号 Space Grotesk，不需要第二种展示字体。
• 正文保持短句。 这是一套钱包控制台语言，说明文字只做补充，不做叙事。

颜色与信号预算

• cyan 负责信任和流动性。 主图、焦点边界、主要操作都由 --accent 承担。
• violet 负责链路与第二层方向。 route、bridge、chain relationship、secondary series 使用 violet，而不是把它当第二 CTA 色。
• 红色只在平静被打断时出现。 错误、欺诈提示、风险事件才允许 coral / red。
• 一块面板只留一个真正的亮点。 如果 CTA 已经是渐变按钮，图表标题和 legend 不要再同时发光。

玻璃与海拔

• 面板必须有实体。 玻璃是 5% 白底 + 20px blur + 1px 半透明白边，不是完全透明。
• hover 先抬边，再发光。 只在 hover / selection 时给 cyan glow，静态状态不要整页漂浮。
• pill 是功能而不是玩具。 只有 chain badges、状态胶囊、时间范围和 segmented control 才能用 999px。

构图方法

• 先铺钱包工作台。 先确定顶部导航、KPI、主图、资产列表、链健康和安全区，再放装饰。
• 让净值与安全永远共存。 钱包不是纯投资视角，任何“收益”区域附近都要有安全或路由信息作为平衡。
• 眯眼测试。 眯眼后应先看到主余额、当前状态和动作按钮，然后才看到图表结构和说明文字。

数据可视化工艺

• 图表线条干净，不做交易终端噪音。 轴线和网格都存在，但只做到够读。
• 渐变只用在价值变化。 面积填充、进度条、route path 可以用 cyan→violet；普通卡片背景不能到处渐变。
• tooltip 像安全卡片。 深色底、细边、mono 数值、无花哨箭头。
• 动效是平滑滑移。 ease 即可，不允许 spring、bounce、explosive entrance。

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

1. No rainbow web3 noise. 不要把所有链色同时推到高饱和。
2. No second display font. 系统里只有 Space Grotesk 和 JetBrains Mono。
3. No flat opaque cards. 缺少玻璃边界和 blur 会失去 VaultX 的可触控感。
4. No gradients on every surface. 渐变只属于动作和价值变化。
5. No radius below 12px on controls. 按钮、输入、分段控件不允许变得锋利。
6. No invisible data axes. 钱包 dashboard 仍然需要可读的刻度和参考线。
7. No proportional numerals in numeric zones. 所有数据区必须是等宽数字。
8. No green as generic highlight. 绿色只表示安全通过或正向结果。
9. No giant blur without border. 只有 blur 没有边界会让面板塌掉。
10. No sidebar-heavy enterprise chrome. 这是顶部导航驱动的控制台，不是后台 CMS。
11. No danger color in neutral navigation. 红色绝不能被用作普通 tab 或链接色。
12. No playful microcopy. 语气要稳，不要 meme 化 crypto 文案。

4. 工作流程

1. 声明字体 — 加载 Space Grotesk 400/500/600/700 与 JetBrains Mono 400/500
2. 设置令牌 — 应用 references/tokens.md 中的亮暗模式、route 色和数据色板
3. 搭建骨架 — 先定 topbar、KPI 排、12 列 chart grid 和资产 / 安全双栏
4. 构建组件 — 使用 references/components.md 中的 observed / derived 规格
5. 检查数字字体 — 所有金额、时间、地址、tooltip、轴标签必须切到 mono
6. 检查颜色预算 — 每个面板是否只保留一个亮色动作焦点
7. 验证双模式 — dark 像夜间钱包，light 像白天金融 app，而不是简单反色
8. 压测场景 — 长资产名、空钱包、风险提示、6 链对比、低余额状态都必须成立

5. 参考文件