# HSKB V14.2 全量视觉识别与应用规范

> **版本定位**：V14.2 是 V14.0 Identity Master 之上的表达、内容、数字、应用与治理扩展。它不改变 H 的几何、颜色、软边、偏移或权利状态。  
> **适用对象**：品牌负责人、设计师、网站/前端、内容编辑、摄影师、活动供应商、合作方与审批人。  
> **研究日期**：2026-09-01；公开案例只作方法研究。

## 1. 一页原则

HSKB 的识别来自一个稳定核心和一套有节制的舞台：同一枚红色 H、清楚的方格秩序、宽留白、真实内容、可核验展签。每次设计先回答五个问题：

1. 受众是谁，阅读距离和设备是什么？
2. 这是一张需要被呈现的作品、一段需要被连接的信息，还是一项需要被证明的结果？
3. 画面唯一主角是什么？红色唯一信号是什么？
4. 事实、图片、数字、合作关系和字体是否已有负责人及授权？
5. 交付后谁能在六个月内复用、更新和审计它？

如果无法回答，状态保留为 `brief-open` 或 `layout-master`，不要用装饰填空。

## 2. 身份架构：四层与两种版本号

| 层 | 内容 | 可否升级 |
|---|---|---|
| Evidence | 用户提供的原始 PNG、SHA、ICC、mask、权利记录 | 只可追加证据，不可替换 |
| Identity Master 14.0 | H、组合标、中文/英文锁定资产、数字图标 | 不可修改；获得正式授权源才另开 master |
| Expression 14.2 | Gallery Frame、网格、色彩比例、字体层级、摄影、动效、内容组件 | 可独立版本化、测试和回滚 |
| Applications 14.2 | 72 个 SVG 母版、网站组件、海报、名片、文具、空间和生产文件 | 按触点、渠道和供应商迭代 |

文件名中的 `v14` 表示身份母版；`v14.2` 表示应用/表达层发布。不能因为网页改版就把 logo 文件重命名成另一套 master。

## 3. H 的证据与放置

- 参考母图 `1146 × 1132`；红色覆盖边界 `[64,1084) × [61,1080)`，即 `1020 × 1019`。
- 上切口 `[568,581) × [61,401)`、下切口 `[568,581) × [740,1080)`，均 `13 × 340`；中桥 `339`。
- 原图约向右 1 px、向下 4.5 px 的偏移是事实。任何 CSS `translate`、自动光学居中或导出软件的“对齐到画板”都不能改写它。
- 完整组合标最小建议：屏幕宽 `160 px`，印刷宽 `42 mm`；独立 H 最小 `28 px / 8 mm`，真实设备和工艺仍需测试。
- 完整标净空至少 `0.5H`；合作伙伴间距至少 `0.75H`。净空从可见红区/组合标高度计算，不从文件画板边界猜测。
- 浅底使用 `hskb-v14-primary.svg`，深底使用 `hskb-v14-reversed.svg`；H 在两者中都必须是 `#FF2F2D`。

禁止：改成黑/白/灰/金属/渐变 H；描边、投影、旋转、压扁、切片、圆角化、裁切、把 H 当照片遮罩或用 CSS 矩形重建。

## 4. 色彩比例与对比

核心色只保留七种：Reference Red `#FF2F2D`、Gallery Ink `#002E39`、Pure White `#FFFFFF`、Mat White `#F7F7F4`、Frame Silver `#E4E7E5`、Graphite `#40525A`、Soft Rule `#CBD2D1`。`#C7FF3D`、`#FF4B3E` 等历史色不进入当前生产代码。

### 4.1 使用决策

- **Exhibition**：Gallery Ink 可占大面积，Reference Red 只负责 H 或一处索引；白色衬纸提供停顿。
- **Connect**：Mat White/White 为主，红色只用于一个 CTA、编号或边界；正文使用 Ink/Graphite。
- **Proof**：先保证表格、数字和来源可读；红色只高亮一个指标，不能把所有数字都标红。
- Reference Red 不作为小字号正文色。对比度用实际字号、字重和 WCAG 工具测量；颜色名称不能替代测量。
- 辅助活动色如果确有必要，只能进入独立内容区，必须记录色值、用途、撤回日期，不得与红色争夺识别。

### 4.2 强制颜色与黑白输出

在 `forced-colors: active` 下保留文本语义、焦点和边界；不要依靠红色传达成功/错误。黑白办公室若无法印出红色，不自行转黑 H，改用不含标志的文字版并申请工艺批准。

## 5. 网格、比例与间距

### 5.1 响应式栏数

