# Website system V14.2

## Single source and mapping

网站机器 token 的权威副本是 canonical 项目 `public/brand/hskb-v14-website-tokens.json`；扩展目录的 `assets/tokens/hskb-vi-v14.2.json/css` 与它保持同一 web 子集。若两者出现差异，以网站 token 为实现源，并在变更日志中说明映射。

当前 web 常量：content max `1360px`；mobile ≤`767px`、tablet `768–1199px`、desktop `1200–1439px`、wide ≥`1440px`；桌面 12 栏、平板 8 栏、手机 4 栏；gutter 16/20/24；动效 160–300 ms、位移上限 4 px；普通文字对比 ≥4.5:1。

## Asset matrix

| 表面 | 资产 | 最小/比例 | alt/状态 |
|---|---|---|---|
| 桌面 Header | `hskb-v14-primary.svg` 或 reversed | 216–240 px，绝不低于 160 px | `博格港湾 Harbor Stem` |
| 手机 Header | `hskb-v14-symbol.svg` | `1020:1019`，contain | 旁有名称时 alt 空，否则给名称 |
| Favicon/PWA | favicon/192/512/maskable | 使用专门数字资产 | 不从组合标裁切 |
| 社交卡 | `hskb-v14-social-card.png` | 1200×630 | metadata + alt |
| Gallery Frame | CSS/approved frame SVG | 一个主角/一个红色信号 | `figcaption` 完整字段 |

## Page contracts

每页至少提供唯一 H1、摘要、主任务、当前状态、一个主 CTA、来源/许可（如有）和 canonical URL。博客详情页还要有作者、日期、阅读时长、图片 alt、引用来源和相关内容。VI 子页必须显示版本、身份母版、权利状态和下载文件 SHA。

## Responsive behavior

组件按内容压力在 12→8→4 栏退化；不依赖负 margin 或固定高度。表格在手机变为可滚动区域并保留表头；Hero 文图由左右变上下；下载卡保持文件名/版本/权利信息，不只显示图标。测试 320、375、768、1024、1440 px 和 200% 缩放。

## Browser states

每个异步模块必须可见地表达 loading、empty、error、success、archived；重试按钮可键盘触发。错误/成功不能只用红绿颜色。动画失败或禁用时内容仍立即可读。

## SEO/metadata

同步 Header、Footer、favicon、manifest、OG/X card、JSON-LD、robots、sitemap、404、下载链接和静态导出。详情页用真实记录生成 title/description/OG，不复用不相关的 generic card。所有生产 URL 使用 `/brand/hskb-v14-*` 版本化路径。
