BRAND GUIDE
BRAND GUIDE
TABLE OF CONTENTS 1
10
19
Our Message
Clear Space
Applications
2
11
Introduction
Incorrect Use
3
12
Logo
Typography
Logo Use Reverse Black
13
Single Color Variation
Stationery
8
Business Cards
Minimum Size
Promotional T-Shirts Name Tags & Lanyard
22 Digital Application Website Social Media Mobile Application
25 Signage
Letterhead Envelope
Color Palette
T-Shirts
Business Card Typing Guide Letterhead Typing Guide Envelope Guide
26 Photography Styles
OUR MESSAGE
Hassle Free Clinic works from an anti-oppression framework that recognizes and respects the full diversity of Toronto’s communities
1 | Brand Guide
inclusive
guiding
dependable
We respect, accept and support the
We are happy to guide people with
We can always be depended upon when
diversity of Toronto’s communities
their life choices within our abilities
it comes to any sexual health problems, concerns and will always lend a helping hand with our many free services
Brand Guide | 2
INTRODUCTION
As Canada’s largest and most influential sexual health clinic, Hassle Free Clinic has played an important front-line role in identifying and serving the sexual health needs of a large and diverse at risk population since 1975.
3 | Brand Guide
The clinic was the first to make anonymous HIV
The Hassle Free Clinic Graphic Standards Manual
The Hassle Free Clinic Graphic Standards manual
testing available, even when at the time, it was illegal
reviews the various elements and tools comprising
must be followed closely in all Hassle Free Clinic
in Ontario. Next, it embarked to create a campaign to
the graphic foundation of Hassle Free Clinic’s brand.
communications to ensure consistency.
legalize anonymous testing. Through perseverance
The Hassle Free Clinic visual identity applies a
A unified visual identity for Hassle Free Clinic will
and determination, Hassle Free Clinic eventually
distinctive design approach to all Hassle Free Clinic
strengthen our ability to to gain recognition in the
developed Ontario’s anonymous testing guidelines,
communications, including signage, correspondence
community and the province, and our ability to
and trained staff across Ontario in designed sites.
materials, promotional material, stationery, web
receive donations in order to improve our services.
and mobile applications. The guide explains the
The improved online platforms will create easily
correct usage of the Hassle Free Clinic logo, colours,
accessible information and resources for the users.
typography, and layout styles that form the basis of
Using the new and improved promotional material,
Hassle Free Clinic’s overall communications system.
and visual identity, will reflect our activities, and
As a clinic that works from an anti-anti-oppression framework, that recognizes and respects the all diversity of Toronto’s communities, its visual identity needs to match these beliefs.
community involvement. The new and improved logotype is easily recognizable. It will help raise awareness and community involvement.
Brand Guide | 4
1.0 LOGO SYMBOL
YELLOW REPRESENTING GUIDANCE ORANGE, GREEN, PURPLE REPRESENT INCLUSIVITY
CLINIC NAME
TYPE MARK
About the Visual Identity The new logo represents the many traits of the clinic and embodies
Patients know they can depend on Hassle Free Clinic for anonymity,
the history the clinic was built on. The colours remind one of the
medical care and counselling in a respectful, non judgmental
Pride colors, representing inclusivity. It was important for us to give
manner.
the new logo a friendly and approachable personality, because of the reputation the clinic has in the community as a no-hassle sexual health clinic. The colours are refreshing, but relatable, and eye-catching. The yellow represents guidance, the blue expresses stability and dependability, and the green, orange and purple, stand for inclusivity. The shape also represents stability, and dependability. The clinic has been part of the Toronto’s community for four decades.
5 | Brand Guide
The four shapes resemble a puzzle piece, illustrating how Hassle Free Clinic is a piece of the Toronto community puzzle. All the four pieces come together to form a singular, strong, dependable shape. The typeface used for the wordmark is Montserrat Alternates Semibold for “Hassle Free Clinic” and Source Sans Variable Semibold for “Sexual Health”. The rounded shapes of the type complement the shape of the logo, creating a complete visual mark.
1.1 LOGO USE
STACKED LOGO
Logo Use STACKED LOGO TYPICAL USAGE: Outdoor/indoor Signage, formal invitations (events) and when co-branding with other vertical logos. HORIZONTAL LOGO TYPICAL USAGE: Web, mobile applications, promotional materials, stationary and when co-branding with other horizontal logos. This version is the only one to be strictly used on web. The logo is a custom element and should only be reproduced from authorized electronic artwork. HORIZONTAL LOGO Any substitution or alteration of the logo is not acceptable.
Brand Guide | 6
1.2 LOGO REVERSE STACKED LOGO: Reverse
Logo: Reverse The reverse logo will be used when the original version of the logo will be at risk for illegibility only. The reverse version should always have the center of the logo in white, for visual completeness. For example, on black posters, promotional events, websites.
HORIZONTAL LOGO: Reverse
7 | Brand Guide
1.3 LOGO BLACK HORIZONTAL LOGO: Negative Version
HORIZONTAL LOGO: Positive Version
STACKED LOGO: Negative Version
STACKED LOGO: Positive Version
Logo: Black The logo should only be used in black where color is not permitted or legibility of full color logo is at risk. For example full color promotional t-shirts, signs, other ephemera, exceptional print circumstances.
Brand Guide | 8
1.4 SINGLE COLOR VARIATION
HORIZONTAL LOGO: POSITIVE
HORIZONTAL LOGO: REVERSE
Single Color Logo It can only be used in the horizontal version. This version of the logo exists for the web. The logo can be used with either of the 5 main colors (color palette on pg. 10 ). The electronic artwork of these logos will be provided. This logo is meant to be used for minimum sizes, under 85 mm, when the full color logo would become illegible. For example, it will be used as the favicon for the Hassle Free Website. It is up to the clinic to consider other favorable uses. For example, when creating a promotional piece that requires full color, such as the promotional t-shirts, the color variations of the logo can be used in order to ensure legibility, if the full color logo would otherwise get lost.
9 | Brand Guide
1.4 COLOR PALETTE
HEX #: F16522
HEX #: 68bc45
HEX #: FFCD03
RGB: 241, G: 101, B: 34
RGB: 124, 72, 155
RGB: 255, 205, 3
CMYK: 1, 74, 99, 0
CMYK: 60, 85, 1, 0
CMYK: 0, 18, 100, 0
PANTONE: Orange 201 U
PANTONE: 2587 CP
PANTONE: 116 C
HEX #: 4691ce RGB: 70, 145, 206 CMYK: 71, 33, 0, 0 PANTONE: 2143 XGC
HEX #: 68bc45 RGB: 104, 188, 69 CMYK: 63, 0, 100, 0 PANTONE: 360 C
Color Palette This colour palette is essential to the maintaining and conveying the Hassle Free Clinic brand and image. These are the only colours to be used in accordance to Hassle Free Clinic. The colours are present in the visual mark. Use the colours to your discretion, but always keep in mind the message of the clinic. While the colours are a great tool for promotion and good for use on social media, it is easy to overuse it. Try to only use two colors at a time, and to not use coloured text on photos. Always ensure there is legibility.
Brand Guide | 10
1.5 MINIMUM SIZE
35 mm
Minimum Size The minimum size for the stacked and horizontal version of the logo ensure legibility, and the logo must be used only within the established minimum size. The minimum size for the stacked logo is 35 mm wide. The minimum size for the horizontal logo is 65 mm wide. When the horizontal logo needs to be used under 35 mm, color variations of the logo are available, which ensure legibility.
11 | Brand Guide
85 mm
x
x
x
x
x
x
x
x
x
x
Clear Space
x
x x x x
1.6 CLEAR SPACE
A minimum area within and surrounding the logo, type mark and visual mark must be kept clear of any other typography as well as graphic elements such as illustrations, thematic images and patterns, and the trim edge of a printed piece. More than the minimum clear space is encouraged. Minimum clear space around all sides of the logo is equal to height of the lowercase “x” on its side (horizontal) in Source Sans Pro Regular. The “x” is equal to a quarter of either the left or right side of the logo, as shown in the diagram. See examples on your left.
Brand Guide | 12
1.7 INCORRECT USE
Do not stretch, condense or distort the logo in any way
Do not use the logo without the logotype
Do not create a pattern with the logo
Do not use the logo on a background where it is not visibile
Do not change the colors of the logo to anything besides the main colors
Do not change the placement of the elements
hassle free clinic sexual health Do not place the logo on a dark background without reversing it
Do not change the sequence or size of the elements
Do not change the colors of the logotype
Do not use other fonts
Do not change the sequence or size of “hassle free clinic” or “sexual health”
Incorrect Use These examples show the incorrect use of the logo. This is not meant to be a complete list. The logo must be used correctly in order to maintain a lasting and distinctive identity. Always reproduce the logo from the approved electronic artwork you will be provided with.
13 | Brand Guide
Do not crop
1.8 TYPOGRAPHY
Source Sans Pro Regular
Source Sans Pro Semi Bold
Source Sans Pro Bold
Aa Aa Aa
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890-!@#$%^&*()_{}:”<>? abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890-!@#$%^&*()_{}:”<>? abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890-!@#$%^&*()_{}:”<>? Typography Primary Typeface & Web Safe Typeface Source Sans Pro Regular should be used for body copy in publications. Semi Bold and Bold can be used for heads and sub-heads. Source Sans Pro Bold should never be used for paragraphs, or any large bodies of copy.
Brand Guide | 14
2.0 STATIONERY: Business Cards
BUSINESS CARD CLINIC: FRONT
BUSINESS CARD STAFF: FRONT
Business Card All the business cards for the clinic and staff feature the
hassle free clinic
horizontal logo on the front left. The business card contact information is set in Source Sans Pro 9pts on 13 pts leading. The name of the clinic and the name of the website are set in Source Sans Pro bold, in 9 pts on 18pts. The back of the business card features the stacked logo. This template for the business cards must always be
BUSINESS CARD: BACK
followed. The information should always be as follows: Clinic Name Phone Number Address
hassle free clinic
15 | Brand Guide
Website
2.1 STATIONERY: Letterhead Letterhead Margins Top: 0.5 in Bottom: 1 in Left: 1 in Right: 1 in The letterhead will be supplied as a template, and should not be recreated.
Brand Guide | 16
2.2 STATIONERY: Envelope
Envelope The envelope will be supplied as a template, and should not be recreated. The envelope was created using the Canada Post guidelines.
17 | Brand Guide
2.3 STATIONERY: Business Card Typing Guide
Business Card Margins Left: 0.35" Right: 0.85" Top: 0.2" Bottom: 0.4" The size of the business card is always 3.5x2 inches. The business card contact information is set in Source Sans Pro regular 9pts on 13 pts leading. The name of the clinic or the staff name, and the name of the website are set in Source Sans Pro bold, in 9 pts on 18pts.
hassle free clinic
The back of the business card will always consist of the
stacked logo, at 70% of the business card size, centered. The template will always be available as part of the suite.
Brand Guide | 18
2.4 STATIONERY: Letter Typing Guide Letterhead Margins Left: 1" Right: 1" Top: 2.4" Bottom: 1" Copy is set in Source Sans Pro 10 pt with 15 pt leading and full line spaces between paragraphs. Use 2 full lines of space for the signature space. Begin the copy 2.4" from the top of the page and finish the text no closer than 1" from the bottom. A Word Template is available.
19 | Brand Guide
2.5 STATIONERY: Envelope Typing Guide
Envelope Margins Left: 3" Top: 1.5" Bottom: 0.625" Copy is set in Source Sans Pro 12 pt on 14.4 pt leading. The address box is never to exceed 4” wide and 1.75” long as shown in the diagram. Start copy 1.5” from the top, and finish the text no closer than 0.625” from the bottom. The copy begins 3” from the left and the type area should not exceed 4”.
Brand Guide | 20
3.0 APPLICATION: T-shirts
FRONT T-SHIRT
21 | Brand Guide
BACK VOLUNTEER T-SHIRT
BACK EMPLOYEE T-SHIRT
T-Shirts The t-shirts for employees and volunteers should take this exact model. The stacked logo will be on the front left, a size of 5x5 inches. On the back, the shirt will describe either an employee or a volunteer, in either one of the five main colors (refer to color palette). The ‘volunteer’ or ‘staff’ type is all capitals, Source Sans Pro semibold, across the shoulder blades. This precise template can be used for fabrication. The design was created on a medium Unisex t-shirt. It will be the same dimensions on all sizes of t-shirts.
Brand Guide | 22
3.1 APPLICATION: Promotional T-shirts
23 | Brand Guide
Promotional T-Shirts These specific designs will only be used for Pride Parade Toronto. T-shirts in each of the five Hassle Free Clinic colors will be made, each with a specific corresponding color logo. Purple t-shirt with yellow, yellow t-shirt with blue, blue t-shirt with yellow, green t-shirt with orange and orange t-shirt with green. The size of the logo on the front of the t-shirt will be approximately 5.5x8 inches.The back design will be approximately 8 inches wide by 4 inches high. These sizes are for a Medium Fit unisex t-shirt, the designs will be the same size on all size t-shirts.
Brand Guide | 24
3.2 APPLICATION: Name Tags
NAME TAGS
LANYARD
Volunteer Name Tag
Back Neck
Employee Name Tag
25 | Brand Guide
Inside Straps
Name tag Size: 3.6 in x 2.6 in The template can be used to create more name tags. There are two different name tags, one for volunteers, and one for employees.
Lanyard The lanyard is 36 inches in length, by 5/8â&#x20AC;? is the width. Name tag + Lanyard + T-shirt are to be used together. They complete each other, tying together the identity of a Hassle Free Clinic volunteer or employee, for very low cost for the clinic. The name tags are laminated, and the lanyards can be ordered in bulk, using this design template.
Brand Guide | 26
4.0 DIGITAL APPLICATION: Website MAIN PAGE
27 | Brand Guide
ABOUT PAGE
ABOUT PAGE CONTINUED
Website Hassle Free Clinicâ&#x20AC;&#x2122;s website http://hasslefreeclinic.org/ provides updated and important information to the clients and donors of the clinic. To ensure its effectiveness, standard templates have been developed for each page. All content on hasslefreeclinic.org should use the websiteâ&#x20AC;&#x2122;s native styles for displayof standard page elements such as paragraph text, headers, image treatment, data tables and hyperlinks. While some custom coding is allowed in page content, styles and layout elements may not overwrite or conflict with native styles.
Brand Guide | 28
4.1 DIGITAL APPLICATION: Social Media
hassle free clinic
hassle free clinic
hassle free clinic
29 | Brand Guide
The profile photo on Facebook should always be
The profile photo on Facebook should always be the
the vertical logo on a white background (180x180
vertical logo on a white background. Do not alter
pixels). Do not alter the photo for any reason. The
the photo for any reason. The cover image can and
cover image can and should be changed regularly.
should be changed regularly. Photography can be
It is important to stay in touch with social media
chosen according to the Photography Style. Twitter
since most clients and potential donors always seek
is a great way to spread news shortly and quickly and
information through these platforms. Photography
should be updated constantly. Using photography is
can be chosen according to the Photography Style.
a great way to engage the audience.
Brand Guide | 30
4.2 DIGITAL APPLICATION: Mobile
31 | Brand Guide
SPLASH
INTRO SCREENS
MENU
APPOINTMENT
STI&HIV INFO
CHAT
Mobile Application The mobile application was a new addition to the Hassle Free Clinic digital presence. It should help people find and reference information easily, ask questions, and make appointments. It is organized by color, making the interface friendly and easy to use. Each page is color coordinated. The photography style should always be followed, it is okay for images to be repeated from the website. The chat option is still in beta testing. The appointment form comes with a disclaimer, as the client still requires a phone call back from the clinic to confirm an appointment. Most clinics in the GTA have the ability to book online, thus Hassle Free Clinic needed this option as well in order to keep their clients. The typography used for the application is Source Sans Pro, with titles in bold, and text in regular weight, 30 pts. The design for the application should not be altered. Only the information found on the application can be changed.
Brand Guide | 32
5.0 SIGNAGE
OUTDOOR SIGNAGE
33 | Brand Guide
INDOOR SIGNAGE
Signage Indoor signage uses the black versions of the logo. It can either be displayed on a plexiglass panel, in black, or on the brick wall, in white, painted, or from ceramics. The size of the signage depends on the wall it is displayed on. The outdoor signage consists of the logo in full color, on a plexiglass or glass panel. The size should be 13x13 inches. In order to save costs, only the outdoor signage is done in color. It also ensures legibility on the brick wall inside the clinic when the logo is in black or knockout.
Brand Guide | 34
6.0 PHOTOGRAPHY
35 | Brand Guide
Photography Style First style of photography is blue sky and cool tones. It is good for the photos to show groups of people connecting, part of a community, that are happy. The first photo is great because it does not show a ato the Pride Flag, which represents inclusivity. The second photo shows volunteers, a great photo to use when advertising volunteering or certain events. Always consider the situation the photograph is going to the used for, and if the atmosphere and circumstance matches the brandâ&#x20AC;&#x2122;s mission. Warm lightning, yellows and orange tones. The atmosphere is friendly, shows human connection and bonding, and most importantly, a healthy lifestyle. Try to show as much diversity as possible in the photos. The photos do not need to always include people, but always keep in mind inclusivity, guidance, and dependability.
Brand Guide | 36