Vital Huber Brand Guide NameChangeProcess.com Huber & Associates, Inc. & GoSmartAir GoCertificates.com Pristine Property Management Huber & Associates
2
Table of Contents The Importance of Brand Identity
5
NameChangeProcess.com 7 Logo Usage 8 Logo Variations 10 Logo Don’ts 12 Color Palette 14 Fonts 16 Huber & Associates, Inc. and GoSmartAir 19 Logo Usage 20 Logo Variations 22 Logo Don’ts 24 Color Palette 26 Fonts 28 GoCertificates.com 31 Logo Usage 32 Logo Variations 34 Logo Don’ts 36 Color Palette 38 Fonts 40 Pristine Property Management Logo Usage Logo Variations Logo Don’ts Color Palette Fonts
43 44 46 48 50 52
Huber & Associates Logo Usage Logo Variations Logo Don’ts Color Palette Fonts
55 56 58 60 62 64
3
4
The Importance of Brand Identity What is a brand? You may think of it as a company name, a logo, or maybe a jingle. A brand can be all of these things; it is how the consumer perceives a company or product. Branding (the creation of a brand) is what makes products memorable and sets them apart from other products in the marketplace. At Vital Huber, Inc., it is important to maintain a consistent brand identity for all of our various brands. Consistency in how each brand presents itself helps to increase brand recognition and cultivate customer loyalty. Thus, maintaining the same logos, colors, fonts, and even tone through all of our collateral is essential. Presenting our brands in a consistent manner shows our consistency – and reliability – as a company. Use book as a guide for presenting our brands in websites, marketing materials, and any other collateral.
5
6
NameChangeProcess.com
7
Logo Usage When using any logo, keep in mind the importance of white space around the logo. There should be ample space on all four sides of the logo. It should not be touching borders, images, text, or other design elements. 1. NameChangeProcess.com does not have a text logo. The bird logo may be used to brand any web or print collateral. 2. Use the heart icon in circumstances where the bird logo would be too small for details to show properly. E.g. the heart icon is used as the favicon for NameChangeProcess.com.
8
1.
2.
9
Logo Variations Use only these variations of the bird logo: Note: The heart icon should be treated the same as the bird logo. 1. The original logo may be used on a white background or a light-colored image background. This logo is suitable for two-color printing. 2. The black logo may be used on a white or light picture background. Do not use a grayscale version of the logo for black and white printing. Only use the black version. 3. On a black or dark background, use the white version of the logo.
10
11
Logo Don’ts These guidelines apply to both the bird logo and the heart icon. Do not: 1. Change the colors of the logo. 2. Add a drop shadow to the logo. 3. Add an outer glow to the logo. 4. Add a bevel, emboss or other 3D effect to the logo. 5. Stretch, compress, or otherwise distort the logo. 6. Create a grayscale version of the logo. 7. Place the logo in a white (or any other color) box. 8. Change the orientation of the logo. 9. Reconfigure the logo. 10. Place the full color logo on a conflicting background color. 11. Place the logo over a conflicting background image or pattern.
12
13
Color Palette Use only these 3 color palettes for NameChangeProcess.com collateral. Black and white may also be used. Slate should be used for all copy instead of black. Colors and text should be combined as follows:
Primary Headings - Pine Secondary Headings - Sage Tertiary Headings - Sea Green Call to Action Links - White with Salmon Background Call to Action (Hover) - Salmon with Salmon Border Content - Slate Inline Links - Salmon Inline Links (Hover) - Emerald Inline Links (Visited) - Dusty Rose
14
Primary Color Palette Pine
Sage
Mint
HEX #096158 CMYK 89 41 64 27 RGB 39 97 88
HEX #5d987c CMYK 67 23 59 3 RGB 93 152 124
HEX #8db7a3 CMYK 47 14 40 0 RGB 141 183 163
Secondary Color Palette Sea Green
Salmon
Slate
HEX #1e8278 CMYK 83 30 56 9 RGB 30 130 120
HEX #f15f50 CMYK 0 78 69 0 RGB 241 95 80
HEX #48484a CMYK 67 60 56 39 RGB 72 72 74
Tertiary Color Palette Light Emerald
Dusty Rose
Soft Grey
HEX #10a56f CMYK 81 9 75 0 RGB 16 165 111
HEX #d96f64 CMYK 11 69 58 1 RGB 217 111 100
HEX #747474 CMYK 56 47 47 12 RGB 116 116 116
15
Fonts Use only these fonts for NameChangeProcess.com collateral: For websites, use the following font-family lists. For <h1> - <h6> and other large/title elements: font-family: Rockwell, Baskerville, “Palatino Linotype”, Palatino, “Century Schoolbook L”, “Times New Roman”, serif; font-weight:normal; For <p>, <li> and other non-title elements: font-family: Calibri, Arial, sans-serif;
16
Primary & Secondary Headings
Non-Title Elements
{ Calibri {
Rockwell
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890
17
18
Huber & Associates, Inc. and GoSmartAir
19
Logo Usage When using any logo, keep in mind the importance of white space around the logo. There should be ample space on all four sides of the logo. It should not be touching borders, images, text, or other design elements. 1. Collateral for Huber & Associates, Inc should only utilize the Huber & Associates, Inc. logo or the plane icon. 2. The plane icon may be used on Huber & Associates, Inc. collateral in situations where the full logo has already be used or when there is limited space. For example, the icon may be used in the header or footer of a document where the full logo was used on the first page. 3. The GoSmartAir logo may be used alone or together with the Huber & Associates, Inc. logo on GoSmartAir collateral. 4. The GoSmartAir.com logo may be used alone or together with the Huber & Associates, Inc. logo on GoSmartAir collateral. The GoSmartAir.com logo should be used when referring to the GoSmartAir website. It should not be used directly on the GoSmartAir website.
20
1.
2.
3.
4.
21
Logo Variations Use only these variations of the logos: Note: The GoSmartAir.com logo should be treated the same as the GoSmartAir logo. 1. The original Huber & Associates, Inc. logo or GoSmartAir logo may be used on a white background or a light picture background. 2. For two-color printing on a white background, use the two-color Huber & Associates, Inc. logo. The GoSmartAir logo is already suitable for two-color printing. 3. The black logo may be used on a white or light picture background. Do not use a grayscale version of the logo for black and white printing. Only use the black version. 4. On a black or dark background, use the white version of the logo.
22
23
Logo Donâ&#x20AC;&#x2122;ts These guidelines apply to all GoSmartAir and Huber & Associates, Inc. logos. Do not: 1. Change the colors of the logo. 2. Add a drop shadow to the logo. 3. Add an outer glow to the logo. 4. Add a bevel, emboss or other 3D effect to the logo. 5. Stretch, compress, or otherwise distort the logo. 6. Create a grayscale version of the logo. 7. Place the logo in a white (or any other color) box. 8. Change the orientation of the logo. 9. Use the logo in a phrase in place of the typed-out name. 10. Reconfigure the logo. 11. Place the full color logo on a conflicting background color. 12. Donâ&#x20AC;&#x2122;t place the logo over a conflicting background image or pattern.
24
& ASSOCIATES, INC.
& ASSOCIATES, INC.
Learn more about here.
& ASSOCIATES, INC.
25
Color Palette Use only these 2 color palettes for Huber & Associates, Inc. and GoSmartAir collateral. Black and white may also be used. Colors and text should be combined as follows:
Primary Headings - Cherry Secondary Headings - Royal Blue Content - Black Inline Links - Royal Blue Inline Links (Hover) - Steel Blue
26
Primary Color Palette Royal Blue
Cherry
Steel Blue
HEX #23408f CMYK 100 88 10 1 RGB 35 64 143
HEX #bd2228 CMYK 18 99 97 8 RGB 189 34 40
HEX #627bae CMYK 67 50 10 0 RGB 98 123 174
Secondary Color Palette Navy
Sky Blue
Cloud Blue
HEX #2a3f78 CMYK 96 86 24 10 RGB 42 63 120
HEX #a4bae7 CMYK 34 20 0 0 RGB 164 186 231
HEX #dae2f2 CMYK 13 7 1 0 RGB 218 226 242
Watermelon
Titanium
Aluminum
HEX #eb5365 CMYK 2 83 50 0 RGB 235 83 101
HEX #989CA0 CMYK 43 33 32 1 RGB 152 156 160
HEX #c6c7c7 CMYK 22 17 17 0 RGB 198 199 199
27
Fonts Use only these fonts for Huber & Associates, Inc. and GoSmartAir collateral: For websites, use the following font-family lists. For <h1> - <h6> and other large/title elements: font-family: “Tw Cen MT”, “Century Gothic”, Gotham, “Helvetica Neue”, Helvetica, Arial, sans-serif; For <p>, <li> and other non-title elements: font-family: Arial, sans-serif;
28
Primary Headings
Secondary Headings
Non-Title Elements (Web)
Non-Title Elements (Print)
{ Tw Cen MT { Arial { Vani {
Tw Cen MT Bold abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890
29
30
GoCertificates.com
31
Logo Usage When using any logo, keep in mind the importance of white space around the logo. There should be ample space on all four sides of the logo. It should not be touching borders, images, text, or other design elements. 1. Collateral for GoCertificates.com should utilize the GoCertificates.com logo. 2. The certificate and bird icons may be used on GoCertificates. com and on GoCertificates print collateral to refer to the appropriate corresponding products. (e.g. they may be used for CTA buttons on GoCertificates.com)
32
1.
2.
33
Logo Variations Use only these variations of the logos: 1. The GoCertificates.com logo should only be used on a white background. 2. The certificate and bird icons may be used on a dark-colored background, or on a dark image background
34
35
Logo Donâ&#x20AC;&#x2122;ts These guidelines apply to the GoCertificates.com logo and the certificate and bird icons. Do not: 1. Change the colors of the logo. 2. Add a drop shadow to the logo. 3. Add an outer glow to the logo. 4. Add a bevel, emboss or other 3D effect to the logo. 5. Stretch, compress, or otherwise distort the logo. 6. Create a grayscale version of the logo. 7. Place the logo in a white (or any other color) box. 8. Change the orientation of the logo. 9. Use the logo in a phrase in place of the typed-out name. 10. Reconfigure the logo. 11. Place the full color logo on a conflicting background color. 12. Place the logo over a conflicting background image or pattern.
36
Learn more about here.
37
Color Palette Use only these 2 color palettes for GoCertificates.com collateral. Charcoal should be used for all text instead of black. White may also be used. Colors and text should be combined as follows:
Headings - Charcoal Call to Action Link 1 - White with Medium Aqua Background Call to Action 1 (Hover) - White with Aqua Background Call to Action Link 2 - White with Dark Image Background Call to Action 2 (Hover) - White with Aqua Background Content - Charcoal Inline Links - Medium Aqua Inline Links (Hover) - Aqua Inline Links (Visited) - Teal
38
Primary Color Palette Medium Aqua
Teal
Aqua
HEX #3796b2 CMYK 75 27 23 1 RGB 55 150 178
HEX #228096 CMYK 83 37 33 4 RGB 34 128 150
HEX #1eb1d3 CMYK 71 9 12 0 RGB 30 177 211
Secondary Color Charcoal
HEX #2a2b2a CMYK 71 64 64 66 RGB 42 43 42
39
Fonts Use only these fonts for GoCertificates.com collateral: For websites, use the following font-family lists. For <h1> , <h2> and other large elements: font-family: Rockwell, Baskerville, ‘Goudy Old Style’, Garamond, Georgia, serif; For <h3>-<h6>, <p>, <li> and other non-title elements: font-family: ‘Century Gothic’, Helvetica, Arial, sansserif;
40
Primary & Secondary Headings
Other Headings & Non-Title Elements
{ Century Gothic { Rockwell
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890
41
42
Pristine Property Management
43
Logo Usage When using any logo, keep in mind the importance of white space around the logo. There should be ample space on all four sides of the logo. It should not be touching borders, images, text, or other design elements. Collateral for Pristine Property should utilize the Pristine Property Management logo. The logo may be used with or without the slogan, as deemed necessary.
44
1.
Pristine Property Management
2.
Pristine Property Management
Everything under one roof
45
Logo Variations Use only these variations of the logos: Note: Both versions of the logo (with or without the slogan) should be treated the same. 1. The color Pristine Property logo should only be used on a white background. 2. Use the white logo on a dark background, or on an image with a black overlay. 3. Use the black logo on a light color background, or on an image with a white overlay. The black logo should also be used for black and white printing. (Do not use grayscale.)
46
Pristine Property Management
Pristine Property Management
Pristine
Lorem ipsum dolor sit amet
Pristine
Lorem ipsum dolor sit amet
Property Management
Pristine Property Management
Property Management
47
Logo Donâ&#x20AC;&#x2122;ts These guidelines apply to the GoCertificates.com logo and the certificate and bird icons. Do not: 1. Change the colors of the logo. 2. Add a drop shadow to the logo. 3. Add an outer glow to the logo. 4. Add a bevel, emboss or other 3D effect to the logo. 5. Stretch, compress, or otherwise distort the logo. 6. Create a grayscale version of the logo. 7. Place the logo in a white (or any other color) box. 8. Change the orientation of the logo. 9. Use the logo in a phrase in place of the typed-out name. 10. Reconfigure the logo. 11. Place the full color logo on a conflicting background color. 12. Place the logo over a conflicting background image or pattern.
48
Pristine
Pristine Property Management
Pristine
Pristine
Pristine
Pristine
Property Management
Property Management
Pristine Property Management
Property Management
P
rty rope
P
Pristine Property Management
e n i t ris
nt
eme
ag Man
Pristine Property Management
49
Property Management
Property Management
Learn more about here. Pristine Property Management
Pristine Property Management
Color Palette Use only these 3 color palettes for Pristine Property collateral. Black and white may also be used. Colors and text should be combined as follows:
Primary Headings - Forest Green Secondary Headings - Cerulean Tertiary Headings - Black Call to Action Links - White with Shamrock Background Call to Action (Hover) - White with Cerulean Background Content - Black Inline Links - Shamrock Inline Links (Hover) - Light Mint with Forest Green Background Inline Links (Visited) - Forset Green
50
Primary Color Palette Shamrock
Forest Green
Cerulean
HEX #25b357 CMYK 77 0 91 0 RGB 37 179 87
HEX #3d726d CMYK 77 39 55 16 RGB 61 114 109
HEX #5bb7bf CMYK 62 8 25 0 RGB 91 183 191
Secondary Color Palette Light Mint
Granite
Sunbeam
HEX #c5eacf CMYK 22 0 23 0 RGB 197 234 207
HEX #808080 CMYK 52 43 43 8 RGB 128 128 128
HEX #f2e399 CMYK 6 7 48 0 RGB 242 227 153
Tertiary Color Palette Brick Red
Mocha
Latte
HEX #752f26 CMYK 33 85 83 40 RGB 117 47 38
HEX #604830 CMYK 47 60 79 43 RGB 96 72 48
HEX #b08d6c CMYK 30 43 61 4 RGB 176 141 108
51
Fonts Use only these fonts for Pristine Property collateral: For websites, use the following font-family lists. For <h1> , <h2> and other large elements: font-family: “Britannic Bold”, “Lucida Bright”, Georgia, serif; For <h3>-<h6>, <p>, <li> and other non-title elements: font-family: “Century Gothic”, Calibri, Arial, sans-serif; For image captions: font-family: Arial, sans-serif;
52
Primary & Secondary Headings
Other headings & Non-Title Elements
Image Captions
{ Century Gothic { Arial { Britannic Bold abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890
53
54
Huber & Associates
55
Logo Usage When using any logo, keep in mind the importance of white space around the logo. There should be ample space on all four sides of the logo. It should not be touching borders, images, text, or other design elements. 1. The Huber & Associates logo should be used for all Huber & Associtates Collateral 2. The HA icon may be used on Huber & Associates collateral in situations where the full logo has already be used or when there is limited space. For example, the icon may be used in the header or footer of a document where the full logo was used on the first page. Avoid using this logo at a large size.
56
1.
2.
57
Logo Variations Use only these variations of the Huber & Associates logo: 1. The original color logo may be used on a white background or the light-colored starburst background. The color logo is suitable for one-color printing, screen printing, and decals. 2. The black logo may be used on a white or light-colored starburst background. Do not use a grayscale version of the logo for black and white printing. Only use the black version. 3. On a black or dark-colored starburst background, use the white version of the logo.
58
59
Logo Donâ&#x20AC;&#x2122;ts Use these guidelines when working with the Huber & Associates logo. Do not: 1. Change the colors of the logo. 2. Add a drop shadow to the logo. 3. Add an outer glow to the logo. 4. Add a bevel, emboss or other 3D effect to the logo. 5. Stretch, compress, or otherwise distort the logo. 6. Create a grayscale version of the logo. 7. Place the logo in a white (or any other color) box. 8. Change the orientation of the logo. 9. Reconfigure the logo. 10. Place the full color logo on a conflicting background color. 11. Place the logo over a conflicting background image or pattern. 12. Use the logo in place of the typed-out name.
60
Learn more about here.
61
Color Palette Use only these 2 color palettes for Huber & Associates collateral. Black and white may also be used. Colors and text should be combined as follows:
Primary Headings - Garnet Secondary Headings - Midnight Blue Tertiary Headings - Garnet Content - Black
62
Primary Color Palette Garnet
Midnight Blue
HEX #59092b CMYK 40 100 57 47 RGB 101 10 50
HEX #193662 CMYK 100 85 35 24 RGB 25 54 98
Secondary Color Palette Celophane
Soft Grey
Slate
HEX #e3e3e4 CMYK 10 7 6 0 RGB 227 227 228
HEX #747474 CMYK 56 47 47 12 RGB 116 116 116
HEX #48484a CMYK 67 60 56 39 RGB 72 72 74
63
Fonts Use only these fonts for Huber & Associates collateral: These fonts should eventually be incorporated as part of a website redesign.
64
Headings & Bold Text
Non-Title Elements
{ {
Franklin Gothic Medium abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890
Franklin Gothic Book abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890
65
Š2015 Vital Huber, Inc.