## 结论：hajimi VI Spec v1.2（现行）

这份 Spec 是 hajimi 视觉规则的唯一依据，取代 HAJI-4 方案和 HAJI-6 各条回复里的零散规则。资产沿用 v1.1 素材包（`hajimi-vi-v1.1.zip`，本评论附件），v1.1 规范板（`hajimi-vi-v1.1.png`）作为图示。板和本文冲突时，以本文为准。

整套 VI 只让人记住一件事：**三颗贴纸点**。规则最终都落在一条上：**同一画面只出现一组三色点**。

---

### 0. 文件

| 用途 | 文件（`hajimi-vi-v1.1.zip` / `svg` 或 `png`） |
|---|---|
| 组合标 | `hajimi-lockup-color.svg`（浅底）· `-color-reverse.svg`（ink 底）· `-ink.svg` / `-paper.svg`（单色） |
| 字标 | `hajimi-wordmark-color.svg` · `-color-reverse.svg` · `-ink.svg` · `-paper.svg` |
| 图形标 | `hajimi-symbol-color.svg` · `-ink.svg` · `-paper.svg`；扁平版 `hajimi-icon-flat.svg` |
| 标语 | `hajimi-slogan-en-color.svg` · `-color-reverse.svg` · `-ink.svg` · `-paper.svg`；中文同名 `-cn-`；场景版 `-en-thanks-color.svg`、`-en-chat-color.svg` |
| 品牌签名 | `hajimi-signature-en-color.svg` / `-reverse.svg`，中文 `-cn-` 同名 |
| 网站图标 | `favicon.svg`、`favicon-32.png`、`apple-touch-icon-180.png`、`hajimi-icon-512.png` |

所有标志和标语都是转好轮廓的路径文件，不依赖字体。v1.0 的 `hajimi-logo-v1.zip` 和 `hajimi-logo-board.png` 作废。

**尺寸都按可见图形量，不含 SVG 文件自带的留白。** 组合标和字标的文件高 277，其中可见图形占 229，也就是可见高度约等于文件高 × 0.83。

---

### 1. 让人记住的一件事，以及和 Halo 的差异

**三颗贴纸点**：粉 → 柠檬 → 橘，每颗都带一圈墨线环。它们出现在字标 hajimi 的 j、i、i 上，出现在英文标语 share. join. smile. 的 j、i、i 上，也出现在中文标语的三个停顿上。整体气质是「一面可以玩的周边墙」：暖白底，高饱和撞色，粗描边，硬投影，倾斜贴纸。

| | Halo | hajimi |
|---|---|---|
| 气质 | 稳重、企业级 | 好玩、年轻、有态度 |
| 色彩 | 低饱和、大量纯白 | 暖白 paper 底加三颗撞色点 |
| 组件 | 扁平卡片、柔和阴影 | 2px 墨线描边、ink 硬投影、倾斜贴纸 |
| 图像 | 商务人像、场景摄影 | 产品平铺抠图，做成贴纸 |
| 字形 | 现成字体 | 自绘的圆胖几何小写字标 |
| 文案 | 「Elevate your brand」类口号 | 口语化，三个词的标语 |

---

### 2. 三色点：核心规则

**固定顺序，任何地方都不能换：**

| 点 | 颜色 | 字标 | 英文标语 | 中文标语 |
|---|---|---|---|---|
| 点 1 | 粉 `pink` #FF6FB5 | j | join 的 j | 哈喽 后 |
| 点 2 | 柠檬 `lime` #D4FF3A | 第一个 i | join 的 i | 记住 后 |
| 点 3 | 橘 `orange` #FF7A2F | 第二个 i | smile 的 i | 迷上 后 |

图形标上只有一颗点，固定是点 1 粉。

