品牌指南

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

名称

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

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

webpack logo default with proper spacing on light background

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

字体

我们使用由一群极具天赋的人所设计的 Atipo Foundry 这款漂亮字体,它来自 Geomanist Medium 这个网站,并通过“随你付”的模式来提供完整的字体族。

调色板

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

颜色名称 HEX 码 RGB 码 示例

颜色名称

HEX 码

RGB 码

示例

Malibu:

HEX #8dd6f9

HEX #8dd6f9 rgb: 141, 214, 249
 

颜色名称

HEX 码

RGB 码

示例

Denim:

HEX #1d78c1

HEX #1d78c1 rgb: 29, 120, 193
 

颜色名称

HEX 码

RGB 码

示例

Fiord:

HEX #465E69

HEX #465E69 rgb: 70, 94, 105
 

颜色名称

HEX 码

RGB 码

示例

Outer Space:

HEX #2B3A42

HEX #2B3A42 rgb: 43, 58, 66
 

颜色名称

HEX 码

RGB 码

示例

White:

HEX #ffffff

HEX #ffffff rgb: 255, 255, 255
 

颜色名称

HEX 码

RGB 码

示例

Concrete:

HEX #f2f2f2

HEX #f2f2f2 rgb: 242, 242, 242
 

颜色名称

HEX 码

RGB 码

示例

Alto:

HEX #dedede

HEX #dedede rgb: 222, 222, 222
 

颜色名称

HEX 码

RGB 码

示例

Dusty Gray:

HEX #999999

HEX #999999 rgb: 153, 153, 153
 

颜色名称

HEX 码

RGB 码

示例

Dove Gray:

HEX #666666

HEX #666666 rgb: 102, 102, 102
 

颜色名称

HEX 码

RGB 码

示例

Emperor:

HEX #535353

HEX #535353 rgb: 83, 83, 83
 

颜色名称

HEX 码

RGB 码

示例

Mine Shaft:

HEX #333333

HEX #333333 rgb: 51, 51, 51
 

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

psd | png | ai | svg

许可证

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