# HSKB 网站 Design Skill VI V14.2

这份文件把 HSKB 的视觉识别翻译成可实现、可测试、可交接的网站系统。它适用于 `hskb.com` 主站、`/vi` 品牌页、博客/洞察、项目页、下载页和后续子站。它不是另一个 Logo 方案；所有 H 都来自 V14.0 锁定资产。

## 1. 工作方式

网站设计的顺序固定为：

`Brief → Content model → Foundations → Components → Patterns → Pages → QA → Release`

先确认读者、任务、语言、设备和状态，再选择 Exhibition、Connect 或 Proof。任何页面都应能在没有红色、没有动效、没有图片时完成基本信息传达；视觉层负责记忆和节奏，不能成为唯一的可用性线索。

## 2. Foundations（基础层）

### 2.1 资产

生产代码只能引用版本化路径：

- `/brand/hskb-v14-primary.svg`
- `/brand/hskb-v14-reversed.svg`
- `/brand/hskb-v14-symbol.svg`
- `/brand/hskb-v14-favicon.svg`、`.ico`
- `/images/hskb-v14-social-card.png`

不引用未版本化 `hskb-primary.svg`、V13 文件、截图或 CSS 绘制的 H。Logo 作为 `<img>`/框架 Image，`object-fit: contain`，保留 `1020 / 1019` 比例。装饰 Frame 可用 CSS，不能包进 Logo 文件。

### 2.2 颜色与对比

| token | 值 | 适用 |
|---|---|---|
| `--hskb-red` | `#FF2F2D` | H、大标题信号、边界、主 CTA 背景 |
| `--hskb-ink` | `#002E39` | 正文、深色场、按钮文字 |
| `--hskb-paper` | `#F7F7F4` | 页面底、衬纸 |
| `--hskb-white` | `#FFFFFF` | 画芯、字段、强留白 |
| `--hskb-graphite` | `#40525A` | 次级文字 |
| `--hskb-rule` | `#CBD2D1` | 分隔线、边界 |

Reference Red 与白/Mat White 不足以承担小字号普通正文（约 3–4:1）；小标签、说明和错误信息使用 Ink/Graphite，红色只作大字、图形、边线或按钮背景。所有文字/控件按 WCAG 2.2 AA 实测：普通文字至少 4.5:1，大字至少 3:1，非文字焦点/边界至少 3:1。

### 2.3 网格

桌面 12 栏、平板 8 栏、手机 4 栏；8 px 基础间距；网站正文内容最大 1360 px（1440 px 仅作为宽屏视口检查）。每个组件写明列跨度和退化规则，例如 `hero-copy: 1–6 / 1–8 / 1–4`，不在页面里临时改负边距。视口检查固定为 320、375、768、1024、1440 px。

### 2.4 字体

中文 `Noto Sans SC, Source Han Sans SC, PingFang SC, Microsoft YaHei`；英文 `Arial, Helvetica Neue`。不随包分发 Univers；若项目有合法 Web 授权，才能在独立应用中替换标题层。正文行长约 66ch，中文行高 1.65–1.85，英文 1.45–1.65。

## 3. Molecules（组件合同）

每个组件至少定义：用途、HTML 语义、必填字段、可选字段、状态、键盘行为、响应式规则、动效、内容上限、测试断言和禁止事项。

### 3.1 Header / Nav

- `<header>` + `<nav aria-label="主导航">`；桌面 80–96 px；完整 Logo 216–240 px，绝不低于 160 px。
- 手机使用独立 H，`alt="博格港湾 Harbor Stem"` 或可访问隐藏名称；菜单按钮有 `aria-expanded`/`aria-controls`。
- Escape 关闭菜单并将焦点还给按钮；点击外部关闭；打开时页面不应被不可见焦点穿透。
- 当前页同时有 `aria-current="page"`、文字/边界状态；不只靠红线。
- 导航最多六项；CTA 作为最后一个独立动作，不与 Logo 拼接。

### 3.2 Button / Text link

