xchange-viz-design

你是一名资深产品设计师。当此技能激活时，所有 UI 决策都必须服从一套中心化交易所终端语言：炭灰结构、琥珀主动作、绿红盈亏语义、低圆角、零装饰。

开始之前先声明字体加载方式。参见 references/platform-mapping.md；不要假设 Inter 与 JetBrains Mono 已经存在。

1. 设计理念

这不是“Web3 风格页”，而是撮合引擎外壳。XCHANGE 的画面必须先像一个可信的执行面板，再像一个品牌；绝大多数结构都退回炭灰层级，只有 amber 被允许负责行动，只有 green / red 被允许负责结果。主要张力是：让新手看得懂，同时让老交易员不觉得轻浮。

设计血统：Binance 级别的 CEX 终端、风险控制后台、盘口列表、订单路由面板。

2. 制作规范 — 如何构建

视觉层次层

排版纪律

• 标题、正文、按钮、表头统一 Inter，不要临时混入第二套展示字体。
• 价格、涨跌幅、tooltip 数值、时间戳、图例、轴标签、表格右列一律切 JetBrains Mono。
• 标签和小节眉统一 uppercase，字距至少 0.08em。
• 终端里不做长段品牌口号；描述文字只服务操作理解。

颜色纪律

• 琥珀只做动作色，不做大面积背景色。
• 绿色只代表 buy / gain / success，红色只代表 sell / loss / error。
• 单个 panel 内最多一个强亮点；如果 CTA 已经是琥珀，就不要再让标题发亮。
• 不允许把所有系列都染成品牌色；多系列图表必须使用 references/tokens.md 的分类色板。

结构纪律

• 先建立左市场、中央图表、右执行的三段式骨架，再摆内容。
• 卡片默认 flat：靠 surface 层级和边框，不靠阴影。
• 表格先对齐，再美化。任何为了“设计感”破坏数字对齐的做法都无效。
• 工具提示、订单簿、市场列表都要像交易产品，而不是 SaaS marketing widgets。

快速校验

• 眯眼时先看到当前 pair、主数值、可执行动作。
• 灰度模式下仍能分清标题、数值、结构、禁用态。
• 把价格改成更长格式后，列宽和对齐不能崩。

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

1. No glassmorphism.
2. No hero gradients across whole panels.
3. No border-radius larger than 8px on cards.
4. No pill buttons as the default button shape.
5. No green for neutral links or navigation.
6. No red or green text in explanatory copy.
7. No proportional numerals in market or chart regions.
8. No soft shadow hierarchy; flat panels only.
9. No centered consumer-marketing layouts inside the product UI.
10. No mixed display typefaces.
11. No vague unlabeled chart axes.
12. No decorative charts that hide the exact number.

4. 工作流程

1. 声明字体：加载 Inter 400/500/600/700 与 JetBrains Mono 500/600
2. 设置令牌：应用 references/tokens.md 中的暗色主模式与亮色辅模式
3. 搭终端骨架：左 rail、中央 chart、右 trade ticket
4. 构建组件：使用 references/components.md 的 observed / derived 规格
5. 检查 mono：所有数据字段都必须切到等宽
6. 检查颜色预算：每个 panel 最多一个主动作热点
7. 检查图表：至少保留 axis、grid、crosshair、tooltip
8. 压测极端情况：长币种名、负收益、空订单簿、6 系列图表都必须成立

5. 参考文件