Skip to content

Brand Guidelines

Jump to bottom
Haisu Zuo edited this page Oct 9, 2026 · 1 revision

康冠时代 CROWN TIME · 品牌系统 v1.0

Historical design reference. This page records the design state at the time it was written. The versioned design assets and current product implementation are authoritative. Paths in this page are relative to the original asset directory design/brand.

注册商标：第 17528858 号（注册人：深圳前海康冠时代科技有限公司，2016-11-14 注册，有效期至 2026-11-13） 本文件是标志精修版的设计规范与使用手册。配套可视化指南见 brand-guide.html。

0. 本次精修做了什么

项目 原稿 精修版
图形标边缘 位图缩放、边缘模糊 纯矢量多边形，斜率统一 1:3，全对齐
文字 来源不明的商用黑体（有侵权风险） 思源黑体 Bold（SIL OFL 1.1，免费可商用），已转轮廓为纯路径
主色 #2660B5（略灰） #1F5CC4 康冠蓝（同色相，提亮提饱和，屏幕更利落）
文字色 #404040 #1D2733 墨色（更精神，对比度 15.1:1）
组合关系 图形+「康冠时代」+「CROWN TIME」横排 完全保留，与注册证一致
版本 仅一张 PNG 横版/竖版/图形标 × 彩色/单色黑/反白 + favicon 全套

关键事实：注册证上的商标是黑白稿，未声明颜色。按商标法实践，黑白注册商标可以任意颜色使用，因此蓝色版、未来的任何配色版都在注册保护范围内；单色黑横版（logo-horizontal-mono.svg）即对应注册证形态，合同、资质、备案等正式法律场景请用它。

1. 资产清单

design/brand/
├── logo/
│   ├── svg/   logo-horizontal.svg          彩色横版（主标识，官网/文档首选）
│   │          logo-horizontal-mono.svg     单色黑横版（法律/正式场景，同注册证）
│   │          logo-horizontal-reverse.svg  反白横版（深色背景专用）
│   │          logo-stacked.svg             彩色竖版（登录页/启动页/名片）
│   │          logo-icon.svg                图形标（彩色）
│   │          logo-icon-mono.svg           图形标单色黑（Safari pinned tab 用 mask-icon）
│   │          logo-icon-reverse.svg        图形标反白
│   └── png/   以上各版 1x/2x/4x 位图（图形标另有 8x）
├── favicon/
│   │          favicon.svg                  现代浏览器矢量图标（16px 优化版：横条-柱间隙加宽）
│   │          favicon.ico                  16+32+48 多尺寸 ICO（旧浏览器兜底）
│   │          favicon-16/32/48.png
│   │          apple-touch-icon.png         180×180 蓝底白标圆角砖
│   │          icon-192.png / icon-512.png  PWA / Android
│   │          icon-tile.svg                图标底板源文件
├── BRAND.md（本文件）
└── brand-guide.html（可视化品牌指南 + 应用方案）

所有 SVG 均为纯路径、零字体依赖，任何环境打开都一致，无字体侵权面。

2. 色彩系统

主色阶（康冠蓝 Crown Blue，色相 260° 家族）

色阶 HEX oklch 用途
50 #F0F5FD oklch(0.969 0.012 259.8) 浅色强调底、hover 底
100 #DCE8FA oklch(0.927 0.028 258.4) 选中底、标签底
200 #ADC8F0 oklch(0.826 0.064 258.1) 边框强调、图表次系列
300 #7AA3E3 oklch(0.711 0.104 259.1) 禁用态、图表辅助
400 #4B7FD6 oklch(0.602 0.144 260.1) 深色底上的链接/图标
500 #1F5CC4 oklch(0.499 0.174 260.5) 主色：标志、主按钮、链接（白底对比度 6.2:1，过 AA）
600 #1A4FA9 oklch(0.449 0.155 260.5) hover
700 #15418C oklch(0.393 0.134 260.5) active、深色标题强调
800 #10336E oklch(0.334 0.110 260.3) 深色区块
900 #0B2453 oklch(0.273 0.091 261.5) 页脚/深色 hero 底（白字对比度 15.1:1）

点缀色（冠金 Crown Gold）— 严格限量 ≤5%

色阶 HEX oklch 用途
500 #C29A3B oklch(0.706 0.121 85.6) ® 角标、证书/资质区、官网 hero 一处点缀
100 #F5EBD4 oklch(0.942 0.032 87.3) 金色标签底

规则：金色只出现在「品牌信任」语境（注册商标角标、资质、证书），不进产品操作界面，不与蓝色相邻大面积使用。

中性色

名称 HEX 用途
Ink 900 #1D2733 正文/标题（白底对比度 15.1:1）
Slate 500 #5A6B85 次要文字（5.4:1，过 AA）
Line 200 #E3E8F0 分割线、卡片边
Mist 50 #F5F7FB 页面底
White #FFFFFF 卡片/反白文字