| 视口 | 栏数 | 外侧留白 | 沟槽 | 典型用途 |
|---|---:|---:|---:|---|
| 1440+ | 12 | 48–96 px | 24 px | 首页、案例、桌面 Hero；正文最大 1360 px，1440 为视口检查 |
| 1024–1439 | 12 | 48 px | 20 px | 平板横向、报告预览 |
| 768–1023 | 8 | 32–48 px | 20 px | 平板、演示文稿 |
| 320–767 | 4 | 20–24 px | 16 px | 手机、社交与导视近读 |

所有尺寸回到 8 px 基础单位：8、16、24、32、48、64、96、128。A4/A2 将其换算为 2/4/6/8/12 mm 的近似节奏，但最终以成品尺寸和印刷可读性为准。

### 5.2 生成式而非装饰性方格

方格用于对齐、分组、裁切和状态，不用于把 H 拆解成图案。允许使用 3×3、4×6、8×8 或 12 栏作为内容容器，前提是：

- 每个模块能说明自己的信息角色；
- 线宽统一为 `1 px Soft Rule`，关键边界才用 Ink；
- 只设置一个高饱和红色信号；
- 手机端能退化为 4 栏，不让小格变成不可读的碎片；
- 组件离开该网格后仍能被键盘、屏幕阅读器和打印版理解。

## 6. Gallery Frame 五层与使用阈值

从外到内：环境留白 → Frame Silver/白框 → Mat White 衬纸 → Gallery Ink/白色画芯 → Caption 展签。完整 Frame 只在内容值得“呈现、归档或证明”时使用。

### 6.1 Frame 配方

1. 画框厚度至少占数字画布短边的 3.5%，印刷按材料打样。
2. 衬纸至少占画芯短边的 4%，不要用阴影替代真实留白。
3. 画芯只放一个主角：一张照片、一个项目成果、一个数据或一条主张。
4. 展签固定包含标题、角色、日期、来源和状态；限制/概念图必须可见。
5. 动效只展开 Frame、揭示内容或滑入展签；H 不参与变形、闪烁和路径动画。

### 6.2 不使用完整 Frame 的情况

普通导航、表单、FAQ、错误页、长文章正文、发票和快速通知使用 Connect 的边界与网格即可。厚框会增加滚动和印刷成本，不能成为所有内容的默认装饰。

## 7. 字体与多语言

- 标志字形已转曲，永远不重新输入。
- 编辑中文优先 Noto Sans SC / 思源黑体；英文优先 Arial / Helvetica Neue，除非项目持有 Univers Web/App 授权。
- 展示标题：中文 600–700，行高 0.98–1.12；英文 700，行高 0.92–1.05；正文 400–500，行高 1.65–1.85。
- 页面只设一个 H1；二级标题通过尺寸、留白和共同左边线建立，不用多种颜色抢层级。
- 中英双语先确定主语言，再将次语言放在下一行、旁栏或展签；不要为逐字对齐压缩到难以阅读。
- 压力测试字符串：超长中文标题、英文复合名、电话号码、地址、日期、`WWWW`/`iiii`、阿拉伯数字和混排标点。所有组件都要有折行和截断策略。
- 商业字体不随交付包分发。记录字体名称、版本、授权主体、用途（桌面/Web/App/服务器）和替代字体。

## 8. 摄影、插画与概念图

影像叙事按远景（地点）、中景（互动）、近景（材料/动作）组织；同一作品只选自然全彩或中性黑白一种处理。人物、未成年人、学生作品、场地和伙伴均需授权台账。

概念图必须在图注和替代文本中写“概念视觉 / 非真实活动现场”。AI 生成图不得冒充真实学生、真实活动、真实成果或真实空间。图片裁切遵循焦点优先：眼睛、手势、原型和屏幕信息不得被框线切断；Logo 不叠在繁忙影像上。

插画可采用线性、方格或材料感，但不得描摹第三方 H、帽子、播放按钮、括号、圆形或专属纹样。每一套插画写明作者、许可、版本和停用日期。

## 9. 语气、内容与博客

HSKB 的声音是可信、开放、进取、清晰、有人情味。每一篇文章先说事实，再说意义，最后给下一步；不使用成绩保证、天才神话、政府背书暗示或空泛的“颠覆/顶级/无限可能”。

### 9.1 博客卡片合同

每张卡必须有：栏目眉题、标题（中文建议 12–24 字）、摘要（40–80 字）、作者/机构、发布日期、阅读时长、内容类型、图片替代文本、来源/许可状态和唯一 URL。卡片只高亮一个动作，标签不超过三枚。

### 9.2 文章页合同

