品牌指南

在这里你可以找到 webpack 项目的品牌指南、资源和许可证。有关更多信息,请通过查看我们官方 media 仓库,并找到许可证 来了解。点击任意图片下载它们。

名称

webpack 应当总是以小写字母书写。即使在一句话的起始位置也是如此。

logo

webpack logo 应放置在白色背景上,其周围有足够间距,如下所示:

webpack logo 默认在浅色背景上,并保持适当间距

svg | png | jpg

只需将内部深蓝色正方体的大小加倍,就可以知道 logo 应占据多大空间。

对于深色背景,可以使用 logo 反色版本:

webpack logo default with proper spacing on light background

svg | png | jpg

请尽可能使用 图标+文本 的组合方式。

只包含图标

图标旨在用于布局有限的区域。如前所述,最好选择 图标+文字 的组合方式。

icon example

svg | png | jpg

适用于较大区域的正方形尺寸图标(例如,头像或个人图片):

icon square big example

svg | png | jpg

适用于较小区域的正方形尺寸图标(例如,favicon):

icon square small example

svg | png | jpg

对于那些遵循我们的指南,并已经深入了解的人,我们还制作了一个专门用于自定义 emoji 符号的特殊小尺寸图片(例如,在 slack 或 gitter 频道 ;))

icon square small example

字体

我们使用来自 Geomanist Medium 这个网站,由一群极具天赋的人所设计的 Atipo Foundry 这款漂亮字体,他们通过 'pay what you want' 的模型,提供完整字体系列。

调色板

以下颜色在整个网站中,以各种组合形式使用,并且在 Open CollectiveThreadless 的帮助下,在官方 webpack 商店我们推出的时尚服装系列中,也用到这些颜色!

颜色名称
HEX 编号
RGB 编号
示例
颜色名称
Malibu:
HEX 编号
HEX #8dd6f9
RGB 编号
rgb: 141, 214, 249
示例
 
颜色名称
Denim:
HEX 编号
HEX #1d78c1
RGB 编号
rgb: 29, 120, 193
示例
 
颜色名称
Fiord:
HEX 编号
HEX #465E69
RGB 编号
rgb: 70, 94, 105
示例
 
颜色名称
Outer Space:
HEX 编号
HEX #2B3A42
RGB 编号
rgb: 43, 58, 66
示例
 
颜色名称
White:
HEX 编号
HEX #ffffff
RGB 编号
rgb: 255, 255, 255
示例
 
颜色名称
Concrete:
HEX 编号
HEX #f2f2f2
RGB 编号
rgb: 242, 242, 242
示例
 
颜色名称
Alto:
HEX 编号
HEX #dedede
RGB 编号
rgb: 222, 222, 222
示例
 
颜色名称
Dusty Gray:
HEX 编号
HEX #999999
RGB 编号
rgb: 153, 153, 153
示例
 
颜色名称
Dove Gray:
HEX 编号
HEX #666666
RGB 编号
rgb: 102, 102, 102
示例
 
颜色名称
Emperor:
HEX 编号
HEX #535353
RGB 编号
rgb: 83, 83, 83
示例
 
颜色名称
Mine Shaft:
HEX 编号
HEX #333333
RGB 编号
rgb: 51, 51, 51
示例
 

此外,可以直接从下面的链接,获取这些类型的文件:

psd | png | ai | svg

许可

logo 和品牌名称并不遵循 MIT 许可。请查看我们的遵循许可页面,以获取使用指南。


原文:https://webpack.js.org/branding/


贡献人员