色彩配比（页面级）

白/中性底  ████████████████████  ~70%
康冠蓝     ████                  ~15%（标志、主行动点、链接）
深蓝区块   ██                    ~10%（页脚、hero 带）
墨色文字   ██                    ~4.9%
冠金       ▏                     ≤0.1%（一处即可）

3. 字体系统（全部开源授权，零侵权风险）

角色 字体 授权 说明
标志文字 思源黑体 Bold（已转轮廓） SIL OFL 1.1 只存在于 SVG 路径中，不依赖字体文件
中文正文/标题 思源黑体 SC（Source Han Sans SC / 思源黑体） SIL OFL 1.1 免费可商用、可嵌入网页
西文/数字 Manrope SIL OFL 1.1 几何无衬线，与思源黑体气质匹配
等宽（消息ID/时间戳/日志） JetBrains Mono SIL OFL 1.1 存档产品的数据感

不要再用于品牌物料的字体：PingFang SC（苹果系统字体，许可不允许嵌入商标/网页字体）、微软雅黑（方正授权，商用需付费）、原 logo 来源不明的黑体。

Web 字栈建议（官网与产品）：

--font-brand: "Manrope", "Source Han Sans SC", "思源黑体", system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, monospace;

思源黑体自托管或国内 CDN（如 fonts.loli.net 的 Noto Sans SC，与思源黑体同源同授权）。

4. 标志使用规范

4.1 净空区

以图形标中「方块」的边长为 x。标志四周净空 ≥ x；任何文字、边框、其他图形不得进入。

        ←x→
   ┌───────────────────┐
   │  ▐█▌   康冠时代      │  ↑
   │  ▐█▌   CROWN TIME   │  x
   └───────────────────┘  ↓

4.2 最小尺寸

版本 屏幕 印刷
横版组合 宽 ≥ 120px 宽 ≥ 30mm
竖版组合 宽 ≥ 96px 宽 ≥ 24mm
图形标 ≥ 16px（favicon 即 16px 优化版） ≥ 5mm

低于最小尺寸时只用图形标，且使用 favicon 优化版（间隙加宽）。

4.3 背景规则

  • 白/浅色底（Mist 50、White、Blue 50/100）→ 彩色版
  • 深色底（Blue 800/900、admin 深色顶栏 #001529、照片深色区）→ 反白版
  • 正式文书/传真/合同 → 单色黑版
  • 禁止：彩色版直接放在 Blue 500 或相近明度的蓝底上（标志会消失）

4.4 组合与拆分（对应需求「图形和文字允许分开用」）

场景 用法
产品深色顶栏、官网导航 横版组合（深色顶栏用反白版），高 24–28px
浏览器标签/书签/App 图标/头像 图形标单独（favicon、icon-tile）
登录页、启动页、PPT 封面 竖版组合居中
加载动画/水印/文档页眉小标 图形标单独，透明度 8–16%
页脚版权行 「© 2026 深圳前海康冠时代科技有限公司」是公司名文本，不是标志，直接排版即可，无需图形
「365」副标题 不进入标志 lockup（注册证无 365）。如保留，以文本形式放在标志旁：康冠时代 · 企业微信会话存档365，字号 ≤ 标志文字 50%，颜色 Slate

4.5 禁止事项（保护商标显著性，也是「不脱离注册证组合」的操作化）

  1. 不拉伸/压扁/旋转/倾斜
  2. 不改变图形标三元素的相对位置与比例
  3. 不把「康冠时代」换成其他字体重排（资产里已是轮廓路径）
  4. 不在标志上加描边/阴影/渐变/发光
  5. 不把图形标与文字重排成注册证之外的组合（如文字在图形左侧）
  6. 不在低对比或杂乱图片背景上使用（必须使用时垫白色或深蓝纯色块）
  7. 不把「企业微信」字样做进标志（腾讯商标，只作描述性文字另排）

5. Favicon 与 Web 引用

把 favicon/ 目录放到站点根（或 /static/brand/），<head> 加入：

<link rel="icon" href="/favicon/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/favicon/apple-touch-icon.png">
<link rel="mask-icon" href="/logo/svg/logo-icon-mono.svg" color="#1F5CC4">
<link rel="manifest" href="/site.webmanifest">

site.webmanifest：