- **墨线环是点的一部分。** 环宽等于点半径的 24%，颜色永远是 ink。彩色版本不能去掉墨线环，否则柠檬点在浅底上会看不见。
- **单色版本没有三色。** 点和字母同色，也不带墨线环。
- **什么算「一组三色点」**：彩色字标（包括组合标里的字标）算一组，三色标语也算一组。彩色图形标只有一颗粉点，不算一组。
- **同一画面最多一组。** 网页的「同一画面」指同一个视口，滚动过程中的每一屏都算；印刷品指同一个可视面。
- **彩色图形标**可以和一组三色点同屏，但同屏最多 1 个，组合标里自带的那个不算。
- **谁带三色点，谁就是主角。** 不带三色点的一方是配角，它的 x 高不能超过主角的 x 高。
- **带墨线环的纯色实心圆点是品牌点专属。** 列表点、轮播指示点、状态点这类装饰圆点可以用单一撞色，但不能加墨线环，也不能把粉、柠檬、橘三色圆点按任何顺序排成一组。编号圆、图标圆里面有内容，所以不受这条限制。
- **唯一例外是连续重复图案**，比如封箱胶带、包装纸、满印面料。这些图案可以按固定间距重复同一句三色标语，但同一个可视面上不能再出现彩色字标或彩色组合标。

---

### 3. 标志

**构成**
- **字标**：自绘小写 hajimi。笔画粗 34，x 高 110，圆肩，平切口；j 的钩子缩进到 a 的下方。字母只用 ink 或 paper，主色紫不进字标。
- **图形标**：一个 h，右腿顶着粉点，读作「hi」。底子是主色紫的圆角卡片，带 ink 描边和 ink 硬投影。
- **组合标**：图形标在左，字标在右，比例和间距按文件，不准拆开重排。
- **品牌签名**：组合标下面放标语，标语宽度和字标对齐，放在 j 的降部下方 0.3 个 x 高处。签名里的标语只用单色，直接用签名文件，不手拼。

**底色和版本**

| 底色 | 用什么 |
|---|---|
| paper、白、lime | 彩色版（`-color`） |
| ink | 反白彩色版（`-color-reverse`） |
| 主色紫 | 只放字标反白（`hajimi-wordmark-color-reverse.svg`），不放组合标和图形标（紫卡片会消失） |
| 粉、橘、深色面料、照片干净区域 | 单色版。网页上用 ink；面料上 ink 或 paper，取对比更高的那个 |
| 烫金、刺绣、丝印、激光 | 单色版做形状模板，点和字母同色 |

**净空**：四周至少留 1 个 x 高，x 高就是字母 a 的高度。
- 组合标和字标：x 高 ≈ 可见高度 × 0.48。
- 图形标：净空 ≥ 卡片可见边长 × 0.44。

**最小尺寸**（按可见尺寸量）

| | 屏幕 | 印刷 | 量哪一边 |
|---|---|---|---|
| 组合标 | 96px | 20mm | 宽 |
| 字标 | 72px | 15mm | 宽 |
| 图形标 | 32px | 8mm | 卡片边长 |
| 更小时 | 改用扁平图标 `hajimi-icon-flat.svg`（无描边、无投影），最小 16px | | |

**倾斜**
- 组合标、字标、品牌签名一律 0°。
- 图形标只有当贴纸用时可以倾斜，范围 −6° 到 +6°。
- 标语印在贴纸上时随贴纸倾斜，同样不超过 ±6°。标语本身不单独倾斜。

---

### 4. 标语

**主标语**：**share. join. smile.** / **哈喽. 记住. 迷上.**

英文每个词里各藏一组字母：s**ha**re、**j**o**i**n、s**mi**le，连起来读就是 ha · ji · mi。中文用谐音：哈 hā · 记 jì · 迷 mí。中英两句是姊妹句，不互相翻译，也不同屏出现（规范板的展示除外）。

**写法**
- **大小写**：一律小写，句首、标题里、正文里都一样。
- **标点**：每个词后面一个半角句点加一个空格。不加感叹号、逗号或 &。
- **中文纯文本**：写作「哈喽. 记住. 迷上.」。旧写法「哈喽，记住，迷上。」停用。
- **字体**：英文 Unbounded Bold，中文 Noto Sans SC Black，都已转成路径。**只用文件，不准用字体重打。** 在网页上用 SVG 加 `alt`，不做成 live text。正文里顺带提到标语时可以写纯文本，但不上色、不放大成标题。

