Logo 使用规范
什么场景用什么 Logo — 决策指南
01素材清单 (Assets)
PRIMARY
光芒符号 (Brand Symbol) — 4096×4096 PNG —
celoria-symbol-4k.png
celoria
PRIMARY
文字标识 (Wordmark) — Poppins SemiBold — CSS 字体渲染，非图片
celoria
COMBO
组合标识 (Horizontal Lockup) — 符号 + 文字并排
已废弃 deprecated
| 文件 | 原因 | 替代方案 |
|---|---|---|
login-logo.png | PNG 文字缩放模糊 | Symbol + Poppins 文字 |
Celoria Icon - 光芒符号.png (1024) | 被 4K 版替代 | celoria-symbol-4k.png |
celoria-c-icon.png | 品牌统一，不再使用 C 字母 | 光芒符号 |
02什么场景用什么 (Usage Decision)
仅符号 (Symbol Only)
空间受限，用户已知道这是 Celoria
Sidebar 折叠态 • Favicon • App Icon • 加载动画 • 水印
celoria
仅文字 (Wordmark Only)
品牌已有符号在附近，或极简布局
页脚 copyright • 邮件签名 • 文档标题 • 已有符号的同屏
celoria
组合标识 (Lockup)
需要完整品牌辨识，首次触点
登录页 • 租户选择页 • 对外营销 • Landing Page • 名片
QQ Nails & Spa
符号 + 租户名 (White-label)
产品内部，租户品牌优先于平台品牌
Sidebar 展开态 • 管理后台顶栏 • Kiosk 有租户 logo 时
💡
判断逻辑：用户是否已知道这是 Celoria？
— 不知道（登录、Landing、营销）→ 用组合标识
— 知道（已登录、产品内部）→ 用仅符号或符号 + 租户名
— 空间极小（< 48px）→ 用仅符号
— 不知道（登录、Landing、营销）→ 用组合标识
— 知道（已登录、产品内部）→ 用仅符号或符号 + 租户名
— 空间极小（< 48px）→ 用仅符号
03完整场景对照 (Scene Map)
| 场景 | Logo 形态 | 背景 | 尺寸 |
|---|---|---|---|
| 登录页左上角 | 组合标识 (Lockup) | 浅色 #FAFAF8 | 符号 48px + 文字 ~32px |
| 租户选择页左上角 | 组合标识 (Lockup) | 浅色 #FAFAF8 | 符号 36px + 文字 ~24px |
| Sidebar 展开态 | 符号 + 租户名 | 深色 #141210 | 符号 32px |
| Sidebar 折叠态 | 仅符号 | 深色 #141210 | 符号 32px |
| Kiosk / Terminal 欢迎页 | 组合标识 (大) | 深/浅取决于配置 | 符号 64px + 文字 ~42px |
| Landing Page 顶栏 | 组合标识 | 白色 | 符号 40px + 文字 ~28px |
| Favicon | 仅符号 | 透明 | 16~32px |
| App Icon (iOS/Android) | 仅符号（含圆角背景） | #2D2D2D | 1024×1024 导出 |
| 邮件模板 header | 组合标识 | 白色 | 符号 32px + 文字 ~22px |
| 页脚 copyright | 仅文字 | 取决于页面 | 文字 ~14px |
| 加载/Splash | 仅符号 + 动画 | 深色 | 符号 64~96px |
04背景适配 (Background Rules)
celoria
白色 / 浅色背景
文字用 #A88650 Gold
celoria
深色背景
文字用 #E8D7C3 Champagne Gold
celoria
米色 / 暖色背景
文字用 #8D6F3F Dark Gold（对比度更好）
celoria
渐变背景
文字用 #FFFFFF 白色
05硬约束 (Hard Rules)
| 规则 | 数值 |
|---|---|
| 文字最小宽度 | 120px（font-size ≥ 16px） |
| 符号最小尺寸 | 32×32px（Sidebar 最小场景） |
| 符号推荐最小 | 48×48px（品牌指南 P1） |
| 净空 (Clear Space) | 符号四周 ≥ 符号尺寸的 30% |
| 字体 | Poppins SemiBold (600)，letter-spacing: 0.02em |
🚫
禁止：拉伸/压缩比例 • 更改颜色（仅限 Gold/Champagne/Dark Gold/White）• 添加描边/阴影/3D/旋转 • 低对比度背景 • 放在繁杂图片上 • 使用
login-logo.png（已废弃）• 使用 C 字母 icon06品牌指南参考 (Brand Guide Reference)
点击放大查看原始品牌指南：
P1 Logo System
P2 Color System
P3 Typography
P4 Icon & Symbol
P5 Usage Guidelines
P6 Applications