{ 侨客松
文化锚点 — 左花括号开启品牌块，中文品牌名承载侨乡身份
BRAND SPECIFICATION · V1.0
侨客松 Logo 工程设计文档。本文档定义品牌标识的字体系统、色彩规范、结构变体与响应式适配规则，为设计协作与跨平台落地提供统一标准。
侨客松 Logo 工程设计文档。本文档定义品牌标识的字体系统、色彩规范、结构变体与响应式适配规则，为设计协作与跨平台落地提供统一标准。
本文档为「侨客松 QIAO.HACK」品牌标识的工程设计规范，旨在建立字体、色彩、结构、间距与响应式适配的统一标准，确保品牌在网页、移动端、印刷物料及衍生品等全场景中的一致性与专业度。
面向设计师、前端工程师、活动运营人员及外部合作方。任何使用侨客松品牌标识的场景均应参照本规范执行；如遇本规范未覆盖的特殊场景，请联系设计团队确认。
{ } / .）与地域身份（侨 · 江门），构建「本土 × 国际 × 技术」的三维品牌认知。
江门，中国第一侨乡。品牌以「侨」为根，承载百年侨乡的开放精神与全球连接力——技术的人走向世界，世界的资源回到本土。
「客」谐音 Hacker，兼具「访客」之意。黑客精神的核心是开放、创造、突破边界；访客精神的核心是连接、交流、共建社群。双义合一。
松取马拉松之意。Hackathon 是一场智识的马拉松——不是百米冲刺，而是持久的创造、协作与突破。松，是这场长跑中不松懈、不松劲的精神宣言。
Logo 以编程符号为核心视觉语汇：花括号 { } 标识代码块与社群聚合；斜杠 / 借用 Unix 路径与命令行前缀；句点 . 模拟域名风格。三者共同构建「给技术人的品牌」的即时识别。
中文「侨客松」承载文化亲近性与地域认同；英文「QIAO.HACK」接入国际开发者话语体系。中英混排 + 代码符号 = 本土身份与全球视野的结构性同构，而非简单的翻译关系。
品牌字体是 Logo 工程的核心基础设施。侨客松采用双字体体系：英文标识使用 BBH Bartle（几何无衬线、极重字重），中文标识使用 HarmonyOS Sans SC（现代黑体、多字重矩阵）。两套字体均以本地 @font-face 嵌入，确保离线可用与跨平台一致性。
以下 CSS 声明将本地字体文件嵌入项目。所有字体文件与本文档位于同一根目录，使用相对路径引用，无需网络依赖。
/* BBH Bartle — SIL Open Font License 1.1 */ @font-face { font-family: 'BBH Bartle'; src: url('BBH_Bartle/BBHBartle-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } /* HarmonyOS Sans SC — HarmonyOS Sans Fonts License (Huawei) */ @font-face { font-family: 'HarmonyOS Sans SC'; src: url('HarmonyOS_Sans_SC/HarmonyOS_Sans_SC_Thin.ttf') format('truetype'); font-weight: 100; font-display: swap; } /* ... Light(300) / Regular(400) / Medium(500) / Bold(700) / Black(900) 同理声明 */
| 使用场景 | 字体 | font-family | 字重 |
|---|---|---|---|
| Logo 英文标识（QIAO. / HACK） | BBH Bartle | 'BBH Bartle' | 400 |
| Logo 中文标识（侨客松 / 江门） | HarmonyOS Sans SC | 'HarmonyOS Sans SC' | 900 (Black) |
| 标题 / H1—H3 | HarmonyOS Sans SC | 'HarmonyOS Sans SC' | 700—900 |
| 正文 / 段落 | HarmonyOS Sans SC | 'HarmonyOS Sans SC' | 400 |
| 代码 / 数值 / 标签 | 系统等宽字体 | 'SF Mono', 'Fira Code', monospace | 400—500 |
在 CSS 变量中定义字体栈，确保品牌字体不可用时优雅降级至系统字体：
:root { /* 展示字体：Logo英文 + 大标题，BBH Bartle 优先，降级至 HarmonyOS Black */ --ff-display: 'BBH Bartle', 'HarmonyOS Sans SC', system-ui, sans-serif; /* 正文字体：HarmonyOS Sans SC 优先，降级至系统无衬线 */ --ff-body: 'HarmonyOS Sans SC', system-ui, -apple-system, sans-serif; /* 等宽字体：代码、数值、技术标签 */ --ff-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace; }
品牌色彩以「科技蓝 + 墨色」双色系统为核心。蓝色承载国际化技术属性，墨色锚定本土文化身份。高对比度配色确保在深色与浅色背景下均达到 WCAG AA 可读性标准。
:root { /* 品牌色 */ --blue: #0066FF; --blue-deep: #0046B0; --blue-soft: #E6F0FF; /* 墨色系 */ --ink: #16181D; --bg-dark: #0C0E13; }
Logo 采用四层垂直阶梯式排版，左上至右下形成对角线视觉动线。每层元素承担独立语义，共同构成完整的品牌叙事。
编程语言中定义代码块/对象的符号。在 Logo 中作为视觉容器包裹全部品牌信息，隐喻「侨客松是一个开放的技术社群」。
Unix 根目录与命令参数前缀。置于 HACK 之前，赋予品牌动态前冲感，暗示「进入黑客状态」，强化极客身份认同。
域名分隔符与对象方法调用符。QIAO. 末尾的句点暗示 qiao.hack 的互联网原生属性，同时制造节奏停顿。
品牌标识提供完整变体矩阵，覆盖深色/浅色背景、透明/实底、完整版/单体版/工牌版等全场景需求。选择正确变体是品牌一致性的基础。
用于白色/浅色背景的文档、网页、印刷物料。蓝色英文 + 墨色中文。
用于黑色/深色背景的网页深色模式、LED 屏、投影。蓝色英文 + 白色中文。
PNG 透明通道，适用于叠加于任意背景（视频水印、角标、印刷烫印）。
LOGO 无背景 深色.png · 浅色背景用
LOGO 无背景 浅色.png · 深色背景用
提取 QIAO./HACK 核心文字，封装于圆角矩形。适用于 Favicon、App 图标、社交媒体头像等小尺寸场景。
社群活动专属衍生标识，以趣味化文案传递社群文化调性。
Logo 周围必须保留不小于「Q」字高度的安全空间，确保标识不受其他元素干扰。安全空间内禁止放置文字、图形或边缘裁切。
↑ X ↓
← X →
X = 大写字母「Q」的字高（cap height）。安全空间四边均不小于 X。
| 变体 | 载体 | 最小宽度 | 说明 |
|---|---|---|---|
| 完整版（四层） | 屏幕 | 200px | 确保花括号与斜杠可辨识 |
| 完整版（四层） | 印刷 | 40mm | 300dpi 下中文笔画不糊 |
| 单体 Logo | 屏幕 | 32px | Favicon 最小可用尺寸 |
| 单体 Logo | 印刷 | 8mm | 名片/工牌角标 |
四层元素呈左上 → 右下的对角线排列：左上「{ 侨客松」起势，右下「江门 }」收束。符合中文阅读习惯，同时右下角的闭合花括号完成视觉平衡。
英文 QIAO./HACK 占据视觉中心约 60% 面积，是绝对焦点；中文侨客松/江门各占上下两端，形成稳定框架。蓝色与墨色的面积比约为 6:4。
Logo 需在桌面、平板、手机等不同尺寸设备上保持识别度与美观。根据屏幕宽度选择完整版或单体版，并使用流体单位（vw / clamp）实现平滑缩放。
| 断点 | 宽度范围 | Logo 变体 | 排版调整 |
|---|---|---|---|
| Desktop | ≥ 1024px | 完整版（四层） | 默认对角线布局，字号用 clamp() 流体缩放 |
| Tablet | 768 — 1023px | 完整版（四层） | 等比缩小，安全空间按比例缩减 |
| Mobile | < 768px | 单体版（QIAO./HACK） | 省略中文层与花括号，仅保留英文核心 |
| Favicon | 16 — 64px | 单体版图标 | 使用 PNG 矩阵或多尺寸 SVG |
使用 CSS clamp() 函数实现 Logo 字号随视口流体缩放，无需媒体查询即可平滑适配：
