mt5.email 品牌 UI 系统

面向 MT5 使用公司的券商上线服务商。品牌承诺是「快速布局」—— 把白标平台、CRM、邮件通知、支付、合规陪跑拼成一条能走完的路径。 整套视觉建立在一个判断上：这个品类的界面都在撒同一个谎—— 用彩色状态标签宣称"一切正常"，而运营真正需要知道的是「这件事走到哪一步了、卡在哪」。

令牌即契约

品牌标记

几何化的 m 由两条连续笔画构成，笔止于基线（"落地"）；右侧圆点代表送达—— 信息抵达的那一刻。m 同时是 mail / MT5 / market 的首字母， 顶部平肩是刻意的：弧顶做成方肩，读起来是"基础设施"而不是"通讯 App"。

主标记（暗底）

mt5.email

应用图标 / favicon

单色版（单色印刷 / 传真 / 水印）

使用规范

色彩系统

五个色族：深空（承载）· 金（品牌 / 人的信任）· 青（系统 / 送达）· 琥珀（到期 / 待办）· 红（退信 / 失败）。 金与青语义不重叠是本系统唯一的颜色纪律。

语义令牌 · 对比度核验（浏览器实时计算）

判据 = WCAG 2.1 对比度。正文 ≥ 4.5:1（AA），大字号 ≥ 3:1。 本表的值由页面实时读取 CSS 令牌算出 —— 改令牌这里会立刻变红，不靠人肉维护文档。

非文字对比 · 组件边界（WCAG 1.4.11 要求 ≥ 3:1）

判据是「识别组件所必需」的视觉信息必须 ≥3:1。输入框、复选框、开关的边框 属于这一类 —— 用细发丝线画输入框在暗底上几乎看不出边界，很多产品栽在这。

非文字对比 · 装饰性分隔（WCAG 豁免）

卡片边界与表行分隔线不属于"识别组件所必需"的视觉信息（容器靠背景色差已可辨识）， 因此 WCAG 不要求 3:1。这里列出来是为了说清它为什么可以不达标 —— ⛔ 不是把不达标算成通过。判定阈值写 1.1:1，只用来发现"几乎完全看不见"的退化。

排版

全系统只用两族字：无衬线（Inter / 思源黑体）+ 等宽（JetBrains Mono）。 刻意不引入衬线标题 —— 衬线传达"传承"，而本品牌的承诺是"速度"。 语气靠颜色、留白和等宽数据层建立，不靠字体混搭（竞品普遍在混搭，且混得很乱）。

字号阶梯

语义排版

字重与字距

间距 · 圆角 · 层级 · 动效

4px 基准，8px 为节奏单位。圆角刻意偏小（3–20px）： 大圆角是消费级 App 的语言，金融后台的语言是紧圆角 —— 紧圆角看起来"精确"。

间距阶梯

圆角

层级：暗色靠表面提亮，不靠阴影

动效

按钮

主按钮在暗色下是金填充（金在深空上最贵），亮色下是深墨填充（金在亮底做填充过不了对比度）。 这是刻意的主题不对称，理由写在 BRAND.md §2.3。

载入态保留文字宽度：按钮载入时文字被透明化而非移除 —— 否则按钮会在点击瞬间变窄， 整行按钮跟着跳，指针下面的按钮会换人。

表单

输入框永远带标签（⛔ 不用 placeholder 当标签 —— 一开始输入标签就没了）。错误信息写在字段下方，且必须说清怎么改。

选择控件

徽章与状态

状态徽章只表达单点事实（一封信的结局、一个账号的状态）。 一条要走完的路径请用「投递轨迹」 —— 用徽章表达流程是本品类最常见的错误。

卡片与指标

表格

表头走 小号大写标签，数字列右对齐 + 等宽。行悬浮可点，选中态用低调的金色底，⛔ 不用高饱和蓝。

反馈

吐司

浮层

不可逆操作必须两步确认 + 先说后果，且确认框里要写清"会发生什么"，而不是只问"确定吗"。

★ 投递轨迹

签名组件。一笔开户、一封邮件、一次对账、一次 KYC 复核，在这个产品里都是同一种东西： 一条要走完的路径。竞品把它做成一个彩色标签（"处理中"），信息量几乎为零 —— 运营看不到走到哪、卡在哪、哪一步退回来了。

空态与加载

空态必须回答「为什么空」+「下一步做什么」。 只画一个插图和"暂无数据"，等于把用户丢在原地。加载态用骨架屏而不是转圈 —— 骨架屏能预告版面结构，转圈不能。

代码与密钥

服务商产品一定会有 API 和密钥。密钥默认掩码显示，要显式揭示 —— ⛔ 不做"页面一打开就完整可见 + 一个大复制按钮"，那是把泄露变成一次误点。

# 开户：异步受理，幂等
curl -X POST https://api.mt5.email/v1/accounts \
  -H "Authorization: Bearer $MT5E_KEY" \
  -d '{"brand":"northgate","name":"Chen Wei",
       "email":"chen@example.com","leverage":100,
       "currency":"USD"}'

# → {"login":900124,"task_id":"01J8F3K2","idempotent":false}

数据可视化

图表只承担三件事：趋势、对比、阈值。纯手写 SVG，⛔ 不引图表库 —— 券商后台要快，一个 300KB 的图表库换不来任何这个页面需要的东西。

面积趋势（金）

对比柱 + 阈值线

无障碍核验

WCAG 2.1 AA 是本系统的下限，不是加分项。下面是可在浏览器里复现的核验清单。