OPC 圈子 · 品牌使用速查

本页是「直接做好选择」的可视化交付。展示 4 类 × 4 色 = 16 个 SVG 源文件的实时预览、 8 大典型应用场景的已选版本 + 对应文件名 + 效果图。设计师/运营/开发无需纠结,直接按场景查文件即可使用。 完整文字规范见 assets/logo/OPC圈子-LOGO使用规范.md

一、16 个 LOGO 源文件总览(可直接点击卡片对应文件名使用)

存放路径:assets/logo/A-环形共生(默认)/

01 · 横排组合(带文字)— 用于页脚、页眉、PPT封面、海报标题等需要清晰品牌全称的场景

OPC圈子
FullColor 彩色
01-横排组合(带文字)/logo-horizontal-FullColor.svg
OPC圈子
Reverse 反白
01-横排组合(带文字)/logo-horizontal-Reverse.svg
OPC圈子
Black 纯黑
01-横排组合(带文字)/logo-horizontal-Black.svg
OPC圈子
White 纯白
01-横排组合(带文字)/logo-horizontal-White.svg

02 · 方形图标 — 用于 App 图标、小程序图标、PC 桌面快捷方式、网站方形头像等小尺寸方形区域

FullColor 彩色
02-方形图标/logo-square-FullColor.svg
Reverse 反白
02-方形图标/logo-square-Reverse.svg
Black 纯黑
02-方形图标/logo-square-Black.svg
White 纯白
02-方形图标/logo-square-White.svg

03 · 圆形图标 — 用于浏览器 favicon、微信/抖音头像、导航栏圆形小标识、个人/企业社交媒体圆形头像

FullColor 彩色
03-圆形图标/logo-circle-FullColor.svg
Reverse 反白
03-圆形图标/logo-circle-Reverse.svg
Black 纯黑
03-圆形图标/logo-circle-Black.svg
White 纯白
03-圆形图标/logo-circle-White.svg

04 · 纯图形 Mark(无文字)— 用于角标、水印、小徽章、认证标、社媒点赞动图、产品内极小尺寸标识

FullColor 彩色
04-纯图形Mark(无文字)/logo-mark-FullColor.svg
Reverse 反白
04-纯图形Mark(无文字)/logo-mark-Reverse.svg
Black 纯黑
04-纯图形Mark(无文字)/logo-mark-Black.svg
White 纯白
04-纯图形Mark(无文字)/logo-mark-White.svg

二、8 大典型场景 · 已选版本速查(无需纠结,直接对号入座)

每个场景下展示:场景说明 / 所选版本 / 对应文件名 / 实时预览效果

