Visual Identity and Brand Guidelines...BUILDING BLOCKS Stacked Logo STACKED VERSION While the linear...
Transcript of Visual Identity and Brand Guidelines...BUILDING BLOCKS Stacked Logo STACKED VERSION While the linear...
Visual Identity and Brand GuidelinesJune 2013 | Version 1.0
1VERMONT TECH IDENTITY GUIDELINES JUNE 2013 | VERSION 1.0
BUILDING BLOCKS
BUILDING BLOCKS
10VERMONT TECH IDENTITY GUIDELINES JUNE 2013 | VERSION 1.0
Vermont Tech LogoWe’re practical, straightforward, and confident—and our logo embodies these. It stands proudly on its own and needs no icon to support it.
LINEAR VERSION
This is Vermont Tech’s Primary logo, which should be used to reflect the whole of the college. When using it, please select from one of these approved options before creating another.
Some examples demonstrate placement on a colored field. Never place the logo inside a box!
Key Green on White
Knockout on Photograph
Key Green on Legacy Green
Key Green on Charcoal White on Key Green
Charcoal or Black on White
Black on approved Brand Color
11VERMONT TECH IDENTITY GUIDELINES JUNE 2013 | VERSION 1.0
BUILDING BLOCKS
Stacked LogoSTACKED VERSION
While the linear version should be the default choice, this alternate lockup of the logo may be better suited for narrower formats such as signage or as a square icon, because it can better fill the space.
Since this lockup is center-aligned, placement will tend to be best in the center, rather than anchored in a corner.
Again—never, never, ever place
the logo inside a box!
Key Green on White
Key Green on Legacy Green
White on Key Green
Charcoal or Black on White
12VERMONT TECH IDENTITY GUIDELINES JUNE 2013 | VERSION 1.0
BUILDING BLOCKS
VTC MonogramVTC. It’s our web address. People know us & refer to us this way. The bottom line is that it’s the most efficient way to refer to the college, and it’s here to stay.
While it may have some mixed historical meaning associated with it, our job is to inject the right meaning into it over time.
• The VTC monogram is NOT our logo. Please do not refer to it
as such. Do not use it in place of a logo.
• It is a mark for the believers—for internal audiences and those already part of the Vermont Tech family.
• The VTC monogram should never be used for marketing
purposes. It is intended to be a supporting element, usually used within proximity of the primary logotype.
• If VTC and logotype are used together the letters in the monogram should be smaller than the logotype.
• The minimum recommended size for the circular monogram is .375" to preserve legibility.
VTC Monogram on its own
VTC Monogram with linear logotype
VTC Monogram with stacked logotype
13VERMONT TECH IDENTITY GUIDELINES JUNE 2013 | VERSION 1.0
BUILDING BLOCKS
Monogram Lockup• VTC is smaller. If VTC and logotype
are used together, the VTC in the monogram should always be smaller than the logotype, in deference.
• Always centered. When used together, the circle should be centered in relation to the logotype, never to the left or any other configuration.
• Vertical Spacing. The spacing between the circle and the logotype is equal to the height of the VTC.
14VERMONT TECH IDENTITY GUIDELINES JUNE 2013 | VERSION 1.0
BUILDING BLOCKS
Clear SpaceThe Vermont Tech logo is most effective when surrounded by as much open space as possible.
A minimum amount of clear space, equal to the height of the “H” should surround the logo at all times, as demonstrated on this page. Always use approved and provided electronic artwork.
This clear space guideline is a rule of thumb to be followed in most instances.
g The poster layout above breaks this rule in an approved manner. In this instance, the Vermont Tech logo is being used as part of a sentence, with surrounding text that is low contrast so it does not visually interfere with the logo. The left and right sides of the logo adhere to the “H” clear spacing.
15VERMONT TECH IDENTITY GUIDELINES JUNE 2013 | VERSION 1.0
BUILDING BLOCKS
Program LockupsCurrently, the only approved lockup is for academic
programs, centered with the linear logotype. The logo should not be locked up with any elements without the prior approval of the design agency.
• The program is set in Brandon Text Bold, in all caps, with extra tracking (+25).
• Text is center aligned with the linear logotype, with a target area defined between the “R” and the “C.”
• The space separating the two elements is equal to the size of the counter (center circle) of the “O” in the logo.
• Longer programs may extend close to (but not exceed) the full width.
• Extremely long programs may wrap to two lines, but this is not recommended, and a shorter name should be chosen if possible.
AUTOMOTIVEVT: 26pt / Program: 20pt = 77% ratio
VT: 26pt / Program: 15pt = 58% ratio
VT: 26pt / Program: 15pt (18 Leading) = 58% ratioAGRICULTURE
FIRE SCIENCE
ELECTRICAL ENGINEERING
CIVIL AND ENVIRONMENTAL ENGINEERING TECHNOLOGY
NURSING
16VERMONT TECH IDENTITY GUIDELINES JUNE 2013 | VERSION 1.0
BUILDING BLOCKS
VTC
Incorrect UsageDo not alter, redraw or add any additional
words or graphic elements to the logo.
Always use approved high-resolution artwork. Don’t use VTC monogram as a substitute for the logo. Don’t create additional VTC lockups.
17VERMONT TECH IDENTITY GUIDELINES JUNE 2013 | VERSION 1.0
BUILDING BLOCKS
Don’t scale elements within the logo. Don’t add a dropshadow.
Don’t add stroke, gradient or other effects.Don’t stretch or distort the logo.
Don’t use the logo in legacy green.
Don’t try to recreate the logo with a typeface. Don’t use low resolution, bitmap files. Don’t place on visually distracting backgrounds.
Don’t use unapproved colors.
Don’t left-align the words. Don’t use on a diagonal. Don’t place in a box or container shape of any kind.
Key Green
PMS: 360
CMYK: 75/0/100/0
RGB: 112/191/71
Hex: #70be46
Charcoal
PMS: Cool Gray 11
CMYK: 67/59/53/34
RGB: 74/74/82
Hex: #484a52
Light Gray
PMS: Cool Gray 1
CMYK: 10/8/10/0
RGB: 235/222/229
Hex: #c6c4c2
Legacy Green
PMS: 356
CMYK: 96/27/100/16
RGB: 23/143/79
Hex: #158d4e
Orange
PMS: 158
CMYK: 4/68/99/0
RGB: 240/110/38
Hex: #ef6d26
Gold
PMS: 143
CMYK: 4/34/93/0
RGB: 242/171/33
Hex: #f1ac21
Blue
PMS: 2915
CMYK: 58/13/0/0
RGB: 89/176/227
Hex: #59afe2
ColorThis palette captures aspects of Vermont at various seasons while moving away from the earthy and muted colors that have become tired. We’ve retained the legacy green as a way to acknowledge our history and have introduced a new spring green as the key color. It conveys a sense of promise, potential and is easily recognizable.
“Green” should be the color that we are known for. Please see the example applications section of this document to get a sense of how the secondary colors are used.
PRIMARY COLORS SECONDARY COLORS
18VERMONT TECH IDENTITY GUIDELINES JUNE 2013 | VERSION 1.0
BUILDING BLOCKS
Darker ShadesWhen designing for screen, subtle variations in colors are often needed for legibility, hierarchy, hover states and the like. Since the website has not been designed yet, here is a starting point for adapting the color palette to on-screen use.
Key Green
Regular: #70be46
Darker: #68a74e
Charcoal
Regular: #484a52
Darker: #393d42
Light Gray
Regular: #c6c4c2
Darker: #393d42
Legacy Green
Regular: #158d4e
Darker: # 258250
Orange
Regular: #ef6d26
Darker: #ce6138
Gold
Regular: #f1ac21
Darker: #cd923d
Blue
Regular: #59afe2
Darker: #5b9dbe
g These darker swatches were defined in Photoshop by placing a Light Gray layer above the underlying swatch, and then switching to “multiply” in the layer effects palette. The step was repeated twice to create the result.
19VERMONT TECH IDENTITY GUIDELINES JUNE 2013 | VERSION 1.0
BUILDING BLOCKS
Primary TypefaceAdelle Sans is our primary typeface, for documents and collateral produced by professional designers. It is friendly, versatile and expresses just the right amount of personality while getting out of the way. This will be our day-to-day typeface for corporate communications, ideal for setting large amount of text. Adelle Sans should only be used by a professional designer, and can be licensed here for desktop and web use: http://www.myfonts.com/fonts/type-together/adelle-sans
Adelle Sans Bold
Adelle Sans SemiBold
Adelle Sans Regular
Adelle Sans Light
Adelle Sans Bold. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut 123456789.
Adelle Sans SemiBold. Lorem ipsum dolor
sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt 123456789.
Adelle Sans Regular. Lorem ipsum dolor sit
amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt 123456789.
Adelle Sans Light. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 123456789.
Adelle Sans Bold: 36px / 42px Leading / 0 Tracking
Adelle Sans SemiBold: 36px / 42px Leading / 0 Tracking
Adelle Sans Regular: 36px / 42px Leading / 0 Tracking
Adelle Sans Light: 36px / 42px Leading / 0 Tracking
Bold 12px / 18px Leading / 0 Tracking
SemiBold 12px / 18px Leading / 0 Tracking
Regular 12px / 18px Leading / 0 Tracking
Light 12px / 18px Leading / 0 Tracking
20VERMONT TECH IDENTITY GUIDELINES JUNE 2013 | VERSION 1.0
BUILDING BLOCKS
Display TypefaceBrandon Text is a cheerful typeface intended for headlines and areas where impact and strength are needed. Its subtle rounded terminals express warmth. Brandon plays a supporting role to Adelle. It should be used sparingly, for headings, pull quotes and short bursts of text, as demonstrated throughout this document. Brandon Text should only be used by a professional designer, and can be licensed here for desktop and web use: http://www.myfonts.com/fonts/hvdfonts/brandon-text
In the system, Brandon Text is set most
often in all caps with extra tracking (+25 tracking / +1 letterspacing in CSS). Mixed case may be occasionally used in short amounts for pull quotes, captions or other short display elements.
BRANDON TEXT BOLD—ALL CAPS
Brandon Text Bold Mixed Case 123456789
BRANDON TEXT BOLD—ALL CAPS
Brandon Text Bold Mixed Case 123456789
Brandon Text Bold: 36px / 36px Leading / +25 Tracking
Brandon Text Bold: 36px / 36px Leading / 0 Tracking
Brandon Text Light: 36px / 36px Leading / +25 Tracking
Brandon Text Light: 36px / 36px Leading / 0 Tracking
21VERMONT TECH IDENTITY GUIDELINES JUNE 2013 | VERSION 1.0
BUILDING BLOCKS
Alternate FontBecause licensing the selected fonts is expensive and not practical for general use, we are selecting Arial as the alternate font. It is pre-installed on every computer. This font will be used for PowerPoint presentations and any other communication not prepared by a professional designer.
ARIAL BOLD ALL CAPS
Arial Bold Mixed Case 1234567890
Arial Regular ALL CAPS
Arial Regular Mixed Case 1234567890
Arial Bold: 36px / 36px Leading
Arial Bold: 36px / 36px Leading
Arial Regular: 36px / 36px Leading
Arial Regular: 36px / 36px Leading
22VERMONT TECH IDENTITY GUIDELINES JUNE 2013 | VERSION 1.0
BUILDING BLOCKS
EXAMPLE APPLICATIONS
APPLICATION
26VERMONT TECH IDENTITY GUIDELINES JUNE 2013 | VERSION 1.0
Campus SignagePossible wayfinding signage shown with a mix of Adelle Sans Extra Bold, Light and Brandon Text Set in All Caps.
27VERMONT TECH IDENTITY GUIDELINES JUNE 2013 | VERSION 1.0
APPLICATION
Apparel
28VERMONT TECH IDENTITY GUIDELINES JUNE 2013 | VERSION 1.0
APPLICATION
School Spirit
29VERMONT TECH IDENTITY GUIDELINES JUNE 2013 | VERSION 1.0
APPLICATION