TranFu Logo Assets — Preview 视觉总览 · 同步 public/brand/logo/scripts/export-logo.sh 的产出 · 规范见 logo-scene-sizing-spec.md

公开下载包按官方品牌资源页常见结构整理，面向网站、文档、社媒、媒体和供应商使用。

TranFu Brand Assets 包含 SVG / PNG / JPG / PDF / EPS / ICO / WebP / AVIF、品牌指南、资产清单、社媒图和 Web icons。 下载完整品牌资产 ZIP
文件: tranfu-brand-assets.zip
1. Source masters 2. SVG 16 变体 3. App icons 4. Avatars (含 round-crop 预览) 5. Headers 6. Email signature 7. Specials

1. Source masters (3 SVG, tight-bbox)

symbol
source/master-symbol.svg
viewBox 0 0 904 909
lockup
source/master-lockup-h-en.svg
viewBox 0 0 3821 909 (aspect 4.20:1, gap 0.4×symbol_w)
wordmark
source/master-wordmark-en.svg
viewBox 0 0 6755 2048 (Inter Bold em-box)

2. SVG variants 矩阵 (16 = 4 lockup × 4 color)

背景按 color variant 自动切换 (mono-white 在深底显示, 其他在浅底).

symbol (1:1)

primary-on-light
primary-on-dark
mono-black
mono-white (深底)
svg/

lockup-h-en (4.2:1)

primary-on-light
primary-on-dark
mono-black
mono-white (深底)
svg/

wordmark-en (3.3:1)

primary-on-light
primary-on-dark
mono-black
mono-white (深底)
svg/

badge-circle (1:1, 红圆 + 白 mark)

primary-on-light
primary-on-dark
mono-white (深底)
mono-brand
svg/

3. App / OS icons

3a. 浏览器 / iOS

apple-touch
png/apple-touch-icon-180.png
180×180 · mark 80% · iOS HIG safe zone
favicon-48 favicon-32 favicon-16
ico/favicon.ico
16 / 32 / 48 打包 · mark 87.5–92% · 浏览器 tab
favicon-32 favicon-16
png/favicon-32x32.png
png/favicon-16x16.png
独立 PNG · 供 <link rel="icon" sizes> 显式引用
badge-svg badge-svg-dark
svg/logo-badge-rounded-rect-on-*.svg
矢量 · <link rel="icon" type="image/svg+xml">

3b. PWA android-chrome (maskable)

android-chrome-192
png/android-chrome-192x192.png
192×192 · badge fill · purpose: any maskable · Android PWA
android-chrome-512
png/android-chrome-512x512.png
512×512 · badge fill · purpose: any maskable · Android PWA splash

4. Avatars (square vs round-crop 对比)

文件按 size only 命名 (round/square 形态共用同 PNG). 第一列文件名 + 上传平台. 其余 3 列示意 3 种 platform 显示形态. 每个 cell 上下两块: 上 = 浅色 feed 背景 (LinkedIn/Bilibili 等), 下 = 深色 feed 背景 (X/WeChat dark mode 等), 这样白底 avatar 在两种 platform context 下边界都看得到.

avatar-300 300×300
Legacy compact org logo
avatar-300 square light
avatar-300 square dark
as-is (square)
avatar-300 round light
avatar-300 round dark
round-crop preview
avatar-300 rounded light
avatar-300 rounded dark
rounded square (GitHub 类)
avatar-400 400×400
X / 微博 / LinkedIn Page
avatar-400 square light
avatar-400 square dark
as-is (square)
avatar-400 round light
avatar-400 round dark
round-crop preview
avatar-400 rounded light
avatar-400 rounded dark
rounded square
avatar-500 500×500
GitHub org
avatar-500 square light
avatar-500 square dark
as-is (square)
avatar-500 round light
avatar-500 round dark
round-crop preview
avatar-500 rounded light
avatar-500 rounded dark
rounded square (GitHub 实际显示)
avatar-1080 1080×1080
微信 / 抖音 / 飞书 / 小红书 / 视频号
avatar-1080 square light
avatar-1080 square dark
as-is (square)
avatar-1080 round light
avatar-1080 round dark
round-crop preview
avatar-1080 rounded light
avatar-1080 rounded dark
rounded square
几何说明: round-crop 平台可见区 = 圆的内接方 (边 ≈ 70.7% canvas). mark 选 55% canvas = 占内接方 77.8%, 留 22% 内接方内呼吸给平台 UI overlay (头像边框 / 在线状态点等). 详见 sizing spec §2.3.

5. Headers / Covers (宽幅, mobile center-crop)

og
social/og-image-1200x630.png · 1200×630 · width-bound
x-header
social/x-header-1500x500.png · 1500×500 · width-bound
weibo-header
social/weibo-header-1920x600.png · 1920×600 · width-bound
linkedin-cover
social/linkedin-cover-4200x700.png · 4200×700 · LinkedIn Page cover
linkedin-cover
social/linkedin-cover-1128x191.png · 1128×191 · legacy compatibility crop

6. Email signature

email-1x
social/email-signature-200.png · 455×100 (1×)
email-2x
social/email-signature-400@2x.png · 910×200 (2×)

7. Specials

weixin-cover
social/weixin-video-cover-1080x1260.png
1080×1260 · badge fill 1080w · 微信视频号封面
avatar-template
social/avatar-template-1080.png
1080×1080 · 设计辅助网格 (非上传资产, 标注 round-crop 内接方与 mark 安全区)

本预览页跟随 public/brand/logo/ 目录联动渲染 — 改 source / 跑 scripts/export-logo.sh 后刷新即可看新视觉, 并同步生成 public/brand/tranfu-brand-assets.zip. 不要直接编辑 social/ 下文件, 改 sizing spec 规则后跑脚本.