2017 ISSUE 01
A Standard Guidebook 1
2
CONTENTS
THE STORY
P5
LOGO ARTWORK P6
LOGO COLOURS
P7
TYPEFACES P8
BACKGROUNDS AND ÂCONTRAST
P9
P10
ALTERNATE LOGO DESIGN SOCIAL MEDIA PRESENCE
BUFFER ZONE
P12
LOGO REDUCTION P10
SYMBOLS & GRAPHIC TREATMENT
STATIONERY
P15
APPLICATIONS P15
THE STORY
ABOUT THE COMPANY Planet coffee is an individual coffee shop located in downtown Ottawa. Its interior design is welcoming and friendly.
ABOUT THE LOGO The Planet Coffee Logo was designed to represent the image of the company, the curvy logo reflects the friendly identity of the brand as well as showing the two elements that appear in the company’s name, “planet” and “coffee”. The upward pointing coffee cup and the up-going steam in the logo reflects the quality and value of the company, which is to always present the best quality of our products to our customers, and we’ll serve our products w holeheartedly to ensure our customer’s best experience. Both colours in the logo design are showing the company’s desired perception from the customers, relaxing and friendly. They are distinct and memorable but not intense and making it hard to breathe. Besides, the composition of each element in the logo is also meticulously considered. The initial “P” and “C” of the company’s name are in fact hidden in the coffee cup in the logo. And the handle of the coffee cup could also be represented as a smaller planet on its orbit around the bigger planet (the steam and the body of the coffee cup).
4
LOGO ARTWORK
The artwork of the logo represents the image and the value of the company. Individual elements in the pictorial logo should not be used separately. The logo should always appear as a whole. However, wordmark could be used separately from the pictorial while not altering its alignment. Here are some examples showing what could be done and what shouldn’t.
Do
Don’t
5
LOGO COLOURS
PMS 175-6 C R: 128 G: 141 B: 140 C: 56 M: 36 Y: 37 K: 0 HEX: #808D8C
PMS 171-10 C R: 124 G: 108 B: 106 C: 55 M: 57 Y: 48 K: 15 HEX: #7C6C6A
Do
Don’t
The colours in the planet coffee logo best represent the image and the tone our company wants to communicate to the customers. To ensure the best result, please do not change our brand’s colours or change the opacity in any way.
6
Do
Don’t
The Logo could be presented as black and white version or reversed but should never appear as one brand colour version.
TYPEFACES
TYPEFACE FOR LOGO
SOFIA PRO
Sofia Pro is chosen to be the logo typeface.This typeface has a great variety of weights in its font family which could create a strong hierarchy in the wordmark design while still keeping a unified look. The clean and geometric style of this typeface works perfectly with the general tone of the brand.
Aa ABCDEFGHIJKLMNOPQRST UVWXYZ abcdefghijklmnopqrstuvwxyz 1 2 3456 78 9 0
TYPEFACE FOR WEB & PRINT Heading typeface To keep the brand’s unified visual presence, the logo typeface is to be used as the heading typeface for both web and print. The heavier font weights in the Sofia Pro are pronounced and legible which is a good choice for headers in any media.
Copy Typeface Museo Sans is a sans-serif typeface that has a similar look to the logo typeface, it has a great amount of diversity in stroke weights, it also comes with a condensed version and a rounded version. The fact that each glyph in Museo Sans is higher in length and has heavier stoke weight comparing to Sofia Pro makes it easier to read and a good choice for the copy typeface which would complement Sofia Pro.
!?<>%&*_+-:;.,
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
MUSEO SANS Aa ABCDEFGHIJKLMNOPQRST UVWXYZ abcdefghijklmnopqrstuvwxyz 12 3 4 5678 90
!?<>%&*_+-:;., The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
7
BACKGROUNDS AND CONTRAST
The Planet Coffee logo could be used as a whole in solid white and solid black at most circumstances. However, the following situation should be avoided.
WHITE LOGO ON LIGHT BACKGROUNDS Light colour backgrounds or image backgrounds would wash out the logo, so do not put a white logo on it. Use the solid white logo on a more saturated or darker background.
COLOUR LOGO ON SIMILAR TONE BACKGROUNDS
Do
Don’t
Do
Don’t
Do
Don’t
The logo is barely noticeable when placing the full colour logo on a similar tone background. To ensure the logo is doing its best performance, please use the full colour logo on a lighter and less busy background.
LOGO WITH TRASPARENCY ON BACKGROUNDS Using transparency on logo design would affect its presentation result and makes it hard to recongnize. Always apply solid colours without transparency on the logo.
8
ALTERNATE LOGO The vertical full logo should be used on most of occasions. However, when designing a banner or print materials that require a horizontal layout logo, the horizontal version logo could be used as an alternate design.
SOCIAL MEDIA PRESENCE SOCIAL MEDIA ICONS Social media icons should follow the graphic style of the brand which consists of filled shapes and negative spaces. The icons ought to use the brandâ&#x20AC;&#x2122;s primary colour. If icons are to be placed on a dark background, please invert the colours of icons.
FAVICON Favicon of the brandâ&#x20AC;&#x2122;s website should always appear as 32px * 32px on browser tabs in order to preserve the highest recognition of the graphic.
9
SOCIAL MEDIA PAGES The Logo should appear as a whole which includes wordmark and pictorial in the profile picture on all social media pages, it should also be centered at the middle of the frame in all circumstances. All images that are posted online ought to have a warm tone.
SOCIAL MEDIA PAGE The brandâ&#x20AC;&#x2122;s website should leave an ample amount of white spaces surrounding each element (apart from banners) to ensure the readability and the legibility. The logo should be placed at the top left corner in the horizontal version at 32px at the short side in full colors. A link to the home page should be placed on the image to ensure that users can go back to the homepage by clicking on the logo. Images that appear on the website should be warm in tone. Button style should be 2.5px line box around text in brown. (Stroke could be in white if the button is on image background or dark background)
10
BUFFER ZONE The buffer zone is set to ensure the logo has a minimal amount of negative surrounding space in order to ensure the logo appears more legible and clear in the reproduction design as well as the logo’s integrity. No images or texts should go on or over the buffer zone. For Planet Coffee’s logo, the width of the buffer zone would always remain to be the width of the horizontal “e” that is in the word mark.
LOGO REDUCTION 1 inch 1 inch
To ensure the Planet Coffee logo design doing its best performance, the logo could be reduced to no more than one inch on the longer side for both vertical and horizontal versions in all media.
11
STATIONERY
Stationeries are created to enhance the brandâ&#x20AC;&#x2122;s identity. Logos should appear as a whole in on the front of each stationery design. To complement the primary brown colour, a light beige colour is used instead of pure white as the base colour for all stationery design. All designs should be reproduced in full colours at all time. The front and back design of each element should always be printed double sided.
12
3.5 Inches
2 Inches
BUSINESS CARD - FRONT
BUSINESS CARD - BACK
on matte cardstock and in full colour
on matte cardstock and in full colour
3.5 Inches
2 Inches
BUSINESS CARD - FRONT
BUSINESS CARD - BACK
on matte cardstock / regular paper and in full colour
on matte cardstock / regular paper and in full colour
13
4’’ 1/8’ Inches
9 1/2 Inches
ENVELOPE - FLAT on matte cardstock / regular paper and in full colour
SYMBOLS & GRAPHIC TREATEMENT SYMBOLS Do
The pictorial of the logo could be used as a symbol element to supplement the design. The steam in the logo design could be used seperately as a symbol. Wordmark could be used separately as a symbol element. All elements mentioned above should be kept as vector shapes to ensure the legibility.
GRAPHIC TREATMENT Don’t
14
When the whole logo pictorial is used as a symbol element, it should either be in full colours, in black or in white. Do not apply opacity to the pictorial and wordmark symbol element. Opacity could be applied to steam symbol element but the direction should not be altered in any way.
APPLICATIONS
SIGNAGE Instore Signage The signage at the entrance of the coffee shop should be in full colour and centered. The logo could be printed on textured material only if the visual result fits the brandâ&#x20AC;&#x2122;s cozy and welcoming image and does not change the original shapes and design.
On window The whole logo should be in white when it appears as a signage on windows so that it is clear and strong.
15
CUPS Paper Cups The body of the paper cups should be in the brown brand colour. The logo should be printed as a whole in full colours on the brown cardstock cup holders. Lids for different cup sizes could be differentiated with different colours, make sure one of them is in white and the other one is in the blue brand colour.
Mugs Mugs that are used in the coffee shop should be white ceramic and make sure the whole logo is printed in full colours at the exact center of the mugâ&#x20AC;&#x2122;s body with the handle facing left.
16
PAPER PRODUCTS Paper Napkins Napkinsâ&#x20AC;&#x2122; material should be able to hold the print of the full colour logo and be in white. Logo should be placed at the exact center of the napkins.
Paper Bags The material for paper bags could be brown regular paper which could hold a certain amount of weight. Logo should be positioned at the center of the paper bag in white in order to standout.
17
FOR MORE INFORMATIONA AND CONCERN, PLEASE CONTACT: Weiran Chen
18
Tel: 613-261-6832
email: chen0573@algonquinlive.com Site: weiranchen.com