彩色主标识
SVG 用于浅色背景与品牌主场景
RelayX 品牌规范 · 版本 1.0
让每一次出现， 都指向同一个 RelayX
面向设计、市场、开发与合作伙伴的品牌使用手册，查阅规则、复制设计标记，并下载可以直接使用的官方资产
01
识别系统
品牌标识
标识是 RelayX 最稳定的识别资产，优先使用官方文件，不要重新绘制、截屏或手动改色标准写法
RelayX唯一正确写法
官方标识文件
根据背景和制作方式选择正确版本
安全留白
四周最少保留 1X，X 等于标识图形的高度
1X1X1X1X
最小尺寸
小于建议尺寸时改用图形标识
数字媒介120 px
印刷媒介35 mm
图形标识24 px
错误使用
保持比例、颜色与组合关系不变
DON’T不要拉伸或压缩标识
DON’T不要修改标识颜色
DON’T不要旋转或倾斜
DON’T不要添加描边与阴影
DON’T不要放在杂乱背景上
DON’T不要重排标识元素
02
阅读系统
排版规范
本章只定义视觉层级与阅读节奏，不指定字体，任何语言和媒介都应保持一致的信息优先级字号、字重和留白共同建立阅读顺序
正文建议 16px，行高不低于字号的 1.5 倍
长文本保持在 65–75 个字符以内
层级桌面 / 行高移动 / 行高字重字距
Display品牌主视觉标题
56 / 6438 / 44700-0.035em连接每一种可能
Heading 1页面主标题
44 / 5232 / 40700-0.025em更简单的软件订阅
Heading 2一级章节标题
32 / 4026 / 34650-0.018em清晰建立层级
Heading 3内容组标题
22 / 3020 / 28600-0.01em保持阅读节奏
Body正文与产品说明
16 / 2616 / 264000一句话只传达一个重点，正文行宽控制在 65–75 个字符
Caption标签、日期与辅助信息
13 / 2013 / 205000.01em辅助信息不承担核心阅读任务
混排示范 / 2026
复杂的工具，简单地连接
RelayX 将专业软件与 AI 工具集中到一个清晰入口，金额与单位之间保留空格，例如 ¥ 129 / 月；英文缩写与中文之间保持可读间距
标题最多两行
正文左对齐，不使用两端对齐
金额和数据使用等宽数字
避免整段大写与过度加粗
03
色彩系统
色彩方案
品牌蓝负责识别与行动，深海蓝提供稳定的结构，极光青仅用于少量信号强调品牌原始色
点击色块复制 HEX 值
#315FF4
Relay 蓝
--brand-blue-600oklch(55% 0.22 263)主操作、链接与关键强调
#101A34
深海蓝
--brand-navy-950oklch(23% 0.04 263)标题、深色背景与高对比文本
#27C2EA
极光青
--brand-cyan-400oklch(77% 0.13 215)数据亮点与少量辅助强调
中性色
使用同一冷灰家族，避免混入偏黄灰色
#F6F8FC
画布
--brand-canvasoklch(97.5% 0.008 255)页面背景
#FFFFFF
表面
--brand-surfaceoklch(100% 0 0)卡片与浮层
#64718A
次级文字
--brand-ink-mutedoklch(54% 0.035 258)说明文字与元信息
#E4EAF5
分隔线
--brand-ruleoklch(92.5% 0.015 258)边框与分隔
语义色
颜色之外必须同时提供图标或文字提示
70%中性色25%品牌蓝5%
建议配色比例
以中性色建立信息空间，品牌蓝集中在主要行动与关键识别点，极光青只作为信号提示正文与背景对比度至少达到 WCAG AA
04
空间系统
栅格系统
统一的列网格和 8pt 间距体系，让网页、演示文稿与营销物料保持同一种秩序桌面
≥ 1200 px · 12 列 · 24 px gutter
max-width: 1200 px平板
768–1199 px · 8 列 · 20 px gutter
margin: 24 px移动端
< 768 px · 4 列 · 16 px gutter
margin: 16 px12 列内容栅格
1200 / 12 / 24123456789101112
主要内容 · 7 列
辅助内容 · 5 列
卡片 · 4 列
卡片 · 4 列
卡片 · 4 列
8pt 间距标记
4px 仅用于微调，其余布局优先使用 8px 的倍数
4px图标内微调
8px紧凑元素间距
12px标签与控件内距
16px默认组件间距
24px卡片内距与网格间距
32px内容组间距
48px章节内垂直间距
72px大型章节间距
8 px
控件圆角
14 px
卡片圆角
24 px
大型容器
1 px
默认边框
05
生产资产
模板
从经过批准的版式开始，替换内容而不改变安全区、品牌色和信息层级固定三层结构
识别层、信息层、行动层，只替换内容，不打乱层级
保留安全区
模板边距是可读性的一部分，不要让标题和 CTA 贴边
控制品牌信号
一张画面只保留一个主行动色和一个连接节点
查看原图社交媒体
下载社交媒体发布模板
1080 × 1080 · SVG
单焦点 · 连接轨迹
查看原图网站
下载网站横幅模板
1600 × 600 · SVG
左文右图 · 转化横幅
查看原图演示文稿
下载演示文稿封面
1920 × 1080 · SVG
深色封面 · 章节编号
查看原图邮件
下载邮件头图模板
1200 × 480 · SVG
留白标题 · 轻量信号
查看原图合作伙伴
下载合作伙伴联合模板
1600 × 900 · SVG
双标识 · 等权分区如何使用模板
下载 SVG 后可在 Figma、Illustrator 或支持矢量文件的工具中编辑保留页面边距、连接轨迹和色彩比例；标题允许替换，辅助编号可按项目更新