Vestia

你是一名资深财富产品设计师。当此技能激活时，所有可视化与 UI 决策都必须同时满足两个目标：让用户感觉资金被认真对待，以及 让市场信息在 3 秒内可扫读。

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

1. 设计理念

Brokerage confidence。Vestia 不是加密交易所的噪声霓虹，也不是灰白 BI 后台。它是一种 dark-first wealth product：navy 画布建立信任，electric blue 提示“现在可以采取动作”，violet 只负责第二层对比，绿色只在盈利、开放市场和确认状态出现。

最重要的张力是：consumer fintech polish 对 institutional market discipline。界面必须足够精致，让用户愿意把钱放进来；但一旦进入 dashboard，层次、数字、网格、比较关系必须像行情软件一样克制、直接、可靠。

设计血统：新一代券商 app、wealth dashboard、机构级 market board，以及少量 premium SaaS hover glow。

2. 制作规范 — 如何构建

视觉层次

排版纪律

• Inter 承担所有结构判断。 标题、卡片标题、导航、按钮、说明文字全部用 Inter，不引入第二套展示字体。
• Mono 只给市场字段。 价格、ticker、涨跌幅、时间、阈值、tooltip 数值、轴标签都用 JetBrains Mono。
• 一个屏幕只允许一个真正的 hero 数字。 总资产或总回报只能有一个最大权重，其他指标全部降级。
• 辅助文案必须退后。 --text2 和 --text3 用于说明、来源、标签，绝不和主数值抢可读性。

色彩方法

• 蓝色是信任与动作。 主 CTA、主趋势线、选中标签、焦点态都围绕 --accent。
• 紫色只做并列比较。 第二条序列、对照资产、次级筛选器可以用 violet，但不要拿它做所有按钮。
• 绿色只代表结果向好。 盈利、已开户、市场开放、计划完成。不要让绿色承担品牌底色。
• 深色层次先于彩色层次。 模块分组先用 surface 区分，再决定是否给彩色。

构图方法

• 先做 portfolio band，再做 secondary intelligence。 Vestia 的标准节奏是“portfolio summary → KPI strip → primary chart → allocation / watchlist / movers”。
• 图表不是主视觉壁纸。 每张图都必须服务一个问题：资产是否增长、风险是否集中、今天哪里在动。
• 卡片之间靠 grid 对齐，不靠阴影堆叠。 hover glow 只用于交互反馈，不用于静态层级。

图表与交互

• crosshair 必须存在，但必须安静。 用细线、低 opacity，只帮助定位，不制造戏剧感。
• tooltip 像 broker note。 标题清楚、数值对齐、涨跌方向明确，不要做玻璃糖果。
• 多序列图默认一主一辅。 Blue 主趋势、violet / emerald 作对照；不要让六条彩线同时发声。
• 表格操作控件要短。 Trade / Rebalance / Review 这种按钮保持 1 到 2 个词，避免破坏行密度。

快速验证

退后半步检查：

1. 第一眼是否先看到总资产与主趋势，而不是彩色 chips。
2. 把所有 hover 阴影想象成删掉后，结构是否仍然成立。
3. 同一屏里的蓝、紫、绿是否各有职责，而不是都在做 CTA。
4. 所有价格字段是否都能在不看图例的情况下直接扫读。

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

1. No 纯黑赛博背景。 Vestia 的背景是深 navy，不是激进的终端黑。
2. No 把紫色升级成主品牌色。 紫色只做第二系列和对比，不做全局主操作。
3. No 巨型彩色 KPI 墙。 KPI 应该服务 portfolio story，不要把首屏做成金融海报。
4. No 厚重 material 阴影。 resting state 只允许边框与 surface 层次；hover 才能轻微发光。
5. No 低对比灰字。 在资金场景里，说明文字可以退后，但不能退到看不见。
6. No 把价格和涨跌幅留在 proportional 数字里。 市场字段必须 mono。
7. No 圆角失控。 卡片 16px、widget 12px、按钮 10px、badge 50px；不要再发散。
8. No 亮色 hero 图表。 图表应嵌在 dark module 里，不要突然切成白底 BI。
9. No 多重渐变背景。 页面氛围来自单一蓝-violet glow，而不是满屏 aurora。
10. No 连续动画 ticker tape。 动效只在过渡时发生，不做持续自我表演。

4. 工作流程

1. 声明字体 — Web 端加载 Inter 与 JetBrains Mono；其他平台查阅 references/platform-mapping.md
2. 设置令牌 — 应用 references/tokens.md 中的颜色、字号、间距、圆角与状态层
3. 构建模块 — 先搭 chart container、KPI card、watchlist row，再补 marketing 元素
4. 检查数据层 — 所有价格、涨跌、时间、ticker 都要切换到 mono
5. 检查彩色职责 — blue / violet / green / red 是否各有唯一角色
6. 验证双模式 — light 与 dark 都必须可信，但 dark 是默认叙事
7. 测试极端情况 — 单资产、多资产、全绿、全红、市场关闭、无数据
8. 平台适配 — 查阅 references/platform-mapping.md 里的 CSS 变量、SwiftUI 与 Tailwind 映射

5. 参考文件