文档返回官网官网

文档官网

官网用法

导航、Hero、页脚和其他区块的规则与核对清单。

现行· VI Spec v1.2 · 来源 HAJI-8 · 2026-10-23

官网设计 v1.2 · 来源 HAJI-9 · 2026-10-23

导航

  • 用彩色组合标 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。
  • 中文版和英文版规则完全相同。

核对清单

依据 hajimi VI Spec v1.2(HAJI-8)。下面每块都是中英文页面里的原样组件,评审只看这张就能核对。本板是规范展示,中英文标语和多组三色点并排只为对照,不代表任何一个页面视口。

  • 导航:彩色组合标 hajimi-lockup-color,0°,可见高 40(吸顶 32),可见左缘对齐 1200 内容区左边。「粉点 + HAJIMI」占位已删除。
  • Hero:只有 1 张彩色图形标贴纸,−6°,卡片可见边长约 161px,位于贴纸堆最上层;主标题不变,Hero 里没有标语。
  • 页脚:左侧 paper 单色组合标,右侧三色标语(中文站用中文、英文站用英文),左右分侧不叠成签名;标语 x 高 24.8 ≥ 组合标 19.1。
  • 三色点:每个视口只有一组。首屏 = 导航组合标(图形标只有一颗粉点,不算一组);页脚屏 = 三色标语,此时吸顶组合标是 ink 单色。
  • 已清掉的第二组三色点:评价区原先的粉 / 柠檬 / 橘描边头像,改成同色头像 + 图标。成功态撒花的圆点改成条形碎片。
  • 字体:中文标题从站酷快乐体换成 Noto Sans SC Black 900,字号不变;英文仍是 Unbounded Bold。标志和标语都是路径,不是 live text。
  • 询价区(紫底)、品牌墙不放 hajimi 标志;页面里没有品牌签名。案例卡悬停投影改为 8/8/0。口碑区数字「120万+」从橘色改为 ink,粉和橘不做文字色。

VI 核对板

下面每块都是中英文页面里的原样组件。本板是规范展示,中英文标语和多组三色点并排只为对照,不代表任何一个页面视口。

VI 核对板 · 2884 × 5036下载原图 · 919 KB
目录

下载原图