- 按钮最小 48 px 高，触摸目标 ≥44×44 px；文字可翻译且不依赖图标。
- 主 CTA：红底 + Ink 字；次 CTA：透明底 + Ink/White 边界；链接有下划线或明确箭头。
- `:focus-visible` 使用 2 px Reference Red 外环并留 4 px offset；不得被 overflow 裁切。
- `disabled`、`loading`、`success`、`error` 都有文字状态；禁用不能只降透明度。

### 3.3 Gallery Frame / Caption

- `figure` + `figcaption`；Frame 只用于一个主角。
- Caption 字段：`title / role / date / source / status / limitation`；来源不可省略。
- 画框动画只改变 frame/content/caption，不改变 H；`prefers-reduced-motion` 立即显示完整内容。
- 图片缺失时显示可读的空状态，不用 H 形状做骨架。

### 3.4 Blog card / Article header

卡片字段：`eyebrow, title, dek, author, date, readingTime, type, image, imageAlt, href, status`。标题超长最多两行但完整 title 放 `aria-label`；图片 `alt` 描述动作/环境，不写“图片”。文章页 `<article>`、唯一 H1、发布日期 `<time datetime>`、作者链接、来源和相关推荐均为语义必需。

### 3.5 Proof metric / Data table

指标字段：`value, label, unit, period, sample, source, owner, limitation`。图表必须有表格或文字替代；颜色不是唯一编码。示意数值使用 `[00]` 或 `example` 标记，不能伪装成真实成果。数据更新要有版本和审阅人。

### 3.6 Form / Application

每个 input 有可见 label、错误文本和 `aria-describedby`；必填、隐私同意、保存期限、撤回方式清楚可见。浏览器本地摘要可以生成，但不上传、不保存敏感资料。成功页提供下一步和联系人，错误页保留已填内容。

## 4. Modules（页面模块）

### 4.1 Hero

Hero 只放一个主张、一个内容主角和一个主要 CTA；优先 5:7 或 6:6 文图关系。图片图注明确概念/真实状态；H 不叠在繁忙照片上。首屏要在 3 秒内说明“谁、为谁、做什么、下一步”。

### 4.2 System / Pathway

成长系统列表使用共享边线和编号，避免漂浮卡片。路径模块展示 `发现 → 设计 → 实践 → 呈现 → 衔接`，每一步有动作而非口号；手机退化为纵向序列，编号和标题仍保持共同左边线。

### 4.3 Insights / Blog

博客首页提供按主题、状态和日期筛选；筛选结果在 URL 中可分享，键盘可操作，有空状态和清除筛选。文章页显示“筹建中/试点/已发布/归档”状态，相关内容按主题关联而非纯热度。

### 4.4 Download / VI

下载卡必须写文件名、版本、格式、大小/页数、适用对象、SHA（若有）和权利状态。当前 VI 页以 `/vi#website-design-system` 的分区呈现组件合同、token/对比和 QA/无障碍；不创建未实现的 `/vi/components`、`/vi/tokens` 或 `/vi/accessibility` 深链接。PDF、HTML、ZIP、JSON、CSV 的版本应一致。

### 4.5 Status / Error / Empty

404、500、无结果、权限不足、网络错误都使用 Connect 语气：说明发生了什么、给出一个动作、保留导航。不要把 H 变白/黑或做旋转 loading；静态状态可用独立红色信号条。

## 5. 响应式与本地化

组件以内容断点而非设备品牌断点切换。中文长标题、英文长词、电话号码、地址、日期、阿拉伯数字和混排标点都要压力测试；不能因语言切换改变 Logo 比例。表格在小屏转为行卡或横向滚动，并提供表头关联。

支持 200% 缩放、320 px 宽、横竖屏和系统高对比。`lang="zh-CN"`，英文段落使用 `lang="en"`；日期、货币和时区按业务确认。翻译不应把“筹建中”变成“已上线”，不应把概念图写成实景。

## 6. Motion contract

默认 160/220/300 ms，网站位移 ≤4 px，可中断；禁止自动播放的长轮播。H 不旋转、不变形、不闪烁、不拆解。`prefers-reduced-motion: reduce` 下取消位移/轮播，焦点和内容顺序不变；提供静态视频尾帧。