**场景换词**（只限英文）
- 只能换第一个词，join. smile. 永远不动。
- 新词必须是一个小写英文单词，含连续的字母 ha，并且不含 i 和 j。带点字母会让点数超过三颗、点序乱掉。
- 现行三个：

| 标语 | 场景 |
|---|---|
| `share.` join. smile. | 主标语：官网、通用包装 |
| `thanks.` join. smile. | 员工认可、入职礼盒 |
| `chat.` join. smile. | 活动、社群、快闪 |

- 新增场景词要先经创意总监确认，再用素材包里的 `source/slogan.py` 生成路径文件。
- 中文标语不做场景换词。

**用色**
- **单独使用时**（帆布袋、封箱胶带、贴纸、官网页脚），三颗点上三色，带墨线环。字母浅底用 ink，深底用 paper。
- **和彩色字标或彩色组合标同屏时**，标语用 ink 或 paper 单色，而且是配角，x 高不超过字标的 x 高。
- **和单色标志同屏时**，标语可以上三色，这时标语是主角，标志的 x 高不超过标语的 x 高。

**尺寸**：最小宽度 120px / 25mm；四周净空 ≥ 标语自身的 x 高。

---

### 5. 色彩

| Token | 色值 | 用途 |
|---|---|---|
| `ink` | #141414 | 文字、描边、硬投影、墨线环 |
| `paper` | #FFF8EC | 页面底色。大面积不用纯白 |
| `white` | #FFFFFF | 卡片底、吸顶导航底 |
| `primary` 电光紫 | #6C4BFF | 图形标卡片底、主按钮、链接、询价区底 |
| `pink` · 点 1 | #FF6FB5 | 品牌点、色块、贴纸底 |
| `lime` · 点 2 | #D4FF3A | 品牌点、色块、高亮 |
| `orange` · 点 3 | #FF7A2F | 品牌点、色块、编号 |
| 辅助色 | `paper-deep` #F2E8D5 · `muted` #4A4A4A · `placeholder` #6B6B6B · `primary-soft` #E9E3FF · `note` #FFF3A6 | 骨架屏、次要文字、浅底 |
| 状态色 | `success` #0E7C3A · `error` #D42A20 · `error-soft` #FDE7E5 | 只用于表单状态 |

**文字用色**
- 文字只用 ink、paper、白、muted。
- primary 可以做链接和强调文字，但只能放在 paper 或白底上，字号 ≥ 14px（对比度 4.87:1）。
- lime 文字只能放在 ink 底上。
- 粉和橘永远不做文字色。
- 撞色只做面、色块和品牌点。
- 不准用渐变，不准调透明度去做新的颜色。唯一例外是 ink 底上的 paper 次要文字，可以用 80% 或 70% 透明度。

---

### 6. 字体

全部是 Google Fonts，免费可商用。

| 角色 | 中文站 | 英文站 |
|---|---|---|
| 展示标题（Hero、区块标题） | **Noto Sans SC Black 900** | Unbounded Bold 700 |
| 小标题、按钮 | Noto Sans SC 700 | Unbounded 600 / 700 |
| 正文 | Noto Sans SC 400 / 500 | Noto Sans 400 / 500 |
| 数字、中文里夹的英文词 | Unbounded Bold | Unbounded Bold |

**字号阶梯**
- 中文：72 / 48 / 32 / 24 / 18 / 16 / 14，另有 13 只用于标签和辅助说明。
- 英文：Hero 56、区块标题 40，这两档字距 −1px；其余和中文一样。
- 正文行高 1.6。

**站酷快乐体（ZCOOL KuaiLe）停用。** 它的手写稚气和自绘几何字标不是一家人，中文标语也已经用 Noto Sans SC Black。中文标题和标语用同一个字族。

---

### 7. 形状、描边、投影、贴纸质感

**圆角**

