文档官网
官网用法
导航、Hero、页脚和其他区块的规则与核对清单。
导航
- 用彩色组合标
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 核对板
下面每块都是中英文页面里的原样组件。本板是规范展示,中英文标语和多组三色点并排只为对照,不代表任何一个页面视口。