计算机协会视觉识别手册（2026—2027 学年）
适用范围：协会官网、公众号、官 Q、B 站、活动海报横幅、PPT、招新物料、周边。 归口：办公室·宣传组（专管宣传副部长维护）；技术部负责线上落地。 版本：v1.0 · 2026-09-09 · 下次复核：2027 年春季学期换届后。 一句话：元素可以致敬，形象必须原创；对外口径统一，才拿得到宣传评估的高分。
1. 品牌三元素
| 元素 | 象征 | 归属 | 主要用途 |
|---|---|---|---|
| 🐋 鲸 | 探索、AI、DSH 工作流 | 技术部 / AI 线 | 主视觉、AI 模块、加载与搜索动效 |
| 🎸 贝斯 | 低频、训练、坚持 | 竞赛部 / 集训队 | 二次元线、训练叙事、引用与分隔装饰 |
| 🎈 气球 | 战果、荣誉、ICPC | 竞赛部 / 荣誉墙 | 战绩展示、AC 计数、奖励视觉 |
使用优先级：鲸 = 主（60%）→ 贝斯 = 辅（30%）→ 气球 = 点缀（10%）。
连接点：DSH 的 Harness（背带）与贝斯背带同形——一条斜挎带即可把「AI 工具」和「贝斯手」放进同一构图。
Slogan 库（主用第 1 条，其余按场景）
- 深潜，直到 Accepted。
- 低频共振，鲸群同行。
- 在深海写代码。
- 声呐所及，皆是答案。
- 从 WA 到 AC，只差一次下潜。
2. 色卡
2.1 浅色主色（官网默认，沿用现有品牌识别）
| 变量 | 值 | 用途 |
|---|---|---|
--bg |
#f2f7f9 |
页面底色 |
--surface |
#ffffff |
卡片 / 正文容器 |
--ink |
#0c1c24 |
主文字 |
--muted |
#5b7280 |
次级文字 |
--accent |
#0a7292 |
品牌主色（链接 / 按钮 / 表头） |
--accent-soft |
#e2f3f9 |
强调浅底（引用块 / 表头背景） |
--border |
#dde7ec |
1px 描边 |
2.2 深色区块（仅用于首页 Hero、荣誉墙、404、搜索页）
| 变量 | 值 | 用途 |
|---|---|---|
--deep-bg |
#071a26 |
深渊底 |
--deep-surface |
#0d2433 |
深色卡片 |
--deep-ink |
#e8f1f5 |
深色区主文字 |
--deep-muted |
#8fa6b2 |
深色区次级文字 |
--deep-accent |
#2ec5d3 |
声呐青（深色区强调） |
--deep-border |
#1b3a4a |
深色区描边 |
2.3 点缀色
| 名称 | 值 | 用途 |
|---|---|---|
低频紫 --violet |
#7c6cf0 |
贝斯 / 二次元线 / 训练模块 |
| 气球 1 | #ff6b6b |
ICPC 金 / 一等奖 |
| 气球 2 | #ffd166 |
二等奖 |
| 气球 3 | #06d6a0 |
三等奖 / AC 绿 |
| 气球 4 | #9b8cff |
参与奖 |
| 气球 5 | #f78fb3 |
特别奖 / 活动标记 |
配色比例：中性色 60% · 品牌主色 30% · 点缀色 ≤10%。禁止在同一屏出现 3 种以上点缀色。
对比度：正文与底色 ≥ 4.5:1（AA），大标题 ≥ 3:1；深色区块同样适用。改色后必须复测。
3. 字体与字号
| 用途 | 字体 | 字号 / 行高 |
|---|---|---|
| 中文正文 | 系统栈（system-ui, "PingFang SC", "Microsoft YaHei"）或思源黑体 |
16px / 1.7 |
| 中文标题 | 阿里巴巴普惠体 Heavy 或站酷庆科黄油体（物料用） | h1 clamp(1.8→2.6rem)、h2 1.3→1.7rem、h3 1.1rem |
| 引用 / 档案 | 霞鹜文楷 | 15—16px / 1.8 |
| 代码 / 数字 | JetBrains Mono（等宽） | 14—15px，数字用 font-variant-numeric: tabular-nums |
约定：官网不加载外部字体（校园网首屏优先）；物料可嵌入字体，但须确认商用授权。
4. Logo 规范
主标：现有圆徽章（public/img/logo-v2-{48,96,192,512}.png）。
| 项 | 规范 |
|---|---|
| 最小尺寸 | 数字场景 ≥ 32px；印刷 ≥ 12mm |
| 安全区 | 四周留出 Logo 高度的 25% 空白，不压边、不加描边 |
| 背景 | 浅色底用原版；深色底用白底徽章或加 1px 浅描边 |
| 禁用 | 拉伸变形 / 换色 / 加投影 / 叠加文字 / 旋转 / 低分辨率放大 |
荣誉徽章（新增，用于战绩与证书物料）：鲸尾 + 声呐弧 + 气球三元素组合，不得替代主标，仅作“战绩标记”出现在荣誉墙、获奖公告、证书角标。
换标流程：新 SVG → 导出 48/96/192/512 PNG 覆盖同名文件 → npm run check && bash scripts/deploy.sh。
5. 图形母题与图标
| 母题 | 形状 | 使用场景 |
|---|---|---|
| 声呐波 | 同心弧 | 加载态、搜索、分区标题装饰 |
| 鲸尾 | 剪影 | Logo 徽章、列表 bullet、favicon |
| 气泡 | 大小不一的圆 | hover 动效、空状态插画 |
| 频谱条 | 高低竖线 | 统计数据、音轨式装饰 |
| 气球 | 带细线的圆 | 荣誉条目、AC 计数 |
| 音孔曲线 | 贝斯 f 孔 | 引用块边饰、分隔线 |
| 斜挎带 | 斜线带 | 页眉装饰、卡片角标、进度条 |
| token 方块 | 小方块 | 代码块、AI 模块标记 |
导航图标：动态=声呐波 · 活动=气球 · 项目=航图 · 资源=海图 · 成员=鲸群 · 档案=鲸落 · 加入=下潜入口。
6. 吉祥物双人设
| 🐋 鲸娘（AI 侧） | 🎸 贝斯手（人侧） | |
|---|---|---|
| 定位 | DSH 的化身、协会 AI 助手 | 集训队学姐、训练与坚持的化身 |
| 视觉 | 深海蓝 + 声呐青、耳鳍耳机、尾鳍、斜挎带、发梢数据流 | 雾霾蓝紫、长直发 + 发带、贝斯、低频紫 |
| 语气 | 直接、精确、偶尔毒舌 | 温和、少话、可靠 |
| 对应价值观 | AI 出初稿 | 人做判断 |
OJ 判题表情包（一套 7 个，群聊/官网/周边通用）
| 判题 | 表情 |
|---|---|
| AC | 鲸娘举气球，眼睛发光 |
| WA | 贝斯手皱眉，指测试点 |
| TLE | 鲸娘裹被睡着，时钟转动 |
| MLE | 鲸娘被气泡撑爆 |
| RE | 贝斯手摔倒，琴线缠身 |
| CE | 鲸娘举语法书敲头 |
| 1A / First Blood | 鲸娘披彩带，气球爆开 |
规范：吉祥物必须原创（可 AI 生成 + 人工修），不得描摹任何既有版权角色；不得用于任何商业售卖。
7. 版面与组件
| 项 | 规范 |
|---|---|
| 内容宽度 | --max: 920px（正文）；整幅海报 1080×1440（3:4）或 1920×1080（16:9） |
| 圆角 | 卡片 14px；按钮胶囊（999px）；图片 10px |
| 间距节奏 | 8 的倍数：区块间距 48/64px，卡片内边距 20—24px |
| 按钮 | 主按钮实心品牌色；次按钮描边；禁用态降透明度不降可读性 |
| 卡片 | 白底 + 1px 描边，hover 抬升 2px + 描边转品牌色 |
| 表格 | 可横向滚动；表头浅底、不换行；数字右对齐 |
| 引用块 | 左侧 3px 品牌色竖线 + 浅底（可加音孔曲线边饰） |
| 表单 | 聚焦 2px 品牌色外描边；错误态用红色文字而非仅靠颜色 |
8. 动效规范（只允许三处）
- 声呐脉冲：Hero 区 2.5s 一次，纯 CSS；
- 气泡上浮：卡片 hover 0.6s；
- AC 音效：可选、默认关闭，仅用户主动触发。
全部必须在 @media (prefers-reduced-motion: reduce) 下关闭；禁止自动播放音视频、禁止闪烁。
9. 文案语气与词库
| 语气 | 场景 | 例句 |
|---|---|---|
| 深海冷静体 | 技术 / 项目 / 文档 | 「下潜深度 3200m：OJ 题库重构完成」 |
| 迷子温柔体 | 招新 / 新生 / 日记 | 「迷茫的时候，先按下第一个键。」 |
| 竞赛热血体 | 赛事 / 荣誉 / 集训 | 「三小时，五个气球，一队人。」 |
词库：下潜、共振、声呐、鲸群、洋流、低频、白噪、调参、鲸落、气球、Accepted、罚时、榜单、谱面、节拍器、气泡、发光生物。
招新主文案
我们是一群在深海里写代码的人。 有人拿 ICPC 的气球，有人调 AI 的参，有人只是喜欢贝斯的低频。 你不需要会什么，只需要愿意下潜。
10. 物料规范
| 物料 | 规格 | 要点 |
|---|---|---|
| 活动海报 | 1080×1440 | 上方 1/3 主视觉（深色区块），下方信息区白底 |
| 横幅 / 展架 | 2000×800 | Logo 左、标题中、二维码右；主色不超过两色 |
| 招新单页 | A4 双面 | 正面三元素 + slogan，背面部门与二维码 |
| 贴纸 | 5×5cm 圆/方 | 鲸尾 / 气球 / 频谱条 三款 |
| PPT 模板 | 16:9 | 封面深色、内页白底、页脚统一色条 |
| 证书 / 奖状 | A4 横 | 荣誉徽章放左上，正文居中，落款与日期右下 |
| 周边 | — | 亚克力立牌、徽章、贝斯拨片、键帽（AC 表情） |
11. 合规红线（违反按考核处理）
- 版权角色：长崎素世 / MyGO!!!!! 等为 Bushiroad 版权角色，官网与公开物料不得使用官方立绘或截图；仅可做元素致敬（贝斯、低频、雾霾蓝紫、「迷子」叙事）。二创图限内部群聊与线下同人活动。
- DeepSeek 鲸鱼：品牌形象，官方站使用需谨慎；只用自创鲸鱼娘，不描摹官方图。
- AI 生成图：官网/公众号发布必须标注「AI 生成 · 协会宣传组」，并人工审核；不得用生成图冒充实拍活动照。
- 正式文件：获奖证明、盖章文件、学分认定材料必须人工开具（沿用组织方案第六章）。
- 对外口径：统一以本手册为准；社管委发布新版宣传要求后 3 日内更新本手册。
12. 一页速查（可直接打印）
主色 #0a7292 ｜ 浅底 #e2f3f9 ｜ 底 #f2f7f9 ｜ 字 #0c1c24 ｜ 次字 #5b7280 ｜ 描边 #dde7ec
深色 #071a26 / #0d2433 / #e8f1f5 / #2ec5d3 / #1b3a4a
点缀 低频紫 #7c6cf0 ｜ 气球 #ff6b6b #ffd166 #06d6a0 #9b8cff #f78fb3
比例 中性 60% · 主色 30% · 点缀 ≤10%
字体 正文 16/1.7 · 标题 clamp(1.8→2.6rem) · 代码 JetBrains Mono
圆角 卡片 14px · 按钮胶囊 · 图片 10px
间距 8 的倍数（区块 48/64，卡片内 20—24）
三元素 鲸 60% · 贝斯 30% · 气球 10%
Slogan 深潜，直到 Accepted。
红线 不用版权角色立绘 · 不描摹官方鲸 · AI 图标注 · 正式文件人工开具关联：docs/migration-report-2026-09-09-main-site-cutover.md（站点现状）、docs/宣传评估对标清单-2026-2027.md（宣传评估对标）、AGENTS.md（线上实现约定）。