品牌资源
a2e 的 logo、色板与字体,以及它们能怎么用、不能怎么用。取值全部来自设计规范,页面上的每个数字都是浏览器实测的。
色板
两个色相:薄荷绿与蓝。蓝族有第三级 blue-deep,
它是唯一能和另一个品牌色直接相邻的颜色。
色卡上的底是单向明度渐变不是平涂——顶部掺白、底部保持原色
(blue-deep 反过来)。这样渐变幅度和可读性彻底解耦:
最差对比点永远锚定在原色上。
用色的三条
一 · 文字色分两档。mint 与 blue 配深蓝
#061133,blue-deep 配正文色 #EBEBEB。
配错那一档是 1.10 / 2.20 / 2.18,不是差一点点。
二 · mint 不能直接挨着 blue(对比只有 2.00)。 中间垫 blue-deep(3.24–6.50),或者用深底隔开——深底本身就是 合格的隔断,mint 对它 15.50、blue 7.73。
三 · 语义不能只靠颜色。成功态与主色是同一个绿, 色觉障碍下色相也失效。状态必须有第二通道:图标、文字、位置。
功能色不是品牌色
下面两个色只允许出现在产品状态里:表单错误、破坏性确认、 额度告警、失败任务、录制红点。禁止出现在营销页、品牌物料、 logo、章节强调色、图表序列、任何装饰。
留着它们,是因为「这会毁掉东西」和「这需要你注意」是产品退不出去 的约定,而 mint 和 blue 谁也担不起:绿色已经表示相反的意思, 蓝色已经表示中性信息。这是范围约束不是对比度约束—— 两个配对本身都达标。
中性阶
页面底 #060606 · 面板 #232323 ·
悬起面 #2F2F2F · 正文 #EBEBEB ·
次要文字 #A1A1A1。一律 R=G=B 的真中性灰,不带色相。
层次不能只靠底色差。页面底到面板只有 1.29,面板到悬起面 1.17——都远低于 3:1,必须配描边或阴影。
Logo
A²E 标志,宽高比 1.622 : 1。一份路径,两个 viewBox —— 版面里用紧包围盒那份,方形场景(favicon、app icon、社交头像)用 512 方形画布那份,字标在其中精确居中。
尺寸下限:按宽度算,不按高度
约束来自最窄结构缝——它是标志宽度的 5.40%, 一条缝要留住至少需要 1.5 个设备像素。
绝对下限 32px 宽(缝 1.73px)。24px 时只剩 1.30px, 「2」和 E 的横杠开始并到一起。这个数按 1× 算——按 Retina 定下限 等于赌所有人都用高分屏。
四周留 1/16 显示宽度的安全距离,范围内不放文字、图形、 其他 logo 或版面切边。
能这么用
深底配 mint(对比 15.50,首选)· 深底配 blue(7.73,次级)· mint 底配深蓝(14.14)· blue-deep 底配正文色(7.13)· 浅底配深蓝(15.51,印刷用)。
不能这么用
不要非等比拉伸。宽高比锁死 1.622 : 1。
不要把 mint 压在 blue 上(对比 2.00),反过来也不行。 不要用 blue-deep 作字标色压在深底上(2.38,读不清)。 不要用功能色——amber 和 rose 的对比度是够的,不够的是资格。
不要把 A 的字怀填掉。它是同一条路径里的独立子轮廓,靠
fill-rule="evenodd" 挖空。换成 nonzero
字怀会被填实,A 变成一个实心三角。
不要自己改色。SVG 用 fill="currentColor",
颜色跟随 CSS 继承。需要别的颜色请从上面五种成立的组合里挑。
方形场景用哪一份
favicon、app icon、社交头像用 512 方形画布那份:标志在其中 精确居中,左右各留 24.5、上下各留 113.3,不需要你再排版。
版面里(导航条、页面、文档)用紧包围盒那份。方形那份上下 各有 113.3 的空白,按高度排版会白白吃掉 44% 的高度。
字体
四款全部是 SIL Open Font License 1.1——可自由使用、修改、 自托管、商用,唯一要求是不得单独售卖字体本身。你不需要向我们申请。
| 字体 | 用途 | 许可 |
|---|---|---|
| Lexend Deca | 正文与 UI | SIL OFL 1.1 |
| Noto Sans SC | 中文 | SIL OFL 1.1 |
| Quicksand | 展示与标题 | SIL OFL 1.1 |
| JetBrains Mono | 数字数据 | SIL OFL 1.1 |
三条实测约束
行高必须显式写。16px 正文下 line-height: normal
纯拉丁行 20px,含任何 CJK 字符的行 23px——跳变 15%,段落基线逐行漂移。
正文用 1.65,标题用 1.25。
会刷新的数字一律用 JetBrains Mono。Lexend Deca 和 Quicksand
都没有 tnum 特性,8 个字符的价格串宽度能差 19%。
在这两款上写 font-variant-numeric: tabular-nums 浏览器会静默忽略。
中英混排不需要缩放系数。Lexend Deca 与 Noto Sans SC 的 x-height 只差 0.4%。Quicksand 作标题时补 1.03em, JetBrains Mono 作数字时补 0.96em。
怎么拿
四款都在 Google Fonts 上。我们自己是自托管的——
fonts.gstatic.com 在国内访问不稳定,而且 Noto Sans SC
按 unicode-range 切成 101 块之后,中文页只拉取命中的几块,
实测一页只请求 21 个文件而不是全部 113 个。

