保留参考图真实纵横比 1020:1019；禁止强制变成正方形。
HSKB V14.2 · SYSTEM EXTENSION / V14.1 APPLICATION SYSTEM / IDENTITY MASTER V14.0
同一枚 H，
精确锁定。
以用户最初提供的原始 PNG 为唯一证据母图：红色结构、真实偏移和纵横比全部保留；V14.2 在不改变 Identity Master V14.0 的前提下，把网站、博客、海报、名片、报告与生产治理扩展为可执行系统，连同 V14.1 基线共 72 款可编辑应用模板。
REFERENCE SHA-256
339d07f0…7ac47ccPDF GUIDEBOOKV14.1 品牌指南A4 · 46 页 · 适合阅读与内部评审EDITABLE PACKAGE60 款应用源文件SVG · 清单 · 生产规范 · 预览COLLEAGUE DESIGN SKILLHSKB Design Skill V14.1可安装 Skill · 60 个母版 · 验证器 · Guidebook
V14.2 · REVIEW RELEASE / DOWNLOAD HANDOFFGuidebook、HTML 与 Extension，
Guidebook、HTML 与 Extension，
从同一个交接入口出发。
V14.2 审阅版已完成版本、尺寸与 SHA-256 登记，并镜像到 public/downloads/。PDF、可读 HTML、ZIP 与 sidecar 现在可供受控评审；在版权、商标、字体及第三方研究清权前，不得宣称为公开商用批准版。
PDF GUIDEBOOK · 可下载（审阅版）V14.2 VI Brand Guidebook110 页 · 已核验字节数与 SHA-256 · 下载审阅版 ↘HTML GUIDEBOOK · 可下载（审阅版）可搜索 / 可读屏 HTML已改写为站内绝对链接 · 与 PDF 同步的 110 页文本版 · 下载 ↘EXTENSION ZIP · 可下载（审阅版）V14.2 System Extension12 个新增应用母版、tokens、Skill 与验证脚本 · 下载 ↘MANIFEST + SIDECARS · 可下载（审阅版）SHA-256 / Catalog / ReleaseRelease Manifest 汇总总校验、两个 .sha256 sidecar 与完整清单 · 先核验，再进入商用放行 ↘
01 / 唯一标志母版
红色部分只换尺度，
不换形状。
标准 H 来自参考图红色 coverage。白底、深青底和组合字标都引用同一份母形；深色环境也不再使用白色 H。
上、下切口完全同宽同高；不可扩大成较粗的缝。
垂直节奏固定为 340 / 339 / 340，不做光学修正。
H 为显示高度；文字、边框和其他标志不得进入核心净空。
像素证据参考 mask 与规范几何仅相差 22 px
IoU 0.999978652。母图保留 Apple Generic RGB ICC；网页采用色彩管理后的 sRGB 近似，不把 raw 通道值直接当 CSS。
查看机器几何锁 ↗02 / Gallery Frame 系统
把每一次成长，
当作值得装裱的作品。
画框不是标志外框，而是一种呈现关系：外部环境、白色框体、安静衬纸、深色画芯和一条红色信息信号。
Frame / 白框
提供现实感和边界，让作品从环境中被郑重区分。
Mat / 衬纸
以宽留白建立呼吸，不用圆角卡片和阴影堆叠层级。
Field / 画芯
Gallery Ink 承载红色 H、真实项目成果或单一主题。
Caption / 展签
底部信息克制、可核验，像画廊展签一样说明而不抢夺主角。
03 / 色彩系统
参考红负责记忆，
深青负责沉静。
Reference Red 与 Gallery Ink 是核心关系；白、衬纸白、框银和石墨只负责结构。色值均为数字界面的 sRGB 生产值。
Reference Red#FF2F2D
标志固定用色与唯一高饱和信号
Gallery Ink#002E39
深色展陈底、正文与正式应用
Pure White#FFFFFF
标志白底、留白与内衬
Mat White#F7F7F4
网页与纸品的柔和画廊底色
Frame Silver#E4E7E5
画框、层级边界与装裱结构
Graphite#40525A
次级文字与说明
Soft Rule#CBD2D1
表格、分隔线与细部结构
04 / THREE OPERATING MODES
同一个身份，
三种工作状态。
模式根据任务选择，不按个人喜好混搭。Exhibition 建立品牌时刻，Connect 组织关系，Proof 让成果经得起核验。
Exhibition
以 Gallery Frame 建立仪式感：一个被装裱的主角、宽衬纸、深色画芯与一条红色信号。适合发布、展览和需要被记住的品牌时刻。
海报 · 画框 · Backdrop · 易拉宝 · 展览空间Connect
以精确网格、细规则线和双区关系连接人、信息与伙伴。它比展陈模式更轻，但仍保留红色索引与清楚的归属边界。
文具 · 活动流程 · 导视 · 联名 · 日常数字触点Proof
把来源、日期、状态和结果放到画面中心；H 退居签署位置。可信度来自可核验的内容，而不是装饰性的大标志。
报告 · 证书 · 数据页 · 案例 · 项目成果选择规则
一件应用只设一个主模式；需要跨模式时，以内容目标决定主次，并在生产清单中记录。三种模式都不得改变、拆解或重新绘制 H。
05 / 60 EDITABLE APPLICATIONS
从一张信纸，
扩展到完整品牌现场。
V14.1 提供 11 类、60 款代码原生 SVG 模板。每一款都带应用编号、尺寸、模式、生产等级与预览清单，便于同事继续更新。
60可编辑模板
11应用类别
3运行模式
2生产等级
A0111
Stationery / 文具
信纸、中英双语信纸、信封、资料夹、便笺与新闻稿
A0203
Business Cards / 名片
中英双语、管理层与数字名片场景
A0303
Certificates / 证书
结业、参与及荣誉证明
A0403
Reports / 报告
封面、目录和数据证据页
A0507
Campaign / 传播
A1、4:5、1:1、Story、成果海报与系列传播
A0607
Digital / 数字
邮件、视频尾帧、演示章节页和数据页
A0714
Environment / 空间
Backdrop、易拉宝、讲台、入口、导视、围挡和 LED
A0802
Events / 活动
活动手册封面及内页
A0904
Credentials / 证件
员工证、背卡、挂绳和访客凭证
A1002
Partnerships / 联名
横向与纵向双区联署
A1104
Merchandise / 物料
帆布袋、笔记本、水瓶与徽章
完整包同时包含 APPLICATION CATALOG、PRODUCTION MANIFEST、65 张预览与 46 页 Guidebook；源文件用于受控生产，不等于放开核心标志编辑权限。
06 / 延伸应用
同一套框景，
覆盖屏幕、纸张与空间。
所有延伸都从同一母版和同一比例出发，改变的是信息与尺度，不是 H 本身。
数字界面
白色页框、Gallery Ink 页面骨架、精确 H 导航标识
社交传播
4:5 或 1:1 画芯，稳定衬纸与底部信息带
报告与证书
大留白、细规则线、单一红色索引
活动与展陈
海报如作品装裱，空间导视如展签
课程与项目
学生成果进入统一画框，不覆盖作品本身
合作品牌
HSKB 与伙伴各自保留安全空间，不拼成新标志
07 / HONGKONG LAND METHOD STUDY
参考成熟方法，
不借用别人的视觉资产。
Hongkong Land 的官方规范展示了一套地产与城市品牌如何同时管理编辑网格、摄影、动效、材料和日常模板。HSKB 只吸收治理方法，并保持自己的 Frame H、色彩与内容逻辑。
系统，而非单张 Logo
官方 Brand Guide 把标志、版式、摄影、动效、图案、材料和模板放进同一套治理结构。HSKB 采用同样的系统意识，但不复制其 H、30° 模块或专有构图。
Hongkong Land Brand Guide ↗4 / 6 / 8 栏编辑网格
根据媒介宽度选择少而清楚的栏数，并用大留白建立节奏。HSKB 将这一方法转译为网页、A4、海报与超宽屏的响应式网格。
官方 Layout 规范 ↗材料承担品牌质感
材料选择强调高级、层次与克制。HSKB 把它落实为诚实基材、真实装裱层次与轻微触感；任何工艺都不能改色或替代红色 H。
官方 Material Palette ↗STOCK-ASSET BOUNDARY
Envato 只用作交付清单，不作为视觉母版。
可参考它对文具、活动、导视和物料类别的覆盖，但不把非独家模板、图形或版式带入 HSKB 核心。Envato 官方许可明确限制把 Elements 素材作为 logo、商标或服务标志使用；因此本系统的核心视觉与模板均为代码原生构建。
查看官方许可说明 ↗08 / GLOBAL BENCHMARK STUDY
研究的不是“另一个红 Logo”，
而是它如何成为一套系统。
案例均链接到品牌或设计机构的一手材料。页面只呈现结构化研究，不嵌入第三方商标；“HSKB 判断”是基于公开案例作出的设计推导，不代表案例方认可或参与本项目。
A / RED & SQUARE BENCHMARKS
红色方形与高权益方框案例
Hillhouse / 高瓴
- 已核验结构
- 当前官网是珊瑚橙方形、深蓝竖向切口与白色名称，并非可确认色值的“红方形”。
- HSKB 判断
- 只参考小型方形信号、克制字标与深色场的层级；不复制切口、配色或组合比例。
LSE
- 已核验结构
- 红色方形可独立承担社交头像，合作场景固定主标、位置、最小尺寸与颜色。
- HSKB 判断
- 为 HSKB 建立数字头像与合作联署矩阵；H 仍须使用同一母形。
LEGO
- 已核验结构
- 品牌把红色方形 Logo 视为可被公众即时识别的核心商标资产。
- HSKB 判断
- 高识别度必须与严格授权治理同行；研究不等于获得复用或近似注册权。
UNIQLO LifeWear Day
- 已核验结构
- 核心方形识别之外，以现代主义网格、图标与可重复使用的灯箱构成展览系统。
- HSKB 判断
- 参考“标志不动、空间系统扩展”的方法；该案例不是 UNIQLO 核心 Logo 重设计。
Orange
- 已核验结构
- 方形主标配合角点定位、明确净空、最小尺寸与响应式小标资产。
- HSKB 判断
- 直接转化为 HSKB 的 symbol / lock-up / app icon 使用矩阵，而不改变 H。
American Express
- 已核验结构
- 保留 Blue Box 资产，同时为极小数字空间建立经过控制的响应式版本。
- HSKB 判断
- 先保护长期资产，再处理媒介适配；HSKB 不用“看起来更正”取代证据母版。
B / RED IDENTITY SYSTEMS
Pentagram 与 Wolff Olins 的红色系统
London Design Festival
- 已核验结构
- 持续保留 signature red 与简洁字母资产，每年只更新可变的主题语言。
- HSKB 判断
- Reference Red 成为长期记忆锚；活动主题在框景、字体尺度和内容层更新。
Mastercard
- 已核验结构
- 简化并保留高权益核心几何，再从核心关系生成跨媒介图形系统。
- HSKB 判断
- 从 H 的比例与切口节奏生成网格、窗口和动线；不把 H 拆成装饰零件。
Hartbeat
- 已核验结构
- 黑、白、红的有限色域与连接点延展成容器、分隔线、图案和动效。
- HSKB 判断
- 让切口与桥成为版式节奏和转场逻辑；核心 H 本身保持静止、完整。
The Met
- 已核验结构
- 红色识别并非孤立标志，而与字体、图像、材质、构图和空间形成生态。
- HSKB 判断
- 把 Gallery Frame 做成网站、出版与空间共同的舞台，而不是每页重复大 Logo。
GSK
- 已核验结构
- “signal”图形可在数字、社交与实体环境中伸缩和运动。
- HSKB 判断
- 只借鉴“系统有动势”：H 不变形，动效发生在框、展签、内容与红色索引上。
Kenvue
- 已核验结构
- 核心字母承担基石角色，灵活系统把舞台让给旗下产品与内容。
- HSKB 判断
- HSKB 作为母品牌提供稳定边界，让课程、学生作品与伙伴成果成为画芯主角。
09 / SECOND-PHASE DIRECTIONS
第二阶段升级，
从八条系统规则开始。
这些方向进入研究层与后续原型验证，不改变 V14 核心母版。每一项都可被测试、撤回和单独版本化。
核心与系统分层
Logo 母版永久锁定；网站、活动与内容系统按版本迭代。
响应式资产矩阵
明确 symbol、组合标、favicon、app icon 与小尺寸阈值，不临场裁切。
几何生成网格
以 1020:1019 和 340 / 339 / 340 节奏控制栏宽、开口与留白。
框景成为舞台
Frame 只用于值得呈现、归档或证明的主角；普通信息不滥用厚框。
单一红色连续性
Reference Red 维持长期记忆；每一屏只设置一个高饱和主信号。
静标志、动系统
H 不旋转、不变形；框体展开、展签进入与内容揭示构成动效语法。
合作双区治理
HSKB 与伙伴分区呈现、各守净空，不拼接、不重绘、不暗示未经授权的背书。
证据型展签
案例、成果与数据附来源、日期和状态，让视觉可信度来自可核验信息。
明确不采用
不改变 H 的比例、切口、红色或真实偏移；不让 H 变形、换色、旋转或被用户自定义；不复制任何案例的方框、字形、构图与动效；不让红色淹没整套内容。
10 / PRODUCTION & MATERIAL
高级感最后要落到，
尺寸、材料与打样。
模板不是成品。每个应用在交付前必须确认媒介、实际尺寸、观看距离、色彩模式、生产等级、字体许可和审批人。
Identity-critical / 核心生产
Logo、名片、信纸、证书、永久标牌、合作锁定必须使用批准资产、实际尺寸和色彩模式；印刷前做合同色样，空间制作前做材料、灯光和远视测试。不得现场重画、自动转黑或擅自替换红色。
System-flexible / 系统应用
海报、社交、演示、Backdrop、易拉宝、活动与物料内容可在三种模式内更新，网格、留白、单一红色信号和标志净空保持不变。每次输出都要记录模板版本、负责人和审批状态。
MATERIAL PRINCIPLES
不是更华丽，而是更真实、更分层、更克制。
Honest / 诚实
优先选择能真实呈现纤维、金属或涂层特性的材料；不以廉价仿纹理模拟高级感。
Layered / 分层
用框体、衬纸、画芯和展签形成可读层次；层次来自结构，不来自玻璃拟态或重阴影。
Subtle / 克制
压凹、烫银或局部光泽只作小范围触感；Reference Red 必须先通过专色或受控四色打样。
放行前五项
- 使用批准的 V14.0 核心资产
- 尺寸、出血与安全区正确
- Reference Red 已按媒介打样
- 内容来源与合作授权可核验
- 文件名、版本和审批记录完整
11 / 使用与治理
设计可延伸，
证据与边界不能含糊。
Identity Master V14.0 是当前核心母版，Application System V14.1 是当前应用版本；原始参考、机器规范、衍生文件、研究来源和权利状态必须一起交接。
母图只有一份
原始 PNG 的文件哈希、RGBA 哈希和 ICC 哈希共同构成证据链；不得用截图或重画文件替换。
红色 H 不变
允许白色、Mat White 或 Gallery Ink 背景；只可等比缩放，不改色、不拉伸、不居中修正。
画框是一种版式
白框、衬纸、细边线与深青展陈面可延伸到海报、网页和空间；它们不烘进核心标志。
一个版面，一个主角
红色只承担标志或一个关键信号，内容依靠留白、对齐、尺寸和证据建立层级。
来源与权利提示
该候选母形依据用户提供的 “H by Harry Pearce / Pentagram” 视觉参考建立。公开商业标志、商标注册、商品化或第三方授权前，须完成书面版权与商标许可核验；当前实现不代表原作者、案例品牌或相关设计机构对 HSKB 的认可。
查看网站知识产权说明 ↗12 / WEBSITE DESIGN SKILL V14.2
把品牌规范，
变成可交付的网站系统。
这是在 V14.0 Reference-Locked Frame H 与 V14.1 Application System 之上的网站实施扩展。它补齐组件、响应式、可访问性、内容治理、性能和发布验收；不改变核心 H。
IMPLEMENTATION EXTENSION / 实施扩展
一个可维护、可验证、可回滚的数字画廊。
网站不是把海报缩小，而是让每个受众在有限时间里理解定位、找到路径、核验事实并做出下一步选择。页面优先保持共同边线、精确规则和宽留白；复杂度来自内容证据，而不是装饰效果。
08 / DOWNLOADS & HANDOFF
每一份交付，都有一个可核验的文件名。
V14.2 的 PDF、HTML、ZIP、两个 sidecar 与完整 registries 已镜像到 public/downloads/，卡片均为可下载的受控审阅版。HTML 的外部相对链接已改写为站内绝对地址，表格补齐 caption / scope，深色眉题也按对比度规范调整；下载后仍应按 manifest 复核哈希与字节数。版权、商标、字体和第三方内容清权完成前，不得把审阅版宣称为公开商用批准版。
V14.2 VI Brand Guidebook
110 页综合 VI、网站、内容、研究与生产规范；当前为可下载审阅版，版权、商标、字体与第三方研究清权后才可商用。
/downloads/HSKB_V14.2_VI_Brand_Guidebook_2026-09-01.pdfPDF · 4.24 MB下载文件 ↘
V14.2 accessible HTML Guidebook
与 110 页 PDF 同步的可搜索、可复制、读屏友好版本；相对链接已改写为站内地址，当前仍需授权复核。
/downloads/HSKB_V14.2_Guidebook.htmlHTML · 14.9 KB下载文件 ↘
V14.2 System Extension
12 个新增应用母版、Design Skill、tokens、预览与验证脚本；当前为可下载审阅版，清权与发布验收后才可商用。
/downloads/HSKB_V14.2_System_Extension_2026-09-01.zipZIP · 6.44 MB下载文件 ↘
V14.2 checksum registry
记录已镜像 Guidebook 与 Extension 的 SHA-256；下载后可按清单复算并留存结果。
/downloads/HSKB_V14.2_SHA256SUMS.txtTXT · 1.22 KB下载文件 ↘
Guidebook SHA-256 sidecar
与 PDF 同名的校验文件；下载后可用 sha256sum 或 shasum 复核二进制完整性。
/downloads/HSKB_V14.2_VI_Brand_Guidebook_2026-09-01.pdf.sha256SHA-256 · 111 B下载文件 ↘
Extension SHA-256 sidecar
与 Extension ZIP 同名的校验文件；和总 SHA-256 registry 一起保存，便于交接复核。
/downloads/HSKB_V14.2_System_Extension_2026-09-01.zip.sha256SHA-256 · 109 B下载文件 ↘
V14.2 application catalog
12 个新增应用的类别、尺寸、模式、状态、权利边界与网站入口。
/downloads/HSKB_V14.2_APPLICATION_CATALOG.jsonJSON · 6.12 KB下载文件 ↘
V14.2 production manifest
面向制作与验收的 CSV 行：文件名、成品尺寸、优先级、模式与发布状态。
/downloads/HSKB_V14.2_APPLICATION_MANIFEST.csvCSV · 3.01 KB下载文件 ↘
V14.2 preview manifest
12 个新增应用预览的文件名、尺寸与核验字段；用于设计评审时逐项对照。
/downloads/HSKB_V14.2_PREVIEW_MANIFEST.csvCSV · 2.75 KB下载文件 ↘
V14.2 complete production manifest
扩展包全量制作清单：应用母版、Logo、tokens、文档与预览的版本边界。
/downloads/HSKB_V14.2_PRODUCTION_MANIFEST.csvCSV · 2.61 KB下载文件 ↘
V14.2 version record
记录 Identity Master、Application Release、Guidebook 页数、HTML 哈希与权利状态。
/downloads/HSKB_V14.2_VERSION.jsonJSON · 1.07 KB下载文件 ↘
V14.2 升级说明
中文交接说明与受控发布流程；包含清权、替换占位、验证和回滚边界。
/downloads/HSKB_V14.2_README_升级说明.mdMarkdown · 4.13 KB下载文件 ↘
V14.2 Website Design Skill VI
网站组件契约、响应式网格、无障碍、内容治理、性能与发布 QA 的可读版。
/downloads/HSKB_V14.2_Website_Design_Skill_VI.mdMarkdown · 10.8 KB下载文件 ↘
V14.2 research source ledger
Pentagram、AIGA、品牌官方规范与其他一手来源的 56 条研究记录；研究不等于授权。
/downloads/HSKB_V14.2_Research_Sources.csvCSV · 19.9 KB下载文件 ↘
V14.2 release manifest
唯一交接入口：版本边界、目标二进制文件名、预期哈希、权利状态与回滚说明。
/downloads/HSKB_V14.2_RELEASE_MANIFEST.jsonJSON · 6.83 KB下载文件 ↘
发布门槛 Guidebook（PDF + HTML）、Extension、各自的 .sha256 sidecar 与现有 V14.1 资产已按 2026-09-01 版本镜像；HTML 已通过站内链接复核，PDF 仍以 HTML 作为可读 fallback。当前状态为 system-extension-review-release：版权、商标、字体和第三方内容书面清权后，才可切换为公开商用发布。
01 / OPERATING PRINCIPLES
先建立责任，再建立样式。
所有页面和组件都要能回答：给谁看、要理解什么、下一步是什么、证据在哪里、风险如何撤回。
一个主角
每一屏先确定一个信息主角：一条承诺、一张作品图、一个数字或一枚完整 H。其他元素只负责解释、导航或证明。
证据先行
案例、项目、合作与数据都带来源、日期、状态和责任人；筹建期信息使用“拟、候选、待签约”等准确口径。
开放可读
中文为主要阅读语言，英文作为必要的辅助标识；正文左对齐、短段落、清晰标题和稳定的共同边线。
静标志，动系统
H 保持完整、等比和红色不变。动效只用于框体、展签、内容揭示和状态变化，并可被键盘与 reduced-motion 偏好中断。
渐进增强
没有 JavaScript、图片或第三方服务时，核心定位、页面内容、内链和申请说明仍然可读、可到达、可打印。
可撤回治理
所有扩展先作为版本化系统层验证；发现事实、授权或无障碍风险时，可单独回滚而不触碰 V14.0 Identity Master。
02 / LAYOUT & TOKENS
同一套尺度，覆盖手机、平板与画廊宽屏。
以 8 px 节奏、4 / 8 / 12 栏关系和最大内容宽度控制密度；不要用随机 margin 修复断点问题。
| 视口 | 宽度 | 列数 | 外侧留白 | 行为 |
|---|---|---|---|---|
| M / Mobile | 320–767 px | 4 栏 | 16–24 px | 单列阅读；CTA 满宽；导航折叠；H 只用 symbol 或完整母标的 contain。 |
| T / Tablet | 768–1199 px | 8 栏 | 32–48 px | 两栏内容可折为一列；表格允许横向滚动；图片优先 16:10 或 4:5。 |
| D / Desktop | 1200–1439 px | 12 栏 | 48–72 px | 完整母标宽 216–240 px；主内容最大 1360 px；首屏采用文图双区。 |
| W / Wide | ≥1440 px | 12 栏 | 72–96 px | 保留大留白与 Gallery Frame 环境层，不把内容拉伸到视口边缘。 |
| 令牌 | 值 | 职责 | 边界 |
|---|---|---|---|
| Reference Red | #FF2F2D | 唯一高饱和信号；H、索引、关键 CTA | 小字号正文不得使用 |
| Gallery Ink | #002E39 | 深色场、正文、页脚和画芯 | 深底优先用白色正文 |
| Pure White | #FFFFFF | 标志白底、框体、表单和内衬 | 避免与 Mat White 混淆 |
| Mat White | #F7F7F4 | 网页底、纸品与柔和内容面 | 主阅读面默认色 |
| Frame Silver | #E4E7E5 | Gallery Frame 边界、分层和装裱 | 只作结构，不作正文 |
| Graphite | #40525A | 说明、次级文字和状态提示 | 按实际字号测对比度 |
| Soft Rule | #CBD2D1 | 分隔线、表格边界、输入框 | 关键边界可用 Ink |
| Spacing | 8 / 16 / 24 / 32 / 48 / 64 / 96 / 128 | 版式节奏与触点间距 | 不以随机像素补洞 |
H 的尺寸规则
完整母标在桌面建议 216–240 px，绝不小于 160 px；独立 H 使用原始 1020:1019 比例和 object-fit: contain。导航空间不足时切换到同一母版的 symbol，不裁切、不拉伸、不换色。
03 / COMPONENT CONTRACTS
组件先写契约，再写 CSS。
每个组件都要说明结构、状态、内容边界和失败时的降级行为；这份表可直接作为设计、开发和验收的共同清单。
| 组件 | 最小结构 | 必须支持的状态 | V14.2 规则 |
|---|---|---|---|
| Header / 页首 | 版本化母标 + 6 项以内导航 + 单一 CTA | 默认、当前页、键盘焦点、移动折叠 | H 保持 contain；移动不足时才使用 symbol。 |
| Hero / 首屏 | 眉题、一个 H1、短 lead、主 CTA、证据或概念图 | 默认、图片失败、窄屏堆叠 | 一屏一个主角；概念图必须标注非真实现场。 |
| Section head / 模块头 | kicker + H2 + 一段解释 | 默认、深色底、长标题换行 | 正文和说明共享左边线，不用居中长段。 |
| List row / 列表行 | 编号、标题、说明、方向箭头 | 默认、hover、focus、current | 用规则线建立节奏，避免漂浮卡片。 |
| Gallery Frame / 画框 | 环境、白/银框、衬纸、画芯、展签 | 默认、打印、暗色画芯 | Frame 是版式容器，不是 Logo 外框。 |
| Content card / 内容卡 | 标题、短说明、可选链接 | 默认、focus、无图片 | 同一组卡片共享边线和高度逻辑。 |
| Form control / 表单 | 标签、控件、帮助、错误、同意 | 默认、focus、invalid、disabled | 公开申请仅本地生成摘要，不默认收集未成年人信息。 |
| Footer / 页脚 | 品牌、成长与方案、共建、信任边界 | 默认、链接焦点 | 保留版权、状态和权利提示；不伪造联系人。 |
页面解剖 / Page anatomy
- 01进入
Header、skip link、当前路径和一句可理解的页面定位。
- 02承诺
一个 H1 说明页面能解决什么问题；不要在首屏堆叠多个主张。
- 03解释
用短段落、列表和共同网格解释方法、对象、责任与下一步。
- 04证明
放置来源、日期、状态、作品或指标；证据优先于装饰。
- 05行动
每个页面只设一个主 CTA，辅助链接用文本链接，避免竞争。
- 06边界
在涉及儿童、健康、数据、合作和知识产权处给出可见说明。
- 07离开
Footer 提供相关路径、下载、信任页面和版本状态，形成闭环。
交互状态 / Interaction states
- Default静止、可读、对比度足够；边框和红色索引承担结构。
- Hover / Pointer只做颜色或 2–4 px 低位移反馈；不改变 H，不让布局跳动。
- Focus / Keyboard使用可见的 Reference Red 外轮廓；焦点顺序与视觉顺序一致。
- Current / Active导航用 aria-current；列表或步骤用文字状态，不只靠颜色。
- Invalid / Error错误贴近控件，说明修复方法；不回传或展示敏感原始值。
- Reduced motion关闭平滑滚动、位移和揭示动画；信息层级保持不变。
04 / ACCESSIBILITY & RESILIENCE
可访问性是品牌质量，不是上线后的补丁。
把键盘、读屏、放大、对比度、低带宽、图片失败和无脚本阅读当作同一个系统的不同观看方式。
结构
每页一个 H1；main、nav、footer、figure、caption 等地标与语义完整。
键盘
Tab 可到达所有链接、按钮、表单和折叠导航；Escape 关闭移动菜单并回焦点。
触点
交互目标不小于 44 × 44 CSS px；相邻链接有足够间距，不依赖精细指针。
对比
正文、焦点、错误与状态按实际字号和背景测量；Reference Red 不作为小字号正文。
图片
真实图片有描述性 alt；概念图有“AI 概念视觉｜非真实活动现场”说明；装饰图 alt 为空。
语言
html lang 为 zh-CN；中英并置时保留阅读顺序和共同左边线，不把英文当作唯一信息。
表单
label、帮助、错误与同意状态可被读屏器关联；不在未确认授权前收集儿童个人信息。
偏好
支持 prefers-reduced-motion、forced-colors、放大到 200% 和窄屏横向阅读。
动效上限
默认过渡 160–300 ms、低位移、可中断；H 不旋转、不闪烁、不拆解。prefers-reduced-motion: reduce 时关闭平滑滚动、位移和揭示动画，但不隐藏内容。
05 / CONTENT & ROUTE GOVERNANCE
内容是产品，来源是接口。
品牌可信度来自持续更新的事实链。页面、下载和社交元数据必须共享同一个状态，不让旧稿或未授权关系从旁路进入生产。
Source / 来源
每条案例、数字、合作、人物和图像记录一手来源或内部决策记录。
Status / 状态
使用筹备中、拟联合发起、初步意向、候选、待签约等可核验状态；签约后再更新。
Owner / 责任
为页面、组件、图片、下载文件和翻译指定内容负责人及复核人。
Rights / 权利
记录 Logo、字体、照片、学生作品、第三方商标和数据的许可边界与到期日。
Safeguarding / 保护
未成年人影像、健康、测评、学校和联系方式遵循最少必要、知情、分级和删除流程。
Review / 复核
每季度或事实变化时复核；发布前再次跑链接、元数据、无障碍、资产和文本守卫。
| 分区 | 代表路径 | 内容职责 |
|---|---|---|
| Core | / · /about · /vi · /resources | 品牌定位、规范、资料和主 CTA；保持最短到达路径。 |
| Growth | /programs · /assessment · /talent | 六大成长系统、测评规划和天才少年计划。 |
| Pathway | /pathway · /pathway/* | 发现—设计—实践—呈现—衔接的连续方法。 |
| Solutions | /solutions · /solutions/* | 学校、家庭、政府/协会、企业四类落地入口。 |
| Insights | /insights · /insights/* · /partners | 筹建期专题、城市探索和伙伴治理；文章按来源更新。 |
| Trust | /faq · /privacy · /child-protection · /terms · /accessibility | 信任、边界、儿童保护、隐私和可访问性。 |
禁止进入生产
旧 V13/Lime 视觉、CSS 重绘 H、渐变或玻璃拟态主界面、未经授权的合作方 Logo、未标注的 AI 概念图、医疗/提分/升学保证、未同意的儿童个人信息和虚构联系人。
06 / PERFORMANCE & SEO
让每个信号都快速抵达。
V14.2 把速度、抓取和分享视为同一条交付链；目标值用于验收，真实结果以设备与网络测试记录为准。
首屏主角优先；图片按显示尺寸提供 WebP/AVIF 或受控 WebP。
图片保留宽高比；字体、按钮和导航不因加载发生布局跳动。
交互保持轻量；申请摘要在浏览器本地生成，不依赖阻塞式第三方脚本。
缓存更新使用 /brand/hskb-v14-*，不以覆盖旧 URL 作为唯一策略。
REFERENCE IMPLEMENTATION
/* HSKB V14.2 — keep the mark an asset */
.hskb-symbol {
width: clamp(48px, 8vw, 108px);
aspect-ratio: 1020 / 1019;
object-fit: contain;
}
/* motion belongs to the frame, never the H */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; }
}07 / RELEASE & QA
交付不是“能打开”，而是“可证明”。
每次发布都生成一份可复核的交接记录，明确版本、资产哈希、测试范围、已知限制与回滚入口。
- 01
生产页面只引用 /brand/hskb-v14-* 版本化资产，H 维持红色、比例和 contain 行为。
- 02
标题、描述、canonical、Open Graph、Twitter、JSON-LD、favicon、PWA manifest 同步。
- 03
320 / 768 / 1024 / 1440 px 通过；表格、图片、导航和 CTA 不溢出。
- 04
键盘、读屏语义、焦点、forced-colors、200% 缩放和 reduced-motion 通过。
- 05
所有本地链接、图片、下载、sitemap、robots 和 404 均可解析。
- 06
概念图、合作状态、APEC 名称、学生案例与第三方研究均有准确边界。
- 07
构建、静态导出、品牌校验、文本守卫和 lint 结果记录在版本交接单。
- 08
上线后只在取得同意和正式隐私规则后接入分析或其他第三方脚本。
检查视口320 · 768 · 1024 · 1440 px
检查入口首页 · /vi · /apply · 404 · 任一详情页
检查资产Header · Footer · favicon · PWA · OG · JSON-LD
检查状态键盘 · reduced-motion · forced-colors · 离线降级
版本边界 / VERSION BOUNDARY
V14.2 是网站 Design Skill 的系统扩展提案；V14.0 Identity Master 与 V14.1 应用资产仍是唯一生产母版。任何涉及版权、商标、学生数据、合作授权或医疗/升学表述的变更，必须在设计发布前由相应责任人复核。
返回 VI Guide 主页 ↗