文章页的首屏包含标题、摘要、作者、日期和内容状态（筹建中/已发布/档案）；正文采用 66ch 左右行长，引用不超过必要长度并附来源；数据段落同时写定义、范围、时期、样本、负责人和限制；相关内容按主题而非“热门”排序。

### 9.3 状态字典

`concept`（概念）、`pilot`（试点）、`active`（运行中）、`archived`（归档）、`rights-review`（权利复核）五种状态用文字和图标同时表达。未签约的伙伴、顾问、场地和上线时间不能写成既成事实。

## 10. 海报与传播系统

### 10.1 三个主比例

| 比例 | 安全区 | 主任务 | 建议主角 |
|---|---:|---|---|
| A2/A1 | 四周 ≥ 0.5H，二维码距边 ≥ 24 mm | 远视识别 | 主张或单一作品 |
| 4:5 | 72 px | 社交信息与成果 | 标题 + 一项证据 |
| 9:16 | 96 px，上下控件区另留 | Story/短视频封面 | 一条短句 + 行动 |

每个系列先定义固定信息区（品牌、日期、地点、编号），再让画芯变化。LDF 之类案例显示长期红色资产可以承载年度主题；HSKB 只借“稳定核心＋可变表达”的方法，不复制其字形、图案或红色值。

### 10.2 海报检查

- 3 秒远读测试：距离 3 m 能读出主张、日期或行动；
- 低亮度和灰度测试：即使红色不可见，层级仍成立；
- 平台裁切测试：头像、标题、字幕和按钮不被 UI 遮挡；
- 二维码在目标距离、设备和最终落地页上可扫；
- 画面中不超过一个主要 CTA，不将完整信息只放在图片内。

## 11. 名片、文具、报告与证书

名片只保留必要联系方式，二维码和隐私数据分区；中文/英文正面不强行塞进同一行。信纸、发票和新闻稿固定页眉、编号、日期、法定文字和页码，正文不使用红色。证书把姓名、项目、编号、签署人、日期和验证地址放在受控数据源，示意编号不能直接发布。

报告封面用一个标题/图像主角，目录采用 6 栏或 8 栏，数据页只强调一组核心指标；任何图表都同时提供单位、来源、时期、样本和限制。PDF/X、字体嵌入、黑版、透明度、出血和装订爬移交给供应商/制作人确认。

## 12. 网站视觉系统

网站分为 Foundations（token、Logo、网格、类型）、Molecules（导航、按钮、字段、展签、卡片）、Modules（Hero、案例、博客、Proof、下载、表单）、Pages（首页、项目、洞察、VI、法律）四层。每层都有可复用合同和状态，不在页面内临时写一套颜色。

### 12.1 Header/Footer

桌面 Header 80–96 px，完整母标宽 216–240 px（不得低于 160 px）；手机使用独立 H 并保留可访问名称。导航不超过六项；当前页用 `aria-current` 和文字/边界共同表达。Footer 同步版本化 Logo、地址、隐私、儿童保护、权利提示和下载状态。

### 12.2 控件

按钮最小高度 48 px、焦点环 2 px Reference Red、触摸目标至少 44×44 px。红色按钮上的文字用 Ink；禁用态不能只靠降低对比度传达。表单错误在字段旁显示文字并关联 `aria-describedby`；成功/错误不能只用红绿颜色。

### 12.3 状态与数据

每个异步模块定义 `loading / empty / error / success / archived` 五态；状态文案、重试、键盘顺序和屏幕阅读器通知写在组件合同中。加载骨架不使用 H 的拆解动画。空状态给出下一步，不用无意义插画填充。

## 13. 动效

默认 160/220/300 ms，缓动 `cubic-bezier(.2,.7,.2,1)`，位移低于 16 px，可中断。允许 Frame 展开、内容揭示、展签滑入和索引变化；H 始终静止、等比、红色。`prefers-reduced-motion` 下立即显示内容、取消自动轮播，并保证焦点不被移动。视频片尾至少停留 2–3 秒，提供字幕和静态版本。

## 14. 合作与背书

合作区独立于 HSKB 识别区，以真实关系词（主办/联合主办/支持/赞助/场地伙伴）说明角色；伙伴使用对方批准文件，按视觉高度而非文件边界平衡。单一伙伴距 HSKB 至少 0.75H，多伙伴顺序按签署协议。不得用共同边框、等大、红色铺底或并排位置暗示不存在的背书。

## 15. 空间、导视与周边

