彩色主标识
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 或支持矢量文件的工具中編輯保留頁面邊距、連接軌跡和色彩比例；標題允許替換，輔助編號可按項目更新