🎨 中越贸易信息站 · 品牌规范

VIETTRITHONG · yuezhitong.cn · 2026-06-27 v1.0 · 阿越出品

1. LOGO 规范

1.1 标准主标志（浅色背景）

1.2 反白标志（深色背景）

1.3 图标简版（Favicon/头像）

1.4 LOGO 释义

图标：双弧线构成「桥」的意象——上弧蓝（中国）→ 下弧橙/金（越南），交汇处星星代表连接点。象征中越贸易的桥梁。

中文名：中越贸易信息站 — 清晰传达业务定位
英文名：VIETTRITHONG（越智通拼音）— 品牌延续
副标题：TRUNG VIỆT MẬU DỊCH（越南语"中越贸易"）

1.5 最小尺寸与安全空间

使用场景	最小宽/高	四周留白
网页Header	120px 宽	LOGO高度 × 1
移动端	80px 宽	LOGO高度 × 0.5
Favicon/头像	40×40px	—
印刷/物料	25mm 宽	LOGO高度 × 2

2. 色板

2.1 品牌色

深海军蓝

#1A365D

主色 · Header、Hero、Footer、导航

中蓝

#2B6CB0

辅助色 · 链接、悬停、渐变过渡

活力橙

#E8712C

强调色 · CTA按钮、价格、高亮

金色

#FCB045

点缀色 · 数据高亮、Hero强调

2.2 中性色

背景

#F7FAFC

页面主背景

卡片

#FFFFFF

卡片/表单背景

主文字

#1A202C

正文/标题

次要文字

#718096

辅助说明、标签

边框

#E2E8F0

分割线、卡片边框

2.3 语义色

成功

#38A169

✔ 有货、已验证

警告

#D69E2E

⚠ 待确认、需注意

危险

#E53E3E

✘ 缺货、错误

信息

#3182CE

ℹ 提示、更新

3. 字体规范

3.1 中文字体（中国大陆用户）

标题 · PingFang SC / Microsoft YaHei · Bold

正文 · PingFang SC / Microsoft YaHei · Regular

Fallback: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif

3.2 越南语字体

Nhập khẩu từ Trung Quốc · Noto Sans · Bold

Tìm kiếm sản phẩm, so sánh giá cả, cập nhật thị trường · Noto Sans · Regular

Fallback: 'Segoe UI', Arial, sans-serif · 越南语声调符号在此字体族中完整支持

3.3 字号层级

层级	大小	字重	使用
H1	2.2rem (35px)	800 (ExtraBold)	Hero大标题
H2	1.55rem (25px)	700 (Bold)	区块标题
H3	1.05rem (17px)	600 (Semibold)	卡片标题
Body	0.92rem (15px)	400 (Regular)	正文
Small	0.85rem (13.5px)	400	导航/标签
Caption	0.75rem (12px)	400	辅助信息

4. 应用示例

✅ 正确的使用

白底主标志深蓝反白标橙色CTA按钮金色高亮数据蓝色链接

LOGO放在页面左上角，保持白色背景干净。 CTA按钮使用品牌橙，悬停变暗。数据亮点用金色强调。

❌ 禁止的使用

改变LOGO颜色拉伸变形加投影/边框橙色做背景字体替换

LOGO不可改色、变形、加特效。橙色仅用于强调/CTA，不可做大面积背景色。字体使用系统字体系列，不引入外部自定义字体。

4.1 品牌色应用配比

60% 深海军蓝

25% 留白/浅色

10% 活力橙

5% 金

5. 交付物清单

文件	格式	用途	状态
LOGO标准色（含文字）	SVG inline（已嵌入此文档）	网站Header	✅ 可直接用
LOGO反白版	SVG inline	深色背景场景	✅ 可直接用
图标Favicon	SVG → 需导出PNG	浏览器标签	🔄 待导出64×64 PNG
品牌色CSS变量	CSS :root（已在 trade-bridge.css）	全站引用	✅ 已生效
字体规范	系统字体栈（无外部字体加载）	全站引用	✅ 已生效

品牌规范 v1.0 · 2026-06-27 · 阿越 → 阿智部署到 yuezhitong.cn/brand/
Tags: #LOGO #色板 #字体 #品牌规范 #三兄弟协作