-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
196 lines (133 loc) · 7.14 KB
/
Copy pathindex.html
File metadata and controls
196 lines (133 loc) · 7.14 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Mint Digital – Brand Guidelines</title>
<link rel="stylesheet" href="css/gridism.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link href="http://mintdigital.com//favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">
</head>
<body class="wrap wider">
<div id="brand"></div>
<header>
<div class="grid">
<div class="unit whole center-on-mobiles">
<h1>
Brand assets and guidelines
</h1>
</div>
</div>
</header>
<div class="grid">
<div class="unit whole"> <h2>Welcome to Mint's Brand Guidelines</h2><p>Please refer to this guide for correct use on Mint's logo, colour, and typography to ensure our brand consistency is maintained - both internally and externally. If you're unsure on anything, shoot the design team an email.
<a href="mailto:design@mintdigital.com?Subject=Help%20please" target="blank">email the design team</a>.
</p><a href="mint-brand-assets-2015_KW.zip" class="button">Download Mint brand assets </a><br><br></div>
</div>
<div class="grid">
<div class="unit whole">
<h2>Logotype</h2>
<p>The Mint logo is set in Metric Light in uppercase. Metric is a geometric sans-serif typeface which harks back to Gill Sans which was used for Mint’s original logo from 2004 to 2013. </div>
</div>
<div class="grid">
<div class="unit half"><div class="logo-showcase">
<img src="http://static.tumblr.com/lrtgvh9/70Inwozgd/logo.png" alt="Mint Logo" style="width:100%;"></div>
</div>
<div class="unit half"><div class="logo-showcase brand">
<img src="http://static.tumblr.com/lrtgvh9/sA8nwozgv/logo_white.png" alt="Mint Logo - White" style="width:100%;"></div>
</div>
</div>
<div class="grid">
<div class="unit whole"><p>
The most recent iteration of our brand drops ‘Digital’ from the logo. We refer to ourselves still as Mint Digital, but the digital should not be added back on to this logotype.<br><br>
The logo should be in our brand green wherever possible, or white when used on a green background. It is also possible to use the logo in grey if the situation calls for it.</P>
</div>
</div>
<div class="grid">
<div class="unit half"><div class="logo-showcase">
<img src="img/logo_light.png" alt="Mint Logo" style="width:100%;"></div>
</div>
<div class="unit half"><div class="logo-showcase dark">
<img src="img/logo_dark.png" alt="Mint Logo - White" style="width:100%;"></div>
</div>
</div>
<div class="grid">
<div class="unit whole"><p>
The most recent iteration of our brand drops ‘Digital’ from the logo. We refer to ourselves still as Mint Digital, but the digital should not be added back on to this logotype.<br><br>
The logo should be in our brand green wherever possible, or white when used on a green background. It is also possible to use the logo in grey if the situation calls for it.</P>
</div>
</div>
<div class="grid">
<div class="unit whole">
<h2>Mint 'M'</h2>
<p>
We use the 'M' from our logo as an avatar. White on green usually has more impact, on Twitter for example, but the green on white version can be used if the situation calls for a more subtle avatar.
</P>
</div>
</div>
<div class="grid">
<div class="unit one-quarter"><div class="logo-showcase">
<img src="http://static.tumblr.com/lrtgvh9/byonwozfx/avatar.png" alt="Mint Logo" style="width:100%;"></div>
</div>
<div class="unit one-quarter"><div class="logo-showcase brand">
<img src="http://static.tumblr.com/lrtgvh9/kdMnwozfg/avatar_white.png" alt="Mint Logo - White" style="width:100%;"></div>
</div>
</div>
<div class="grid">
<div class="unit whole">
<h2>Colour</h2>
<p>
There are just two main colours in the Mint brand: our distinctive green, and dark grey. Varying shades of grey can also be used where necessary or approrpiate. <br><br>When printing the brand green please check any proofs with the screen version of this colour since this is where most people interact with our brand and is the most true representation of our green.</P>
</div>
</div>
<div class="grid">
<div class="unit whole"><div class="logo-showcase brand">
<h3 style="text-align:center; text-shadow:none;">Brand green</h3><h2 style="color:white; text-align:center; text-shadow:none;">#00ca53<br>
<span class='dim'>R</span>0 <span class='dim'>G</span>202 <span class='dim'>B</span>83
<br>
<span class='dim'>C</span>73 <span class='dim'>M</span>0 <span class='dim'>Y </span>92 <span class='dim'>K</span>0
</h2>
</div> </div>
</div>
<div class="grid">
<div class="unit whole"><div class="logo-showcase dark">
<h3 style="color:#141414; text-align:center; text-shadow:none;">Brand grey</h3><h2 style="color:white; text-align:center; text-shadow:none;">#00ca53<br>
<span class='dim'>R</span>0 <span class='dim'>G</span>202 <span class='dim'>B</span>83
<br>
<span class='dim'>C</span>73 <span class='dim'>M</span>0 <span class='dim'>Y </span>92 <span class='dim'>K</span>0
</h2>
</div>
</div>
</div>
<div class="grid">
<div class="unit whole">
<p>Other colours may be used to work alongside our brand. For example, our case study pages use colours which match the work or the client's logo. When picking these supplementary colours, try and find something which sits comfortable along our green by using similiar saturation or brighness. <a href="http://paletton.com/" target="blank">Paletton</a> is a good tool to help you do this.</p>
</div>
</div>
<div class="grid">
<div class="unit whole">
<h2>Typography</h2>
<p>
We use two typefaces for all our communication. Maison Neue for paragraph text (or similiar), and Calibre Bold for headings.
</P>
<div class="showcase">
<h3>Calibre Bold<br>ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
abcdefghijklmnopqrstuvwxyz<br>0123456789</h3></div> <div class="showcase"><h3 class="maison">Maison Neue<br>ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
abcdefghijklmnopqrstuvwxyz<br>0123456789</h3></div><br>
</div>
</div>
<div class="grid">
<div class="unit whole">
<p> When it is not possible to use these fonts, for example in a Google or Word Document, use a sans-serif typeface such as <a href="https://www.google.com/fonts/specimen/Source+Sans+Pro" target="blank">Source Sans Pro</a> , or Helvetica or (in worst case scenarios) Arial.<br><br>
</div>
</div>
<footer><div class="grid">
<div class="unit whole">
<h3 style="color:#ffffff; text-shadow:none;"> Please <a href="mailto:design@mintdigital.com?Subject=Help%20please" target="blank">email the design team</a> if you have any more questions about our brand.</h3>
<h5 style="color:#656565; text-shadow:none;">Updated: November 2015</h5>
</div>
</div>
</footer>
</body>
</html>