BAT IK
S ALO N
&
S P A
BRAND GUIDELINE 2 0 1 8 Address 12345 College Blvd., Overland Park KS 66210
Phone 913-469-8500
Online Information Email: batiksalonandspa.com, Web: www.batiksalon&spa.com
CONTENTS
06 SECTION 01
BRAND BASICS
04 08 14 20 26
SECTION 1 BRAND INTRODUCTION
SECTION 2
BRAND IDENTITY ELEMENTS
SECTION 3 TYPOGRAPHY
SECTION 4 BRAND COLORS
SECTION 5 CORPORATE GRID
30 34 40 44 47
SECTION 6
20
BRAND IMAGE
SECTION 7 VISUAL PRESENCE/WEBSITE
SECTION 8 CORPORATE LETTERHEAD
SECTION 9 SUMMARY
SECTION 10 CONTACT INFORMATION
30 & 31 I M A GE R Y
3
1.1 Our Mission 1.2 Our Vision
4
BRAND INTRODUCTION S ECTI O N 01
5
INTRODUCTION TO OUR BRAND Welcome to the Batik Salon & Spa Brand Book. This book is designed to provide information and inspiration to our corporate and regional offices, providing them with a richer understanding of the brand, along with recommendations on how they can reflect and implement it in their own communications and interactions. It is also intended for our members, giving them insight into our unique spirit and vision for our brand now and into the future. This Brand Book has guidelines on how to present Batik Salon & Spa, verbally and visually, ensuring a more consistent treatment in all communications. This Brand Book is a living document, and sections may be added to it or refined as more visual elements of the brand are defined.
6
1.1 OUR MISSION UND ERSTANDI NG THE MIND -B ODY C ONNEC TI ON Our holistic approach to treatment is designed to promote healthy living by understanding the undeniable symbiotic nature of the mind, body, spirit connection to our wellness. Our mission at Batik Spa: Provide stress relief to people of all ages, lifestyles and health.
•
Practical ways to learn to use the mind-bodyspirit connection.
•
To provide a one-of-akind experience and an eagerness to return.
“
The mind and the body are like parallel universes. Anything that happens in the mental universe must leave tracks in the physical one.
“
•
DEEPAK CHOPRA
1.2 OUR VISION TAK ING HOL I STI C SP A • EX PERI ENC E TO THE NEX T L EVEL Our core principle is to empower each individual to be an active participant in their own wellness decisions. Here are some key principles we understand: •
Batik Spa knows that stress management is essential for a happy, healthy life.
Our unique therapy program begins with an individual assessment for a personalized program.
•
Education is an important aspect of the program and costs nothing to the client.
•
Our certified specialists listen to the client’s needs, and we promise to provide the best individualized program possible.
7
•
We provide the utmost attention to detail, Our resorts boasts lavish accommodations, unique cuisine, luxurious surroundings with exquisite views, and an array of personalized services.
2.1 Brand Mark Elements 2.2 Clear Space and Size 2.3 Acceptable Background 2.4 Unacceptable Usage 2.5 Brand Tagline
8
IDENTITY ELEMENTS S E CTI O N 02
9
2.1 BRAND ELEMENTS The Ultimate
Representation of Batik Spa & Salon Batik brand’s logo symbol and logotype play a powerful role in visualizing the company’s promises.
IN TR O DUC I NG TH E LOG O The Batik corporate logo is the ultimate representation of our company, our people, and our brand to the world. The logo is a unique and valuable corporate asset that must be used in the proper and approved way.
The corporate logo symbol colors have been selected based on research. Two corporate colors are used. The combination of these colors give the logo a modern, yet classic feel. The logo symbol is only used as an icon on specific websites: Facebook, Twitter, and You Tube. No other usage is allowed.
The letters of the logo are specially drawn and spaced. The icon is precisely proportioned and balanced with the Batik name. The
Never redraw, replace or modify the lettering in any way or rearrange the relationship between the icon and the logotype. Always use the Batik brand logo in its complete form. Never use a partial image or show just pieces. If you have any questions, please contact: Support@batiksalon.com.
STANDARD LOGO LOGO SYMBOL
LOGOTYPE
B A T&I K S
A
L
O
N
10
S P A
2.2 CLEAR SPACE & SIZE D EFINI NG THE CLEAR SP AC E To ensure legibility, let the logo “breath” by giving it some clear space.
BRAND LOGO
HORIZONTAL SPACE
VERTICAL SPACE
Horizontally space: 1/2 of the height of the “B” in the word “Batik” Vertical space: The entire width of the “B” in the word “Batik.”
S
A
L
O
N
&
S P A
MIN IMUM S IZE OF L OG O (P RI NT)
PRINT: 1” (25 MM)
In print, the logo should never appear smaller than one inch (1”, 25 mm).
S A L O N
&
S P A
PRINT: 1.18” (30 MM)
The logo must maintain its shape horizontally and vertically to keep proportions between icon and logo.
S
A
L
O
N
&
S P A PRINT: 1.58” (40 MM)
S
A
L
O
11
N
&
S P A
2.3 ACCEPTABLE BACKGROUNDS THE P ERFEC T BAC KG ROUND
The most effective background color is white as it gives a clean contrast for the logo’s color and elements. If the color reproduction is not available, the logo should be reproduced in solid black or solid white. Teal or gold foil is acceptable if fully treated in one color.
PRINT: #02827C WEB: R:3 G:130 B:125
PRINT: #6C5A36 WEB: R:108 G:90 B:54 S A L O N
BROWN BACKGROUND S A L O N
&
&
S P A
BROWN 70% #6C5A36
LOGO A COLORED VERSION S P A
BLACK BACKGROUND
LOGO B COLORED VERSION S A L O N
&
S P A
GRAY BACKGROUND S A L O N
&
LOGO C FOIL VERSION S P A
LIGHT TEAL BACKGROUND
LOGO D FOIL VERSION S A L O N
&
12
S P A
2.4 UNACCEPTABLE USAGE HOW NOT TO USE THE L OG O
The conditions under which the Batik logo may not be used is as follows:
IMPROPER USE OF SYMBOL
LOGO WIDTH TOO BIG S
A
L
O
N
&
S P A
COLOR IS INCORRECT
S
A
L
COLOR IS INCORRECT
O
N
&
S P A
S
IMPROPER COLOR USE S
A
L
O
N
&
S P A
S
A
L
O
N
&
S P A
TOO SMALL
A
L
O
N
&
S P A
S
A
L
O
N
&
S P A
2.5 BRAND TAG LINE BRAND TAGLINE
Holistic Wellness m i nd . b o d y . s p i r i t .
The brand tagline utilizes a short phrase to drive a brand messaging position home. The brand tagline may be used in the headline portion of print space or digital creative space. When not using the tagline as the headline, it can appear in combination with the logo but in its vector logo format.
The registered ( ) symbol must appear at the end of the tagline. Only two typefaces are allowed in the tagline— Allura, regular and Open Sans, light. Allura regular Open Sans, ultra light
13
S
A
L
O
N
&
S P A
Holistic Wellness —mind. body. spirit.
3.1 Font Information 3.2 Primary Typeface 3.3 Secondary Typeface 3.4 Type Hierarchy
14
TYPOGRAPHY S E CTI O N 03
15
3.1 S ELECTI ON OF THE CO R PO RA TE/BRA ND TYP EFA C ES
FONT INFORMATION Typography is a craft. It serves to allow the message to be easily read while complementing the message itself. This balance of form and function is at the heart of Batik’s choice of typefaces. Our typefaces serve to both complement the classic, handcrafted essence of the brand, as well as delivering a functional, contemporary typeface that works in tandem with it. The result is a powerful combination
16
that communicates both the contemporary and traditional aspect of the Batik Salon & Spa brand. The careful use of typography reinforces our personality and it communicates successfully to our target readers & customers. Batik uses Open Sans font family as our primary font. It is used in the body text, headers, and subheaders. Secondary fonts are used for emphasis or contrast where necessary.
3.2 PRIMARY TYPEFACE PR OP ER SEL EC TI ON O F P RI M A RY FONT FOR P RI NT
Four typefaces represent the Batik Salon & Spa brand in print: Open Sans, Optima, Playfair Display, and Source Sans. The careful use of typography reinforces the brand personality.
DESIGNER OF OPEN SANS: STEVE MATTESON BOLD
Open Sans
SEMIBOLD
Open Sans
REGULAR
Open Sans
ITALIC
FIGURES
Open Sans 0123456789 DESIGNER OF OPTIMA: HERMANN ZAPF
BOLD
BOLD ITALIC
REGULAR
ITALIC
FIGURES
Optima Bold Optima Bold Italic Optima Regular Optima Italic 0123456789
17
3.3 SECONDARY TYPEFACE SEL EC TI NG THE S ECONDA RY FONT
Source Sans typeface is used as the secondary typeface. This San Serif font family is versatile and pairs well with many serif and other San Serif fonts.
DESIGNER OF PLAYFAIR DISPLAY: OPEN SOURCE TRANSITIONAL BOLD
Playfair Display
BOLD ITALIC
Playfair Display
REGULAR
ITALIC
FIGURES
Playfair Display Playfair display 0123456789 DESIGNER OF SOURCE SANS PRO: PAUL HUNT
BOLD
Source Sans Pro
SEMIBOLD
Source Open Pro
REGULAR
ITALIC
FIGURES
Source Sans Pro Source Sans Pro 0123456789
18
3.4 TYPE HIERARCHY THE VI SUAL HI ERA RC HY
One of the most important techniques for communicating properly is the use of typographic hierarchy. It is another form of visual hierarchy in an overall design project to establish an order of importance within the data. Typographic hierarchy creates contrast between elements. This achieved through the use of typefaces, size, weight, capital and lowercase letters, orientation and color.
CHAPTER TITLE
Optima - 28 Point Type
COVER SUBHEAD
Playfair Display - 20 Point Type
LOGOTYPE AND HEADER
OPTIMA REG - 18 POINT ALL CAPS OPEN SANS - 14 POINT T TYPE ALL CAPS
SUBHEAD TEXT
Open Sans Regular - 14 Point Type OPEN SANS BOLD - 11 POINT TYPE CAPS
COPY TEXT
Open Sans - 8 Point Type
Open Sans - 10 point Type
Open Sans Regular - 13 Point Type CAPTION TEXT
Source Sans Pro - 8 Point Type regular Open Sans Regular - 8 Point Type & 0 Point Tracking or Leading OPEN SANS BOLD - 8 POINT TYPE CAPS
19
4.1 Corporate Colors 4.2 Primary Colors 4.3 Secondary Colors 4.4 More Colors
20
BRAND COLORS S E CTI O N 04
21
4.1 CORPORATE COLORS CO R E BRA ND CO LO RS
color and interior design is inspired by these traditions and tonality.
The color and design concept for Batik Salon & Spa is inspired by the batik art form. The goal is to bring the color and artistry of batik into the brand imaging. The brand
The Batik Salon & Spa logo have two primary official colors: Brown and Teal. These colors are a recognizable identifier for the company. The secondary colors are complementary
WEB TEAL (WEB) R: 4 G: 130 B : 1 2 5 HEX: 04827D
S A L O N
&
S P A
Its consistent use defines our brand and creates a visual language across all our communications material.
BROWN (WEB) R: 108 G: 90 B: 54 HEX: 6c5a36 BROWN(WEB) R: 108 G: 90 B: 54 HEX: 6c5a36
PRINT TEAL (PRINT) C: 86% M: 3 0 % Y: 52% K: 08% PMS: P 125-16 C
to our primary logo colors. When used together, they create the identifiers for Batik Salon & Spa.
S A L O N
&
S P A
BROWN (PRINT) C: 48% M: 5 3 % Y: 83% K: 32% PMS: P 16-16 C BROWN (PRINT) C: 48% M: 5 3 % Y: 83% K: 32% PMS: P 16-16 C
22
4.2 PRIMARY COLORS The two colors of our primary palette define the brand. Although not shown, use the black and gray for use with text. The white is used for white space and foil lettering offers a level of elegance and decoration.
P RI M A RY C OL OR P A L ETTE
TEAL
OLIVE
C: M: Y: K:
C: M: Y: K:
8 6% 3 0% 5 2% 0 8%
48 53 83 32
% % % %
108 R: 90 G: 54 B: HEX: 6C5A36 PMS: P 16-16 C
R: 0 G: 130 B: 126 HEX: 04827D PMS: P 125-16 C
100%
100%
80%
80%
60%
60%
40%
40% 20%
20%
23
4.3 SECONDARY COLORS A muted palette of secondary colors have been developed to interplay with the primary colors.
SEC ONDA RY COL OR P AL ETTE
BLUE
BROWN
C: M: Y: K:
56 36 35 02
R: G: B:
120 143 150
% % % %
C: M: Y: K:
45 % 66 % 76 % 47 %
R: G: B:
93 62 45
HEX: 5D3E2D PMS: P 43-14 C
HEX: 778E96 PMS:P 175-6 C
100%
100%
80%
80%
60%
60%
40%
40% 20%
24
20%
4.4 MORE USE OF COLORS M ORE C OL ORS
C: M: Y: K:
32 42 10 08
R: G: B:
171 135 46
These other colors provide more options , a variations of tints and shades as the primary and secondary colors.
% % % %
90%
70%
50%
30%
90%
70%
50%
30%
90%
70%
50%
30%
HEX: AB872E PMS: P 6-8 C C: M: Y: K:
2 9% 2 8% 4 2% 0 0%
R: G: B:
185 172 148
HEX: B9AC94 PMS: P 13-5 C C: M: Y: K:
44 36 36 01
% % % %
R: G: B:
150 150 150
HEX: 969696 PMS: P 179-7 C
25
5.1 Vertical Grid System 5.2 Example Grid System
26
CORPORATE GRID S E CTI O N 05
27
5.1 VERTICAL GRID V E R T IC AL G R ID SY ST E M A grid is a combination of vertical, horizontal and angular or curved guidelines used to structure the contents. However, they’re really so much more than just some lines on a page. They structure, guide, and shape design in a way that helps to achieve the desired end result. It provides balance in the division between the graphic elements to keep
28
5.2 EXAMPLE GRID your content organized. A grid helps to represent the message in a clean, direct, and organized way. It also has the added benefit of making any project quicker and more efficient to do.
Visual Language And White Space White space plays as important a role in design as other more visible attributes. White space, or the space that allows the page to breathe, demonstrates that what isn’t there can often have the greatest impact. The sense of openness it instils reflects elegant sensibilities and allows the viewer’s eye to have a comfortable, calming experience. White space serves to provide a focus and elevate the sense of importance of the content on the page. The effective use of rules is a classic and elegant way to separate and frame content. Rules help to provide a system of hierarchy of information. When used correctly, they can add a unique quality to the visual language of communications. Rules are experiencing a resurgence today and can be seen in many award-winning magazines, such as Monocle. They demonstrate a contemporary approach to graphic design. A well designed grid system is the foundational infrastructure for the visual language of communications. Its purpose is to create clarity in the
29
messaging. When done effectively, it provides balance in the division between the graphic elements, and contributes to the accessibility of the information. The look and feel of Batik Salon & Spa has a strong, effective grid system It is essential to employ a varied approach to the display of photography. The variety conveys a richness and diversity of experience. For Batik Salon & Spa, consider your photography as the hero, as can immediately elevate the effectiveness of your communications. The language of Batik Salon & Spa photography is a sensual combination of people, places and experiences.
6.1 Colored Images 6.2 More Images
30
BRAND IMAGE S E CTI O N 06
31
6.1 COLORED IMAGES GUIDE TO USI NG PH O T OG RAP HI C IMAGE S Visually, our photographic images aim to give your mind a pleasing sense of tranquility and luxury. It exudes assurance of quality, hospitality and beauty. It invites you to come in. We want you to feel confident that peace and relaxation is what you will find here. Our specialty is your comfort, and your enjoyment is our number one priority.
32
6.2 MORE IMAGES B R AN D IMAG E S R E Q U IR E ME N T S:
33
•
Attractive, yet simple depth of field creates focus on the details.
•
Use lighting for a tranquil effect and to give off an overall feeling of luxury, well-being and harmony.
•
Image should adhere to the corporate colors.
•
High resolution, high contrast, desaturated colors are a requirement.
•
An overall professional look should be carefully adhered to.
7.1 Social Media 7.2 Mobile Media 7.3 Desktop/Devices 7.4 Website
34
VISUAL PRESENCE S E CTI O N 07
35
7.1 SOCIAL MEDIA GUIDE TO SOC I AL MED IA The Batik Salon & Spa social media template is designed to visually present promotional information to consumers. Logo, color palette and typography usage are similar to the website in order to create consistency and recognition across media.. The brand or resort specific logo is always featured in the top along with social media link Icons to bring rhythm and consistency in a design.
FACEBOOK COVER
36
7.2 MOBILE GUIDE TO TABL ET AND MOBI L E DEVI C ES Batik Salon & Spa has a portfolio of world-class designs and experts. There are some requirements to protect the integrity of the brand: •
High contrast adding a generous proportion of white space gives the eye a focal point on the spread.
•
Minimum size of stroke to be 0.5 pt
ABOUT US
SERVICES
APP ICON
APPOINTMENT
SHOP OUR STORE
SPECIAL OFFERS
37
7.3 DESKTOP/DEVICES
LA P TOP
T AB L E T
38
DE SK T O P
7.4 WEBSITE GUIDE TO BATI K WEBS ITE
EXAMPLE OF WEBPAGE
The design of the website reflects the exquisite, euphoric and harmonious look and feel of the Batik Salon & Spa brand. The site uses all the web colors of the brand. Headlines use the font Open Sans Pro in all caps with accompanying subheads in all caps or lower case Source Sans Pro.
WEB D ESI G N R EQ UIREM ENTS: •
High contrast text color
•
High quality image
•
Resolution 768x1024 px
•
Professional look
•
Format RGB
39
8.1 Corporate Letterhead and Envelope 8.2 Business Card
40
STATIONERY S E CTI O N 08
41
8.1 CORPORATE LETTERHEAD Standard 8.5” x 11”
GUIDE TO USI NG T H E LE TTERHEA D
0.5 “ clear space
Batik letterhead is simple and elegant. It exudes a sense of calm and understated strength.
S
A
L
O
N
&
S P A
0.2 “ clear space
LET TERHEAD: •
Standard 8.5 x 11 inches
•
Clear space around logo: .5 inch space above .2 inch space below
•
Clear space below company address footer
•
.5 inch space below
ENV EL OP E: •
High contrast text color
•
High quality image
•
DIN A4 letter size
•
Professional look
•
Weight 123g/m
•
Print format CMYK
12345 College Blvd., Overland Park KS 66210 | www.batikspa.com | cathy@gmail.com | 913-555-1212
0.5 “ clear space #10 Envelope: 4 1/8" x 9 1/2"
S A L O N
&
S P A
12345 College Blvd Overland Park, KS 66210
42
8.2 BUSINESS CARD GUID E TO USI NG THE BUS INESS C ARD
3.5"
FRONT
Batik Salon & Spa is simple and elegant.
2" S
BUS INESS C A RD:
A
L
O
N
&
S P A
www.batiksalonandspa.com
•
High contrast text color
•
Dimensions 3.5” x 2”
•
Professional look
•
Weight 400g/m
•
Print format CMYK
3.5"
BACK Cathy Hoag
2"
S
A
L
O
N
&
123 Main Street Overland Park, KS 66062 S P A
cathy@gmail.com | www.batiksalonandspa.com | 913-555-1212
43
9.1 Summary
44
SUMMARY S E CTI O N 09
45
9.1 SUMMARY OF CORPORATE BRAND MANUAL This brand guideline was designed to informs and direct communications for Batik products and services. As part of a larger effort, it is designed to build awareness, understanding and preference for the Batik brand in a very competitive market in which we compete. To build a brand that endures is the ultimate reward. The Batik brand including the logo, name, colors and identifying elements are reserved as company assets. We are responsible for protecting the company’s interests and to prevent unauthorized use of the Batik name and marks.
46
10.1 CONTACT INFORMATION CO NTA C T INFO RM A TI ON Cathy Hoag, President 12345 College Blvd., Overland Park KS 66210 Email: batiksalonandspa.com Web: www.batiksalon&spa.com
47
Batik Salon
& Spa
12345 College Blvd Overland Park KS 66210 913-469-8500
Email: batiksalonandspa.com, Web: www.batiksalon&spa.com