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.

The Name

Webpack can be written with a capital W when used at the start of a sentence, otherwise it should be written in lower-case letters.

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

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

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

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

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.