Page 1

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

FACEBOOK

hassle free clinic 

hassle free clinic 

hassle free clinic 

TWITTER

29 | Brand Guide


Facebook

Twitter

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

Profile for Taby Petre

Hassle Free Clinic Brand Guide  

Hassle Free Clinic Brand Guide  

Profile for tabypetre
Advertisement