STANDARDS MANUAL
1
INTRODUCTION Chaimeleon is a specialty boba tea drink shop located in beautiful San Luis Obispo, California. With a focus on creating unique drinks using high-quality ingredients, Chaimeleon aims to be the clear front runner in local boba tea shops, as well as one of the town’s top drink shops overall. A strong brand identity will play an important role in achieving this. Much like a chameleon changes color, the menu at Chaimeleon will frequently change, which will encourage customers to return time and time again. Repeat visitors will always be able to find their favorite signature drinks, but they will also find equally delicious limited-time seasonal offerings. The shop will be relaxed and modern, appealing to a breadth of people but specifically to young professionals, college students, and children in San Luis Obispo. This standards manual will detail out the proper way to use brand assets and convey the brand identity. Logos, typefaces, colors, supplemental graphic elements, and business system assets will be discussed. Consistency is crucial to maintaining a cohesive and highquality brand, so strict adherence to these guidelines is a must.
3
4
TABLE OF CONTENTS FAMILY OF MARKS Primary Mark Secondary Mark Inappropriate Uses
APPLICATIONS 8 12 16
IDENTITY SYSTEM Graphic Elements 22 Color Palettes 28 Typeface 30
Website 42 Mobile App 48 In-Store Menu 52 Poster Advertisements 54 Exterior Signage 58 Social Media 59 Merchandise 60
BUSINESS SYSTEM Summary 34 Business Card 36 Letterhead 37 Envelope 38
5
6
FAMILY OF MARKS
7
PRIMARY MARK FULL COLOR The primary mark for Chaimeleon features the stylized chameleon eye symbol located above the company name, which is located above the tagline. This version should be utilized as often as possible. The symbol is eyecatching and will play an important role in establishing a brand identity, so therefore it must always accompany the company name. Similarly, because the company name is somewhat unconventional and not the most intuitive, it is important that the tagline be included at all times. The spacing between these elements, fonts used, and colors used are all intentionally chosen and should never be altered.
8
MINIMUM SIZE The logotype can be read and understood clearly down to a fairly small size, but once it gets smaller than 1.5 inches in width, it starts to become too unclear. Therefore, it is important that it is never printed smaller than this size. 1.5 inches
REQUIRED BUFFER/SAFE SPACE The “I” in “Chaimeleon” can be used to determine the minimum buffer space needed to ensure the logotype is not too close to anything around it. Make sure to never place anything within this buffer.
9
ONE-COLOR TINTED Due to the unique design of the logotype, it is not permissible to use a version that only uses one color. However, if necessary, it is okay to use a one-color tinted logotype. This means that one may pick one of the identity system’s two primary colors (either BLUE-GREEN or ORANGE) and use tints of the same color to create the logo instead of using both primary colors. This should only ever be used if one-color printing is the only option for the given printing scenario. Note that there are two different tints used in these logotypes. A lighter tint (40%) is used in the symbol to create more contrast, and a darker tint (60%) is used in the “Chai” in “Chaimeleon” in order to give it enough visual weight to stand alongside the rest of the name.
10
100%
40% 60%
100%
40% 60%
REVERSED OUT Certain situations may make a reversed out version of the logotype preferable. If this is the case, one may use the same colors and tints that are used in the one-color tinted versions of the logotype. This version uses WHITE in place of the areas where the logotype typically uses the identity system’s primary colors. The background uses the primary colors instead. Note that the darker and lighter tints mentioned on the previous page are inverted for this reversed out logotype. In other words, a darker tint (60%) is used with the symbol and a lighter tint (40%) is used for the “Chai” in “Chaimeleon”.
100% 0%
60% 40%
100% 0%
60% 40%
11
SECONDARY MARK FULL COLOR The secondary mark for Chaimeleon is the same as the primary mark except it places the symbol to the left of the text and left justifies the text. This makes for a logotype that is more horizontally oriented, which can be useful in situations where there is not much vertical space available to include the logotype. Note that all three elements (symbol, company name, and tagline) are still present.
12
MINIMUM SIZE Do not allow the secondary logotype to get any smaller than 2.25 inches in width. Shrinking the logotype any smaller than this causes it to become too unclear. 2.25 inches
REQUIRED BUFFER/SAFE SPACE Continue using the “I” in “Chaimeleon” to determine the minimum buffer space needed to ensure the logotype is not too close to anything around it. Make sure to never place anything within this buffer.
13
ONE-COLOR TINTED
60%
Use the same guidelines as outlined for the primary mark’s one-color tinted versions (page 10). As a reminder, this should only ever be used if one-color printing is the only option for the given printing scenario. 40%
100%
60%
40%
14
100%
REVERSED OUT
60%
100%
Follow the same guidelines as outlined for the primary mark’s reversed out versions (page 11).
0% 60%
100%
40%
0%
15
INAPPROPRIATE USES
Never use a one-color version of the logotype. It is important that the symbol creates a complete circle to properly communicate the idea of being an eye, and the “Chai” in “Chaimeleon” needs to be a different color in order to clarify the play on words that is present in the company name.
16
Never change the colors of the logotype to colors outside of those approved and mentioned in this standards manual.
Never reverse the colors of the logotype. This is mostly significant because visually, the orange text is dominant, which causes the viewer to place too much emphasis on “meleon”. Having the “Chai” part of “Chaimeleon” in orange ensures that the viewer pays attention to that word within the full name, which more clearly communicates the brand.
Never use a drop shadow or any other “effects” on the logotype. It makes the logotype harder to read and less appealing.
17
Never stretch, skew, or distort the logotype in any way.
18
Never place the logotype over a background image or color, except for a WHITE, BROWN, or LIGHT GREEN background.
WELCOME TO...
Never place any text or other content within the safe space for the logotype indicated on pages 9 and 13 of this standards manual.
Never display the logotype at a tilted angle.
19
20
IDENTITY SYSTEM
21
GRAPHIC ELEMENTS SYMBOLS The symbol from the logotype can be used as a standalone icon for decorative purposes. However, it should never be used as an outright replacement for the logotype. Because the symbol is somewhat complex, it is important not to shrink it down to a size where the detail would get completely lost. Do not shrink it down any smaller than 0.5 inches. This symbol is used as a decorative element in the business cards designed as part of the business system (see page 32).
A simple circle in either of the primary colors from the identity system may also be used as decorative symbols. These were chosen because they echo the shape of the logotype’s symbol and also allude to the spherical shape of boba pearls. There is no minimum size for these symbols. They are typically used as a divider between text within the business system and applications.
22
0.5 inches
Another element that is not typically used as a standalone symbol but is worth noting here is the use of a LIGHT GREEN shape as a background. This is used throughout the business system (business card, top of letterhead, and flap of envelope) as well as in a number of places in practical applications.
LINE RULES It may sometimes be necessary to utilize a line rule to separate sections of text or act as an element of visual interest. In this situation, one of these line rules may be used. Two of these simply use dots with the identity system’s two primary colors, while the third alternates between these two colors plus the BROWN from the secondary colors. These are most typically used in practical applications such as the website and in-store menu.
23
PHOTOGRAPHY Photography is an important component of the applications for the business, as it informs potential customers of what the drinks that are sold at the shop look like. Specifically, photography can be found on the website (page 42), mobile app (page 46), in-store menu (page 50), poster advertisements (page 52), and social media (page 57). Photography should be in full color and should place the drink or drinks against a relatively simple background and table/base, such that the focus is on the drink itself.
24
25
DRINK ICONS In the various applications where the menu items are listed, icons designed to resemble the drinks will be used. These icons use a BROWN stroke and contain colors that reflect the appearance of the drinks.
26
MOBILE APP MENU ICONS These icons are found along the bottom bar of the mobile app. They reflect the five primary options that the app features: viewing the menu, reviewing rewards, scanning a QR code to pay and/or earn points, checking card balance, and exploring other information.
27
COLOR PALETTES PRIMARY
BLUE-GREEN CMYK: C=79 M=30 Y=42 K=4
The primary color palette consists of the two colors used in the primary mark—BLUE-GREEN and ORANGE. These are the most commonly used colors throughout all materials created for this company. These colors are very versatile and are used in a wide range of contexts. They are almost always used for the bold, all-caps header text found across all branding. They are also sometimes used for body text in situations that call for a more “fun” appearance or to emphasize certain content. They may also be used as background colors in rarer situations. This can be seen in certain screens of the mobile app.
RGB: R=48 G=137 B=143 Pantone: 313 U HEX: 30898F ORANGE CMYK: C=0 M=49 Y=82 K=0 RGB: R=247 G=149 B= 69 Pantone: 142 U HEX: F79545
28
SECONDARY
BROWN CMYK: C=47 M=65 Y=71 K=43 RGB: R=96 G=67 B=55
The secondary color palette consists of two additional colors—BROWN and LIGHT GREEN. These colors work nicely with the primary colors and are useful in a variety of scenarios. BROWN is useful for body text in situations where a more serious or professional tone is called for (i.e. the body text of this standards manual). Typically, if there is a large body of text, this will be the color to use. It is occasionally used as a background color or an outline/ stroke color, as seen in the drink icons and mobile app menu icons (see pages 26 and 27). It is also used in the line rule mentioned on page 21. As stated on page 23, LIGHT GREEN is useful as a background color in a variety of situations. In certain applications, it may be useful to use it for text over a dark background as well.
Pantone: 4625 U HEX: 604337 LIGHT GREEN CMYK: C=27 M=0 Y=53 K=0 RGB: R=192 G=221 B=150 Pantone: P 344 U HEX: C0DD96
29
TYPEFACE PRIMARY (ONLY) TYPEFACE The company should consistently utilize MONTSERRAT for all branding. Two weights of this typeface are used: Regular and Bold. Italic versions of each of these weights may also be used.
30
Regular abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890!?&
Bold abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890!?&
Regular Italic abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890!?&
Bold Italic abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890!?&
31
32
BUSINESS SYSTEM
33
SUMMARY The business system consists of all of the professional content that may be used for growing the business, sending official documents, or other related occurrences. It includes a business card, a letterhead, and an envelope, each of which have been thoughtfully designed to reflect the overall branding of the company. These assets should always be used; it is never acceptable to use unbranded alternatives to any of these items. All three items in the business system use Neenah brand paper—“Teton Text Tiara Felt, 80 Lb, 19x12.5”—which has a slight texture to it. It is important to use this paper instead of basic printer paper, as it gives the brand a level of sophistication.
34
35
BUSINESS CARD Although some businesses may have both personal and company cards, this business will only use personal cards. This is because one of the core values of Chaimeleon is community, and part of that is having a very accessible and friendly team of staff. Personal business cards allow people to put a face to the brand. The card uses LIGHT GREEN as a background color on both sides. The front simply contains the primary logotype, while the back contains the symbol from the logotype, the employee name, title, email address, and personal phone number in BLUE-GREEN, and the company website, address, and phone number in BROWN. The cards are shown here at full size.
36
LETTERHEAD The letterhead for this business features a simple bar of LIGHT GREEN across the top of the page, with the primary logotype, address, phone number, website, and email address. Note the use of ORANGE circles to divide the different information. The body text of the letter is the only place where it is permissible to deviate from the regular guidelines for typeface and color. 12 point black ADOBE GARAMOND PRO is used. The text box is intentionally lined up with the left edge of the logotype, located 1 inch from the left edge of the page and 2.25 inches down from the top edge. The text box itself is 6 inches in width by 8 inches in height.
A full scale crop of the top bar from the letterhead is included below for reference.
37
ENVELOPE The envelope for this business features the primary logotype on the front and the company’s address on the back flap, placed over a LIGHT GREEN background. As with the letterhead, ORANGE circles are used to divide informational components.
578 California Boulevard
38
San Luis Obispo, CA
93405
These are full scale crops of the designed areas on the front and back of the envelope.
39
40
APPLICATIONS
41
WEBSITE The website for Chaimeleon is designed to be simple, yet informational. The goal of the website is to enrich people’s interaction with the brand through the inclusion of photography, written content, and opportunities to purchase branded merchandise. Because the brand’s products might be a little bit foreign to some, the website is a crucial tool in enlightening potential patrons about what is offered and why. The website contains 4 primary pages: a home page, a menu page, an info page, and an online store page. Each page can easily be accessed from a menu bar that runs across the top of the screen. There is also a shopping cart icon that can be used to check out when purchasing merchandise from the online store.
42
43
44
45
46
47
MOBILE APP Chaimeleon will offer a mobile app that is primarily focused on a rewards program. This program will incentivize return visits through rewarding purchases with discounts or free drinks. Customers may view the full menu as well as special promotions on the app. They may also view basic information about the shop, such as operating hours, address, and contact information. The app can also be used to pay for drinks. Customers may transfer gift cards into the app or load their account with funds from their credit or debit cards.
48
49
50
51
IN-STORE MENU
52
53
POSTER ADVERTISEMENTS This series of posters is designed to appear at bus stops around town in order to advertise Chaimeleon. The poster series plays off of the idea that chameleons can blend into their environments. In this scenario, however, we are encouraging people not to blend inÂ. Instead, people should try something new and unique—a drink from Chaimeleon. Each poster features a Chaimeleon drink in the foreground and a store-bought drink in the background. The bright and saturated Chaimeleon drink stands out from the more muted color of the store-bought drink, which blends into the background.
54
55
56
57
EXTERIOR SIGNAGE
58
SOCIAL MEDIA
59
MERCHANDISE
60
62
TEA YOU LATER.