| 元素 | 圆角 |
|---|---|
| 卡片 | 20 |
| 输入框、下拉框 | 14 |
| 按钮、Chip、标签、贴纸 | 胶囊 999 |

图形标卡片的圆角以文件为准。

**描边**

| 元素 | 描边 |
|---|---|
| 所有组件轮廓 | 2px ink |
| 小标签（高 ≤ 28px） | 1.5px |
| 输入框的聚焦或错误态 | 3px，primary 或 error 色 |
| 分割线 | 1px |

描边不用其他颜色，也不用虚线。

**投影**：只用 ink 实色硬投影，模糊值永远是 0，方向永远朝右下。

| 档位 | 用在哪里 |
|---|---|
| 3 / 3 / 0 | 小贴纸、标签 |
| 4 / 4 / 0 | 导航小按钮、图标按钮、步骤编号 |
| 6 / 6 / 0 | 默认卡片、默认按钮 |
| 8 / 8 / 0 | 悬停。比默认多 2px，同时上移 2px |
| 10 / 10 / 0 | 只用于浮层和弹窗 |
| 0 | 按下（像被按扁了）、加载、禁用 |

吸顶导航底边允许用 0 / 4 / 0 的 ink 硬投影。

**贴纸质感**：实色平涂底，加 2px ink 描边，可以带硬投影。
- 底色可选 paper、白、`primary-soft`、粉、柠檬、橘。
- 没有纹理、高光、模切白边，也没有发光。HAJI-4 里写的「白色外描边」停用，统一成墨线。

**倾斜**

| 元素 | 角度 |
|---|---|
| 装饰贴纸 | ±3° 到 ±10° |
| 品牌资产贴纸（图形标、标语） | ±6° 以内 |
| 卡片 | 0° 或 ±1.5° |

成功态撒花只用矩形和条形碎片，不用圆点，碎片角度不限，只播一次。

**栅格与动效**
- 12 列栅格，内容宽 1200px，列间距 24px，区块上下间距 120px。
- 动效统一 200ms ease-out。
- 开启「减少动态效果」时，关闭视差、横滚、平滑滚动和撒花。

---

### 8. 红线

1. 同一画面出现两组或更多三色点，包括彩色字标和三色标语同屏，以及中英文标语同屏。
2. 用任何字体重打标志或标语，包括用 Unbounded 打 hajimi，以及在网页上用 live text 加彩色圆点拼标语。
3. 标志或标语改成大写或首字母大写，改标点，加感叹号、逗号或 &。
4. 换点的颜色或顺序；彩色版去掉墨线环；手画品牌点。
5. 渐变、模糊阴影、发光、描边改色；投影不是 ink 实色。
6. 拉伸、压扁、裁切、加粗描边，或拆开组合标重排。
7. 组合标、字标、签名倾斜；图形标或标语贴纸倾斜超过 ±6°。
8. 主色紫进字标或标语；在紫底上放组合标或图形标。
9. 低于最小尺寸还用带描边的版本。
10. 用粉、柠檬、橘圆点做成一组装饰，或给装饰圆点加墨线环。
11. 英文换词时动了 join. smile.，或新词不带 ha、带 i / j；中文标语换词或改回「，。」。
12. 用站酷快乐体，或用规定以外的字体做标题。

---

### 9. 官网用法（只定规则，不画页面）

**导航**
- 用彩色组合标 `hajimi-lockup-color.svg`，左对齐到 1200 内容区左边，点击回到页面顶部，`alt="hajimi"`。
- 默认导航栏高 80px，paper 底。组合标可见高 40px，也就是把 SVG 文件按高 48px 放置。
- 吸顶导航栏高 64px，白底。组合标可见高 32px，SVG 文件按高 39px 放置。两种尺寸上下都满足 1 个 x 高的净空。
- **页脚三色标语进入视口时**，吸顶导航里的组合标切换成 `hajimi-lockup-ink.svg`，200ms 淡入淡出；减少动态效果时直接切换。页脚离开视口后切回彩色。
- 现有的「粉点 + HAJIMI」占位全部删除。