🌙 场景 1:网站页脚(深色背景)
使用文件:01-横排组合(带文字)/logo-horizontal-Reverse.svg
✅ 已选 · 横排 Reverse 反白
选择理由:9 个页面页脚均为深灰/深蓝渐变底色,选「反白 Reverse」版保证最强对比度。 橙色「圈子」二字作为品牌强调色依然保留,辨识度最高。全站页脚已应用该版本。
☀️ 场景 2:首页 Hero / 海报标题 / 封面(浅色背景)
使用文件:01-横排组合(带文字)/logo-horizontal-FullColor.svg
✅ 已选 · 横排 FullColor 彩色
OPC圈子
从技能到工作,一人公司陪跑社区。
选择理由:白色/浅灰背景上,「彩色 FullColor」版呈现完整的深蓝主色 + 橙色强调色, 品牌识别度最强。适合首页首屏大标题、易拉宝、海报、PPT 封面等场景。
🧭 场景 3:顶部导航栏 Logo(深色导航条)
使用文件:03-圆形图标 + 文字组合(03-Reverse 或 02-Reverse 均可)
✅ 已选 · 方形/圆形 Reverse 反白 + 文字
OPC圈子
选择理由:导航栏使用 02 或 03 类 Reverse 版本的小图标+右侧文字。橙色「圈子」保留, 与白色主字形成品牌记忆点。已应用在全部 9 个页面顶部导航。
🎴 场景 4:课程卡 / 机构卡 认证角标
使用文件:04-纯图形Mark(无文字)/logo-mark-FullColor.svg
✅ 已选 · Mark FullColor 彩色
OPC 官方认证
证书类课程名称
已通过 OPC 官方课程认证
¥1,980
选择理由:「纯图形 Mark」最小尺寸仅需 24px 即可识别,适合卡片角标。 彩色版白底配合「OPC 官方认证」文字标签,已应用 services.html 的 8 门课程卡片、hall.html 机构卡头像右下角角标。
🖨️ 场景 5:打印 / 合同 / 黑白文档 / 传真
使用文件:01-横排组合(带文字)/logo-horizontal-Black.svg
✅ 已选 · 横排 Black 纯黑
OPC圈子
合同 / 宣传册 / 黑白打印场景 — 一律用纯黑版,避免彩印产生偏色
选择理由:打印/黑白场景下颜色会丢失,选「纯黑 Black」版,保证在任何打印机下线条清晰可辨。 合同、邀请函、录取通知书、课程结业证书封面均使用此版本。
🌌 场景 6:深色 PPT / 深色名片 / 易拉宝深色底
使用文件:01-横排组合(带文字)/logo-horizontal-White.svg
✅ 已选 · 横排 White 纯白
OPC圈子
One Person Company · 一人公司陪跑社区
选择理由:彩色版/反白版在深紫、深绿等非品牌色深色背景上会出现橙色对比度不足问题。 纯白版在任何非黑深色背景下对比度最稳,注意此时品牌橙色消失,仅在背景是品牌蓝时才用 Reverse 版
💧 场景 7:海报 / PDF 合同水印(平铺半透明)
使用文件:04-纯图形Mark(无文字)/logo-mark-Black.svg + opacity 10%~20%
✅ 已选 · Mark Black 纯黑 + 透明度
课程结业证书 · 封面
兹证明学员 XXX 已完成 OPC 圈子 AI 就业陪跑营全部课程,成绩合格,特发此证。
选择理由:水印不干扰主视觉,用纯图形 Mark + 低透明度(10%~20%),选择 Black 版可兼容任意底色。 在 Word/PPT/Canva 中导入该 SVG 后调低透明度,平铺为 120~160px 网格即可。
🌐 场景 8:浏览器 Favicon / 社媒圆形头像
使用文件:03-圆形图标/logo-circle-FullColor.svg
✅ 已选 · 圆形 FullColor 彩色
🔒 https://opc-quanzi.com / 品牌规范
选择理由:Favicon 仅 16×16~32×32px,圆形 FullColor 版保留了深蓝底 + 橙色弧形两个品牌记忆点, 在浏览器标签栏一眼可辨。也适用于微信/抖音/小红书等社媒头像。

三、品牌色板 · 固定 4 色

严禁使用品牌色系以外的颜色重新渲染 LOGO。

主色 · Brand Blue

#0A2463 · RGB(10,36,99)

文字、Mark 主体、圆形方形底色

强调色 · Brand Orange

#F7931E · RGB(247,147,30)

「圈子」文字、环形、弧形描边

纯黑 · Pure Black

#111827 · Gray-900

Black 版专用 / 黑白打印

纯白 · Pure White

#FFFFFF · White

Reverse / White 版专用

四、使用禁忌(禁止这样用)

违反以下任意一条,品牌辨识度将下降 30% 以上。

❌ 禁止改变颜色

禁止用粉红、紫、绿等非品牌色重填 LOGO 内部元素,必须使用 FullColor/Reverse/Black/White 4 种之一。

❌ 禁止变形拉伸

禁止非等比缩放、倾斜、旋转。缩放时同时调整宽高,保持 viewBox 原始比例。

❌ 禁止加阴影/描边/渐变

禁止在 SVG 外额外添加阴影、发光、粗描边、渐变叠加。保持原有矢量简洁度。

❌ 禁止过小尺寸

横排组合最小显示宽度 120px;方形/圆形图标最小 32px;纯图形 Mark 最小 24px。低于此尺寸请换简版。

❌ 禁止拆开放置

横排组合版的图形与文字必须同时出现,不可只使用文字部分。需独立出现时请改用 04-Mark 纯图形版。

❌ 禁止背景对比度不足

Reverse 仅用于品牌蓝/深色背景;White 用于其他非品牌深色底;FullColor 仅用于白/浅灰底。