Branding Guidelines

Here you can find webpack project brand guidelines, assets, and license. See our official media repository for more information and to find the license that governs this work. Click any of the images to download them.

Jump to All Original Media Files

The webpack Name

webpack should always be written in lower-case letters, even at the beginning of a sentence.

Logo

The webpack logo should be placed on a white background with enough space around it like this:

webpack logo default with proper spacing on light background

svg | png | jpg

Just double the size of the inner dark blue cube to get an idea how much space the logo should have.

For dark backgrounds, you can use the negative version of the logo:

webpack logo default with proper spacing on light background

svg | png | jpg

Please use the icon + text whenever possible.

Icon only

The icon is designed to be used in layout-constrained areas. As previously stated, please prefer icon + text.

icon example

svg | png | jpg

Square-sized icon for bigger areas (like avatars or profile pictures):

icon square big example

svg | png | jpg

Square-sized icon for smaller areas (like favicons):

icon square small example

svg | png | jpg

For those of you following our guidelines and have gotten this far, we've made a special smaller size image used especially for custom emoji (like in a slack or gitter channel ;))

icon square small example

Font

We use the beautiful Geomanist Medium font from the extremely talented folks at the Atipo Foundry who provide the entire font family at a 'pay what you want' model.

Color Palette

The following colors are used throughout the site in various combinations and on our fancy clothing line launched with the help of Open Collective and Threadless over at the official webpack store!

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

In addition, you can grab the following file types directly from these links:

psd | png | ai | svg

License

The logo and the brand name are not MIT licensed. Please check our LICENSE for usage guidelines.


Contributors