品牌素材包
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 一页规范摘要:三个不许改、最小尺寸、留白、字体栈
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」
点是字色,下段是分离的、向右斜的红笔画 —— 不能改成别的颜色。
另外
只等比缩放
不加阴影、描边、渐变、外发光,不倾斜、不加透视,不压边压图。