{
  "name": "康冠时代 · 企业微信会话存档",
  "short_name": "康冠存档",
  "icons": [
    { "src": "/favicon/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/favicon/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#1F5CC4",
  "background_color": "#FFFFFF",
  "display": "standalone"
}

6. 产品页应用方案（企业微信会话存档 admin）

现状：深色顶栏 #001529 高 44px，纯文字标题；base.css 是工具型样式无品牌层。

方案（改动最小、即刻可用）：

  1. 顶栏左侧放反白横版 logo，高 24px，margin-right: 12px，后接产品名文本「企业微信会话存档」（13px，Slate 浅色 #8CA0B3）。
  2. 页面 <title> 前加 favicon 引用（上方代码），浏览器标签立刻有品牌识别。
  3. 登录页（如有）用彩色竖版居中，宽 180px，下方产品名 + 一句描述性文案。
  4. 中期对齐项（不影响本方案落地）：把顶栏 #001529 换成品牌 Blue 900 #0B2453、把主色 #1890ff 换成 Crown Blue 500/600，产品即与品牌同色系。
<!-- 顶栏示例 -->
<div class="top-bar">
  <img src="/static/brand/logo-horizontal-reverse.svg" alt="康冠时代" style="height:24px">
  <span class="top-bar-product">企业微信会话存档</span>
  ...
</div>

7. 官网应用方案（static_site/company_homepage）

现状：导航用占位图标（代码括号 SVG）+ 公司全名文本；主色 #4c56d6（薰衣草紫，与品牌蓝冲突）。

方案：

  1. 导航：占位 .brand-mark 替换为彩色图形标或横版 logo（高 28px）；品牌名保留公司全名文本。
  2. Hero：左侧竖版 logo（宽 140px）+ 标语；或保持现状排版、仅在首屏右上角放图形标水印（透明度 10%）。
  3. 主色迁移：--color-primary: #4c56d6 → #1F5CC4，hover #3c46b8 → #1A4FA9；四个彩色 icon-tile（蓝/绿/橙/紫）统一为康冠蓝单色系（蓝 500 主、蓝 100 底），官网立刻「像一个公司的产品」。
  4. 页脚：深色区块（Blue 900）+ 反白横版 logo + 公司信息 + 备案号 + 「康冠时代®是深圳前海康冠时代科技有限公司的注册商标」。
  5. favicon 全套接入（第 5 节代码）。
  6. 如官网涉及本产品，加描述性免责声明：「本产品与企业微信官方无关，『企业微信』为腾讯公司注册商标」。

8. 商标法律备注（重要）

  1. 续展提醒：注册证有效期至 2026-11-13，现在已在续展窗口期内（期满前 12 个月可办）。请尽快通过商标局或代理提交续展申请（官费数百元），逾期还有 6 个月宽展期（需额外滞纳金），再逾期商标将被注销。这是本次品牌工作中发现的最紧急事项。
  2. 注册为黑白稿 → 蓝色版及任意配色均在保护范围内，但单色黑横版是注册证的标准形态，正式法律文件用它。
  3. 精修版（思源黑体轮廓）与注册证字形存在合理差异，商业使用无妨；若精修版成为长期使用的主形态，建议就精修版另行提交一件注册申请（防御性，费用低），同时保留原注册的使用证据（官网、发票、合同上的使用记录）以防三年不使用撤销风险。
  4. ® 标注：在首次出现处用「康冠时代®」即可，不必每次都标；® 只用于已注册的标志本体，不要标在「365」「企业微信会话存档」等未注册名称上。
  5. 字体合规：全套品牌字体均为 SIL OFL 1.1（允许商用、嵌入、转轮廓、修改，且 OFL 明确允许用于标志/商标设计）。思源黑体版权归 Adobe/Google，按 OFL 使用无需署名，但不得单独转售字体文件本身。
  6. 「企业微信」为腾讯注册商标：产品名中仅作描述性使用（「适用于企业微信的会话存档」语义），官网与 README 需带免责声明，标志本体不含该字样。

9. 待确认事项（与开源计划联动）

  1. 英文 slug/仓库名：建议 crowntime-archive（短、可读、与 CROWN TIME 对应；备选 crown-time-archive、kgsd-archive）。
  2. 「365」是否留副标题：建议保留为文本副标题（不进 lockup），开源仓库名中可省略。
  3. 官网实体字段：品牌化已定为选项 A（公开实体），地址/电话/邮箱按现有 company_homepage 保留即可。

康冠时代会话存档 Wiki

首页

用户文档

自托管安装与升级 配置说明 常见问题 开始使用 · 产品功能 用户指南 · 企业微信接入 接入前准备 · 故障排查 价格与套餐 · 联系人头像

开发者文档

架构概览 API 参考 · 数据模型 部署参考 · 运维参考 贡献与本地开发 开发者专题 · 研究档案 设计档案 仓库文档全集索引 · 独立 QA 提示词

项目来时路

产品演化史 独立开发回忆 历史文档记录

项目公告

项目公告索引

版本记录

v1.1.0 GitHub Release v1.0.0 产品基线详细记录 · GitHub Release

源代码与 README · 架构决策记录

Clone this wiki locally