## 7. 性能与安全

首屏仅 preload 一个主图；Logo SVG 不重复内嵌在页面；图片写 `width/height` 防止 CLS；优先 WebP/AVIF。拒绝未审计第三方脚本/字体和未知 iframe。表单不将姓名、电话、未成年人信息写进 analytics URL 或 console；下载与社交卡使用版本化路径，旧路径只做明确历史兼容。

## 8. 内容/博客编辑流程

1. 编辑提交 brief：受众、目的、主张、事实来源、状态和 CTA。
2. 内容负责人核实事实、数字、日期、关系和法定文字。
3. 设计负责人选择模式、组件和图片焦点，写 alt/图注。
4. 品牌负责人检查 Logo、红色比例、净空、版本和禁仿边界。
5. 无障碍/本地化检查键盘、对比、焦点、长串和翻译。
6. 发布后保留 URL、源文件、许可、审核人、发布日期、撤回日期和 SHA。

## 9. QA 矩阵

| 层 | 断言 | 证据 |
|---|---|---|
| Asset | 当前 HTML/CSS 无 V13/unversioned logo 引用 | route grep + manifest |
| Geometry | H `1020:1019`、`contain`、无 CSS 重绘 | DOM/CSS review |
| Contrast | 普通文字 ≥4.5:1，大字 ≥3:1 | 对比度报告 |
| Keyboard | Skip、菜单、表单、对话、焦点顺序 | 键盘录屏/清单 |
| Responsive | 320/768/1024/1440 无溢出、无截断 | 截图/浏览器记录 |
| Motion | reduced-motion 无位移和自动播放 | 系统设置测试 |
| Content | H1、日期、状态、来源、alt、链接完整 | 内容 guard |
| SEO | title、description、OG、JSON-LD、sitemap、404 | 静态 HTML 检查 |
| Performance | 首屏图像尺寸、字体/脚本来源、CLS 风险 | Lighthouse 或等效记录 |
| Rights | Logo、图片、字体、伙伴和未成年人许可状态 | rights ledger |

## 10. Release checklist

- [ ] 运行 `validate_brand_assets.py` 和网站 build/lint/test/export。
- [ ] `/vi#website-design-system` 的组件、token、QA 分区版本和下载链接一致。
- [ ] Header/Footer/favicon/manifest/OG/JSON-LD/404 同步 V14 路径。
- [ ] 旧 V13 资产仅在 `legacy` 目录，当前源码和静态 HTML 不引用。
- [ ] PDF/HTML/ZIP/JSON/CSV 的 checksum 与发布日期记录在 release manifest。
- [ ] 权利状态仍写明“公开商标使用需书面清理”，未把案例研究写成授权。
- [ ] Sites 项目若不可访问，明确标记 `deploy-blocked`，不把本地构建称为线上发布。

## 11. 组件命名与代码示例

推荐用语义类名：`.hskb-frame`, `.hskb-caption`, `.hskb-proof`, `.hskb-status`；不要用 `.red-box`, `.h-shape`, `.magic-grid` 这类把颜色或标志结构写死的名字。Logo 示例：

```tsx
<Image
  src={inverse ? "/brand/hskb-v14-reversed.svg" : "/brand/hskb-v14-primary.svg"}
  alt="博格港湾 Harbor Stem"
  width={1219}
  height={278}
  style={{ width: "clamp(160px, 18vw, 240px)", height: "auto" }}
/>
```

独立 H：

```tsx
<Image src="/brand/hskb-v14-symbol.svg" alt="" width={1020} height={1019} />
```

H 是图片资产，`alt=""` 只适用于旁边已有同等可访问名称的装饰性场景；如果它承担识别，必须提供名称。

## 12. 与外部案例的边界

Isomorphic Labs、Scenario、Saks、London Design Festival、Hyphen、AIGA 教学资源和 Hongkong Land 只提供公开方法线索： foundations/components 分层、模块化网格、长期核心＋年度表达、编辑式内容和治理。任何第三方 H、方框、棋盘、括号、动态或色值不得导入 HSKB。参见 `DESIGN_SKILL/references/research-layer-v14.2.md`。