赞助 webpack,同时从官方商店购买衣服 所有收益将转到我们的 open collective!

品牌指南

在这里你可以找到 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 Collective 和 Threadless 的帮助下,在 官方 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 许可。请查看我们的 遵循许可 页面,以获取使用指南。


贡献人员