# HAAVK INC · 三版设计说明

## 每版一句话主张

- **v1.html｜经纬与根基**：以森林绿、浅薄荷和青柠节点搭起平衡的左右构图，让经纬球体与层叠基础图形共同表达软件公司的稳健秩序。
- **v2.html｜耐心的轨道**：以陶土、暖白和浅柠檬色展开居中大标题与横幅同心航线，用温暖而克制的体量感表达长期建设的耐心。
- **v3.html｜层叠的远见**：以靛蓝、冰蓝和青柠强调色连接错位标题与高挑弧面，通过纵深和留白呈现科技与旅行交汇的张力。

## 共同设计语言

以下规则供后续 StaysPerk 设计逐项对照；本次仅制作 HAAVK 官网，不声称已经与尚未制作的 StaysPerk 页面完成视觉核验。

1. **字体体系**：全部使用 Helvetica Neue / Helvetica / Arial 无衬线系统栈；正文 16px / 24px，hero 副文至多 17px / 27px；H1 约 60px、500 字重。唯一衬线签名是每页 H1 中一个 Georgia Italic 转折词；正文、字标和其余标题均不使用衬线。眉标 13px、全大写、拉开字距、浅彩胶囊。移动端递减字号，不改变层级。
2. **配色逻辑**：每版都采用“深色主墨＋同色相淡底＋中间调线条＋浅青柠强调色”的同一角色系统，强调色只用于主按钮和图形节点，不用来包装资质。v1 为森林绿（#163E36）／薄荷（#EAF3ED）／青柠（#D9EB79）；v2 为陶土（#713D2D）／桃白（#F5E9E1）／浅柠檬（#E8EEAC）；v3 为靛蓝（#263F78）／冰蓝（#EDF1FB）／青柠（#DBF48A）。后续 StaysPerk 应沿用选定版本的角色色值，而非另起配色体系。
3. **间距节奏**：最大 1200px 版心；以 8px 基础网格组织，桌面主要区块上下 128px、移动端 80px；副节拍为 24 / 32 / 48 / 64px，文字与插图形成疏密变化。图形面板基础圆角 16px，按钮圆角 7px。页尾联系与页脚连续构成一个深色区域，与独立观点幅一起将全页深色区域控制在两处。
4. **图形语言**：全部为内联抽象 SVG，无照片、界面仿图或数据面板；共用细线经纬、同心圆、弧线路径、端点与层叠半透明面。浅彩底、细描边、静态网格纹理与微阴影构成面板层次；圆角长拱是基础面板的几何变奏。入场采用 440ms 透明度与 14px 位移，图文错开 100ms；悬停采用 240ms 透明度与小位移，减少动态偏好下关闭动效。后续 StaysPerk 应复用这些组件与参数。

## 差异对照

| 版本 | Hero 构图 | 文字字标带 | 深色观点幅 |
| --- | --- | --- | --- |
| v1 | 左文右图，经纬球体嵌入方形浅绿面板 | 白底通栏、裸字横排 | 非对称双栏，低透明度经纬弧线 |
| v2 | 居中标题，下方完整横幅同心航线 | 接续图形横幅的暖色底座、整带圆角收束 | 居中大陈述，背后整幅同心圆 |
| v3 | 左侧标题错位，右侧高挑层叠拱面 | 独立冰蓝通栏、裸字横排 | 纵向几何引导与左对齐大陈述 |

## 自评首选

**保留 v1**：经纬球体与层叠结构让科技属性可感知，同时把文字、图形和审查所需的公司事实平衡得最稳妥，也最便于延展成 StaysPerk 的共同界面语言。

## 文件与交互

- 三个 Home 完整包含全部定版区块；三个 `v*-inner.html` 为对应的完整 Platform 内页。
- CSS、脚本和 SVG 均已内联，不依赖外部字体、图片、脚本或样式；断网可打开。外部链接仅为指定的公司邮箱与 StaysPerk 网站。
- Home 与 Platform 可本地互相跳转。`/platform` 映射到对应 `v*-inner.html`；未制作独立页的 `/travel-services` 与 `/company` 导向 Home 的对应内容区块，逻辑路径保留在 `data-route` 属性。导航 Partners 与 Contact 也导向对应区块。没有制造空白页面。
- 移动端为单列，导航采用全屏菜单，含关闭键、Esc 关闭、焦点循环和背景交互锁定；无 JavaScript 时正文仍完整可读。
- 所有按钮位置保持同一对措辞、先后顺序、填色和尺寸；页头只放主按钮。伙伴仅以五个单色文字字标出现，没有标题或背书文案。
- 资质只以任务书指定的事实文字平实出现；Home 按定版文案分别保留 Travel 正文、事实条和共用页脚的相关文字，不增加资质展示模块。

## 验证记录

- 六页均在真实 Chromium 浏览器中检查 1440px、390px 与 320px 宽度，未发现横向溢出或未呈现的正文。
- 已验证全屏菜单的背景锁定、焦点循环、Esc 关闭、选项点击关闭，以及 Home／Platform 的实际本地跳转。
- 已检查减少动态效果偏好与禁用脚本时的正文可读性。
- 已逐段核对标题和段落来自任务书原文，并检查指定邮箱、指定外链、版权、伙伴字标、按钮对顺序、全部本地链接、唯一 SVG 标识和自包含资源；页面文本中的数字仅为任务书已有年份。