品牌

品牌资源

a2e 的 logo、色板与字体,以及它们能怎么用、不能怎么用。取值全部来自设计规范,页面上的每个数字都是浏览器实测的。

色板

两个色相:薄荷绿与蓝。蓝族有第三级 blue-deep, 它是唯一能和另一个品牌色直接相邻的颜色。

mint #41FFA4 亮度 0.753 · 主色。也是 –success 配 navy 14.14
blue #6A9FFF 亮度 0.351 · 第二色。也是 –info 配 navy 7.06
blue-deep #1F4999 亮度 0.074 · 隔断色。唯一配正文色的 配正文色 7.13

色卡上的底是单向明度渐变不是平涂——顶部掺白、底部保持原色 (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、章节强调色、图表序列、任何装饰。

amber #FFD15C 仅警告态 配 navy 12.79
rose #FF4D6D 仅错误态 配 navy 5.75

留着它们,是因为「这会毁掉东西」和「这需要你注意」是产品退不出去 的约定,而 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 方形画布那份,字标在其中精确居中。

SVG · mint

矢量 · 4KB · 深色背景用

下载
SVG · navy

矢量 · 4KB · 浅色背景与印刷用

下载
PNG · mint 透明底
PNG · mint 透明底

1152 × 759 · 34KB

下载
PNG · navy 白底
PNG · navy 白底

1152 × 759 · 34KB

下载

尺寸下限:按宽度算,不按高度

约束来自最窄结构缝——它是标志宽度的 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正文与 UISIL 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 个。

这些颜色和字体,正在这里工作

上面每一条规则都是从真实界面里量出来的, 不是先定规则再套界面。

开始使用 a2e