先测量场地、观看距离、灯光、拼缝、摄像机、消防、荷载、疏散、无障碍与触觉/Braille，再选母版。Backdrop、媒体墙、接待台和讲台要在站人和镜头中实测；导视优先方向、目的地和字高。周边先看真实材料、曲面、耐洗、耐磨和红色还原；无法保留切口/比例/红色就停产并申请工艺批准。

## 16. 无障碍与本地化最低线

- 目标 WCAG 2.2 AA；正文、链接、焦点、表单、图表和错误状态逐项测量。
- 图片提供准确 alt；装饰性 H 的 alt 为空，完整母标 alt 为“博格港湾 Harbor Stem”。
- 键盘顺序与视觉顺序一致，Skip link 可用，菜单 Escape 关闭并还焦点，焦点不被 sticky Header 隐藏。
- 支持 200% 缩放、320 px 宽、横屏/竖屏、中文长串和英文长串；不依赖 hover 才能取得信息。
- 提供中文主内容和等义英文；日期、数字、地址、电话号码和隐私同意按本地法规/业务确认，不擅自翻译法定文字。

## 17. 性能与安全

Logo 优先 SVG，图片使用 WebP/AVIF 并写尺寸，首屏只预加载一个主角。压缩内嵌 PNG 与重复模板，避免把 media wall 等大文件直接塞进首屏。禁止外链字体、未知脚本、未经审计的第三方嵌入；下载文件标明版本和 SHA。表单不在浏览器或日志保存敏感个人数据，二维码遵循最小披露。

## 18. 版本、文件名与归档

文件名格式：`hskb-[surface]-[role]-[size]-v14.2-[date].[ext]`；大小使用真实单位，语言用 `zh/en/bi`，状态用 `draft/review/approved/archived`。每个资产记录：owner、编辑范围、母标文件、SHA、尺寸、出血/安全区、颜色模式、字体许可、图片/数据/合作授权、proof 类型、审批日期和停用日期。

四种状态：`draft` 可试验；`review` 可内部评审；`approved` 可按生产门槛发布；`archived` 只读。旧 V13 文件保留在历史区，不可被当前源码引用；V14.2 新资产不得覆盖旧 URL。

## 19. 七道放行门

1. Brief lock：用途、受众、语言、尺寸、渠道、预算、负责人。
2. Master selection：模式、母版、版本、SHA、P0/P1。
3. Content clearance：事实、关系、图片、数据、法定文字、二维码。
4. Artwork preflight：比例、净空、色彩、字体、图片分辨率、对比、折行。
5. Proof：设备/纸样/材料/现场/镜头/无障碍实测。
6. Approval：设计、内容、品牌、业务/法务、供应商/场地方。
7. Archive：源文件、输出、proof、审批、许可、SHA、发布日期。

任何门未完成都不能标记 `approved`。公开商标权利未清理时，状态必须带 `rights-review`。

## 20. 交付验收指标

- 72 个应用母版均有目录、生产说明、预览和 SHA；
- 网站在 320/768/1024/1440 px、键盘、减少动态、强制颜色和双语长串通过；
- `/vi` 及其子页能下载 Guidebook、应用包、Design Skill、目录和生产清单；
- Guidebook 同步 HTML 可访问版本，PDF 与 HTML 章节/版本一致；
- 研究页每条案例有一手链接、访问日期、事实/推断/禁仿/权利四字段；
- 发布记录明确本地构建、Sites 部署、商标权利三者的独立状态。

## 附录 A：一页设计决策表

| 选择 | 先问 | 合格输出 |
|---|---|---|
| 展陈 | 是否有一个值得被郑重呈现的主角？ | Frame + 画芯 + 展签 |
| 连接 | 谁需要在什么时间完成什么动作？ | 网格 + 路径 + 清楚 CTA |
| 证据 | 数字能否被第三方复核？ | 指标 + 定义 + 来源 + 限制 |
| 红色 | 红色是否只有一个主要信号？ | H 或一个编号/动作 |
| 方格 | 网格是否帮助阅读而非制造纹样？ | 可退化的 12/8/4 栏 |
| 伙伴 | 关系是否有书面依据？ | 独立双区 + 关系词 |
| 发布 | 谁能在下一版本复用并审计？ | 源文件 + token + SHA + 记录 |

## 附录 B：不可复制声明

Pentagram、Harry Pearce、The Osh Gallery、Hongkong Land、Wolff Olins、AIGA 及其他案例仅为公开研究来源。HSKB 不复制其 H、方框、字形、括号、棋盘、帽子、播放按钮、图案、动态或颜色数值；研究推导只进入 H 外部的布局、内容、治理和测试层。公开使用前须完成版权、商标、图片、字体、合作和未成年人授权审查。
