徕本官网
品牌素材 · 供合作方取用

品牌素材包

logo 矢量、常用位图、favicon 全套、色板文件与一页规范摘要 —— 一个 zip,解压就能用。给设计师、渠道、印厂与外包: 不需要装任何东西,也不需要看网页。

Contents

包里有什么

解压后是一个 leiboo-brand-assets/ 目录,四个子目录分工明确。 需要别的尺寸或形态,联系我们 —— 不用自己从位图里裁。

leiboo-brand-assets/ ├── logo/ 矢量标识 5 形态(优先用这套) │ ├── helloleiboo-wordmark.svg 单行字标(黑字 + 红 i) │ ├── helloleiboo-wordmark-accent.svg 同上,红色点缀版 │ ├── helloleiboo-lockup.svg 两行锁定版(页头/页脚用) │ ├── helloleiboo-badge.svg 徽章 │ ├── helloleiboo-icon.svg 方形图标 │ └── png/ 同上的位图:黑 / 白 / 红 三态 ├── icon/ 头像与 favicon 全套 │ ├── icon.svg favicon.ico │ └── icon-32 / -64 / -180 / -256 / -512 .png ├── color/ │ ├── tokens.css 色值真源(设计变量) │ └── palette.json 机器可读:色值 + PANTONE + 用途 + 用色比例 └── README.md 一页规范摘要:三个不许改、最小尺寸、留白、字体栈

leiboo-brand-assets

自包含素材包:不依赖任何外部文件,也不需要联网。色值取自同一份 tokens.css 真源 —— 与官网、技能包里那份一致。

版本1.0.0
大小354 KB
更新2026-09-24
校验21a319b6
下载素材包(354 KB)
Color

色值速查

下面的色值是构建时从 color/tokens.css 读出来注入的, 不是手抄的 —— 所以它永远和包里那份真源一致。

品牌红#E60012 · 强调色,占比 ≤5%
品牌浅灰#F1F3F2 · 浅色底
品牌黑#000000 · 黑底区块
正文近黑#1B2120 · 正文文字
次要文字#6F7876 · 说明、图注
分隔线#DCE1DF · 描边、分隔
浅底#F3F5F4 · 隔行区块
产品色 2368#6161D3 · 品类标签
产品色 636#A1D9F3 · 品类标签
产品色 7404#F1DB65 · 品类标签
产品色 2040#D64565 · 品类标签

红是强调色,不是主色 —— 界面上占比控制在 5% 左右; 一屏只允许一个品牌红实心主按钮,其余按钮一律描边。

目标用色比例:白与极浅灰约 64% · 近黑约 22% · 中灰约 9% · 品牌红约 5%。正文与标题不上品牌色,层级靠字重与字号拉开。

How to use

三种最常见的用法

素材包是「拿走就用」的东西,不涉及任何安装。下面三种覆盖绝大多数场合。

你要做的事怎么做
做一张主图 / 详情页 把 logo/png/ 里对应底色的那张拖进画板; 或导入 logo/*.svg 当矢量用(放大不糊)
建一套设计变量 把 color/tokens.css 直接贴进 Figma 的 Variables (或代码里的样式表);color/palette.json 给不认 CSS 的工具用
交印厂 / 外包 整个包发过去,并说明「色值以 README.md 里的 PANTONE 为准」;矢量文件本身就是印刷用的那套

细则(最小高度、留白 25%、不加阴影描边、不换色)都写在包里的 README.md,一页就够。

Identity

三个不许改

这三条是字标的识别点,任何一改就不是它了 —— 其余用法都比较宽松。

① 字形

重几何小写

字标是定制的小写无衬线,不要改成大写,也不要换字体。

② 细节

短「l」 —— 只到 x 高度

「l」与其余小写字母齐平,补长即毁设计。

③ 识别锚点

斜切的红「i」

点是字色,下段是分离的、向右斜的红笔画 —— 不能改成别的颜色。

另外

只等比缩放

不加阴影、描边、渐变、外发光,不倾斜、不加透视,不压边压图。