Skip to content

Commit 6d31b16

Browse files
rouzbeh84rouzbeh84
committed
fleshing out some of the branding guidelines to include more options, links, patterns, and colors
1 parent 7cb1fcb commit 6d31b16

File tree

1 file changed

+70
-13
lines changed

1 file changed

+70
-13
lines changed

‎content/branding.md

Lines changed: 70 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,27 +3,84 @@ title: Branding Guidelines
33
contributors:
44
- jhnns
55
- skipjack
6+
- rouzbeh84
67
---
78

8-
Here you can find design assets needed for displaying webpack's logo or icon. See our official [media repository](https://github.com/webpack/media) for more information and to find the [license](https://github.com/webpack/media/blob/master/LICENSE) that governs this work. Click any of the images to download them.
9+
Here you can find guidelines, assets, and licenses in regards to the **webpack** project. See our official [media repository](https://github.com/webpack/media) for more information and to find the [license](https://github.com/webpack/media/blob/master/LICENSE) that governs this work. Click any of the images to download them.
910

11+
## [Media](https://github.com/webpack/media)
1012

11-
## Logo on White
13+
## The webpack Name
1214

13-
<a download href="../assets/logo-on-white-bg.svg">
14-
![Light Logo](../assets/logo-on-white-bg.svg)
15-
</a>
15+
webpack should **always** be written in lower-case letters, even at the beginning of a sentence.
1616

17+
## Logo
1718

18-
## Logo on Dark
19+
The webpack logo should be placed on a white background with enough space around it like this:
1920

20-
<a download href="../assets/logo-on-dark-bg.svg" style="display:block;background:#343434;">
21-
![Dark Logo](../assets/logo-on-dark-bg.svg)
22-
</a>
21+
<img src="https://github.com/webpack/media/blob/master/logo/logo-on-white-bg.png?raw=true" alt="webpack logo default with proper spacing on light background" />
2322

23+
[svg](https://github.com/webpack/media/blob/master/logo/logo-on-white-bg.svg) | [png](https://github.com/webpack/media/blob/master/logo/logo-on-white-bg.png) | [jpg](https://github.com/webpack/media/blob/master/logo/logo-on-white-bg.jpg)
2424

25-
## The Icon
25+
T> Please use the **icon + text** whenever possible.
2626

27-
<a download href="../assets/icon-square-big.svg" style="display:inline-block;float:left;width:200px;">
28-
![Individual Icon](../assets/icon-square-big.svg)
29-
</a>
27+
Just double the size of the inner dark blue cube to get an idea how much space the logo should have.
28+
29+
For dark backgrounds, you can use the negative version of the logo:
30+
31+
<div style="display: block; background: #111;">
32+
<img src="https://github.com/webpack/media/blob/master/logo/logo-on-dark-bg.png?raw=true" alt="webpack logo default with proper spacing on light background" />
33+
</div>
34+
35+
[svg](https://github.com/webpack/media/blob/master/logo/logo-on-dark-bg.svg) | [png](https://github.com/webpack/media/blob/master/logo/logo-on-dark-bg.png) | [jpg](https://github.com/webpack/media/blob/master/logo/logo-on-dark-bg.jpg)
36+
37+
## Icon only
38+
39+
**The icon is designed to be used in layout-constrained areas. As previously stated, please prefer icon + text.**
40+
41+
<img src="https://github.com/webpack/media/blob/master/logo/icon.png?raw=true" width="250" alt="icon example">
42+
43+
[svg](https://github.com/webpack/media/blob/master/logo/icon.svg) | [png](https://github.com/webpack/media/blob/master/logo/icon.png) | [jpg](https://github.com/webpack/media/blob/master/logo/icon.jpg)
44+
45+
Square-sized icon for bigger areas (like avatars or profile pictures):
46+
47+
<img src="https://github.com/webpack/media/blob/master/logo/icon-square-big.png?raw=true" width="250" alt="icon square big example">
48+
49+
[svg](https://github.com/webpack/media/blob/master/logo/icon-square-big.svg) | [png](https://github.com/webpack/media/blob/master/logo/icon-square-big.png) | [jpg](https://github.com/webpack/media/blob/master/logo/icon-square-big.jpg)
50+
51+
Square-sized icon for smaller areas (like favicons):
52+
53+
<img src="https://github.com/webpack/media/blob/master/logo/icon-square-small.png?raw=true" width="50" alt="icon square small example">
54+
55+
[svg](https://github.com/webpack/media/blob/master/logo/icon-square-small.svg) | [png](https://github.com/webpack/media/blob/master/logo/icon-square-small.png) | [jpg](https://github.com/webpack/media/blob/master/logo/icon-square-small.jpg)
56+
57+
## Font
58+
59+
We use the beautiful [Geomanist Medium](http://geomanist.com/) font from the extremely talented folks at the [Atipo Foundry](http://atipofoundry.com/) who provide the entire font family at a 'pay what you want' model.
60+
61+
## Color Palette
62+
63+
The following colors are used throughout the site in various combinations and on our fancy clothing line launched with the help of [Open Collective](http://opencollective.com) and [Threadless](https://medium.com/u/840563ee2a56) over at the [official webpack store](https://webpack.threadless.com/collections/the-final-release-collection/)!
64+
65+
| Color Name | HEX Code | RGB Code | Sample |
66+
|--- |--- |--- |---
67+
| Malibu: | HEX `#8dd6f9` | `rgb: 141, 214, 249` <td style="background-color: #8dd6f9; height: 25px; width: 250px; margin: 0; padding: 0;"></td>
68+
| Denim: | HEX `#1d78c1` | `rgb: 29, 120, 193` <td style="background-color: #1d78c1; height: 25px; width: 250px; margin: 0; padding: 0;"></td>
69+
| Fiord: | HEX `#465E69` | `rgb: 70, 94, 105` <td style="background-color: #465E69; height: 25px; width: 250px; margin: 0; padding: 0;"></td>
70+
| Outer Space: | HEX `#2B3A42` | `rgb: 43, 58, 66` <td style="background-color: #2B3A42; height: 25px; width: 250px; margin: 0; padding: 0;"></td>
71+
| Emperor: | HEX `#535353` | `rgb: 83, 83, 83` <td style="background-color: #535353; height: 25px; width: 250px; margin: 0; padding: 0;"></td>
72+
| Mine Shaft: | HEX `#333333` | `rgb: 51, 51, 51` <td style="background-color: #333333; height: 25px; width: 250px; margin: 0; padding: 0;"></td>
73+
| Alto: | HEX `#dedede` | `rgb: 222, 222, 222` <td style="background-color: #dedede; height: 25px; width: 250px; margin: 0; padding: 0;"></td>
74+
| Dusty Gray: | HEX `#999999` | `rgb: 153, 153, 153` <td style="background-color: #999999; height: 25px; width: 250px; margin: 0; padding: 0;"></td>
75+
| Dove Gray: | HEX `#666666` | `rgb: 102, 102, 102` <td style="background-color: #666666; height: 25px; width: 250px; margin: 0; padding: 0;"></td>
76+
| White: | HEX `#ffffff` | `rgb: 255, 255, 255` <td style="background-color: #ffffff; height: 25px; width: 250px; margin: 0; padding: 0;"></td>
77+
| Concrete: | HEX `#f2f2f2` | `rgb: 242, 242, 242` <td style="background-color: #f2f2f2; height: 25px; width: 250px; margin: 0; padding: 0;"></td>
78+
79+
In addition, you can grab the following file types directly from these links:
80+
81+
[psd](https://raw.githubusercontent.com/webpack/media/master/design/webpack-palette.psd) | [png](https://raw.githubusercontent.com/webpack/media/master/design/webpack-palette.png)
82+
| [ai](https://raw.githubusercontent.com/webpack/media/master/design/webpack-palette.ai) | [svg](https://raw.githubusercontent.com/webpack/media/master/design/webpack-palette.svg)
83+
84+
## License
85+
86+
The logo and the brand name are **not MIT licensed**. Please check [our LICENSE](https://github.com/webpack/media/blob/master/LICENSE) for usage guidelines.

0 commit comments

Comments
 (0)