**Hero**
- 放 1 张彩色图形标贴纸 `hajimi-symbol-color.svg`。
- **角度**：默认 −6°，允许 −6° 到 −3° 或 +3° 到 +6°。不用 0°，因为 0° 看起来像 App 图标，不像贴纸。不超过 ±6°。
- **尺寸**：卡片可见边长 120 到 200px。
- 放在贴纸堆最上层，不被任何东西遮挡，和文字、按钮保持净空。
- 文件自带硬投影，不要再加 CSS 投影。视差只做位移（≤ 12px），不改角度；悬停不加旋转。
- Hero 里不放标语，主标题照旧用「把品牌，做成大家抢着要的东西」，标语不替换它。

**页脚**（ink 底）
- **左侧**放单色组合标 `hajimi-lockup-paper.svg`。
- **右侧**放三色标语 `hajimi-slogan-en-color-reverse.svg`；中文站用 `hajimi-slogan-cn-color-reverse.svg`。页面是什么语言就用什么语言的标语。
- 两者分在左右两侧，不上下叠成签名，因为签名里的标语只能单色。
- 标语是主角，组合标的 x 高不超过标语的 x 高；标语宽 ≥ 120px。
- 页脚其他位置不再出现任何彩色圆点。

**其他区块**
- 品牌墙（ink 底）只放合作品牌，不放 hajimi 标志。
- 询价区（紫底）不放 hajimi 标志。紫底只能用字标反白，而字标反白会和导航组合标形成第二组三色点。
- 列表点、步骤编号、轮播指示点各用单一颜色。
- 页面里不出现品牌签名。分享图（OG 图）可以用彩色签名。
- 网站图标用 `favicon.svg` 和 `favicon-32.png`，iOS 用 `apple-touch-icon-180.png`。
- 中文版和英文版规则完全相同。

---

### 10. 现行版本说明（本 Spec 取代了哪些旧规则）

| 旧规则 | 现行 |
|---|---|
| HAJI-4：中文标题用站酷快乐体 | Noto Sans SC Black 900 |
| HAJI-4：贴纸用白色外描边 | 2px ink 描边 |
| HAJI-4：贴纸倾斜 ±3–8°；v1.1 板：±3–10° | 装饰贴纸 ±3–10°；品牌资产贴纸 ≤ ±6° |
| HAJI-4：主色用于链接；v1.1 板：正文只用 ink / paper / 白 | 正文只用 ink / paper / 白 / muted；primary 只做链接和强调文字（paper 或白底，≥ 14px） |
| HAJI-6 v1.0：导航组合标「高 40px」 | 可见高 40px（文件 48px）；吸顶状态可见高 32px |
| HAJI-6：标语英文首字母大写、不上三色点 | 一律小写；单独使用时上三色 |
| HAJI-6：「好到舍不得扔」等标语方向 | 停用 |
| HAJI-6：中文标语「哈喽，记住，迷上。」 | 纯文本写作「哈喽. 记住. 迷上.」，图形版用路径文件 |
| v1.1 板：「标语 x 高不超过字标 x 高」 | 扩展为「带三色点的是主角，配角 x 高不超过主角」 |
| v1.1 板上的官网示意图把彩色导航和三色页脚画在同一张图里 | 页脚进入视口时，导航切换成单色 |

---

### 11. 现有 pen 与 Spec 的差异（第二步照此修改）

`hajimi-www.pen` 和 `hajimi-www-en.pen` 都要改：

1. 导航和页脚里的「粉点 + HAJIMI」占位，按第 9 节换成正式文件。
2. 中文版的 ZCOOL KuaiLe 标题（48 / 64 / 72）全部换成 Noto Sans SC Black 900，字号不变，换行按新字宽重排。
3. `Card / Case / Hover` 的投影从 10/10/0 改成 8/8/0。
4. 页脚右侧加三色标语。
5. 状态板里加一个「吸顶导航 · 页脚可见」状态，这时组合标是单色版。
6. Hero 贴纸堆里加图形标贴纸，默认 −6°。