Bonneville CTC Style Guide (FINAL)

Style Guide

2015

BONNEVILLE

CO UNITIESTHAT

Logo

Master Logo

The Bonneville CTC master logo should be used at all times. Where not possible, one of the logo variations should beused (see below). This is to make sure the logo and brand are used in a consistent manner across all communications.

Bonneville_CTC_Logo.png

I created the Logo for Bonneville Communities That Care (CTC) with the intention to adhere to its original design asclosely as possible. The organization has a large investment in branded promotional material with the original logoprinted on them. Since the source files of the original font and graphics were lost before our connection with theorganization, we needed to create a new logo that would serve its needs while maintaining a similar look. I created thelogo from scratch while honoring the needs and concerns of the organization I created it for. In order to maintaincontinuity of the font for the logo, I used Montserrat, the most similar font available that also has an open license tokeep costs down for this nonprofit organization.

The story behind Montserrat style font was created in an effort to rescue an old font from being lost because its rootscome from the first half of the 20th century. Bonneville CTC is also an organization that wants to rescue communityyouth from being lost in substance abuse and other risk behaviors that can steal away their future. Montserrat fontwas created by Julieta Ulanovsky who was inspired by the urban lettering on the storefronts of many shops and signsthat were so common in her hometown of Montserrat, Buenos Aires.

The graphic used to represent the letter “M” are vector shapes that I created to resemble a shape of a house so that itwould portray the idea of communities within the actual word communities. In this way, a creative graphic will helpcreate a memorable and appropriate trigger for the logo and what it stands for, as well as assist in making the logounique and recognizable. The word "communities" was meant to draw the attention of the reader. Therefore, it is of keyimportance that it be unique and stand out within the logo.

The word "Care" is a graphic, not a font. It has the appearance of being hand written with the desire to make the logofeel more personal, just like a letter from someone who cares should be handwritten. The handwritten look is quite rarein our digital world and echoes a human touch to the logo and reaches back to the purpose of the organization and itscause to care. The color red was chosen to not only to stand out against the neutral background and black font butalso for what the color red symbolizes. The color red stands for love, which is similar to care as well as it is sometimesassociated with pain and danger. It is also associated and can trigger visual thoughts of stoplights and signs. Thisshade of red is called Flush Mahogany (#BD282A) this color draws us back to the cause of the organization, stopping

https://app.frontify.com/d/LDxq2UYBm9ah/bonneville-ctc-style-guide

and preventing pain and suffering of youth and families who may have chosen to take part in risk behaviors.

Tundora (#232F20) Black was chosen due to its neutral color and goes well with the color of red chosen for the word“Care” in the rest of the logo. Another plus is, by keeping the number of colors used to a minimum it also keeps theprinting costs to a minimum. This is more important to this organization that hands out a lot of materials at events.

Isolation Area

The isolation area of separation is a minimum and space should be increased wherever possible. This is to ensures that headlines, text or other visual elements do not encroach on the logo. There are no predetermined sizes for the logo. Scale & proportion should be determined by the available space, aesthetics, function and visibility.

Logo Variations

The Bonneville CTC logo has been designed so it can be used with either a light or dark background and also ingrayscale printing. This allows the logo and brand to be flexible in it's usage. With strong use of red, black and whitecolors being used throughout all of our marketing communications, it is essential that our logo has the flexibility towork with all of our brand assets.

Bonneville_CTC_Logo_Inverted.png Bonneville_CTC_Logo_grayscale.pngBonneville_CTC_Logo_Inverted_grayscale.png

Social Media Profile Images

Facebook Profile (750 × 750)

BonnevilleCTC_Profile_Facebook-01.png

Twitter Profile (1667 × 1667)

BonnevilleCTC_Profile_Twitter-01.png

Instagram Profile (458 × 458)

BonnevilleCTC_Profile_Instagram-01.png

Colors

Primary Color Palette

The Primary Palette should be used in all occasions for Bonneville CTC marketing communications. The palette hasbeen designed to give a bold and exciting direction to the brand, offering flexibility in the design of literature off andonline. This shade of red is called Flush Mahogany and was chosen for the word “Care” in the logo. This color draws usback to the cause of the organization, stopping and preventing pain and suffering of youth and families who may havechosen to take part in risk behaviors. Tundora (Black) was chosen for the logo font. Due to its neutral color, it goes wellwith the color of red chosen for the word “Care". Another plus is, by keeping the number of colors used to a minimum italso keeps the printing costs to a minimum. This is more important to this organization that hands out a lot of mediaand promotion materials at its events.

Flush Mahogany

#BD282A

189, 40, 42

0, 79, 78, 26

Coated 7620 C

Tundora

#231F20

35, 31, 32

0, 11, 9, 86

Neutral Black C

Shades of gray

A selection of grayscale colors for background or text color use.

Black

#000000

0, 0, 0

0, 0, 0, 0

Coated Black 6 C

Tundora

#231F20

35, 31, 32

0, 11, 9, 86

Neutral Black C

Tuna

#4C4C4D

76, 76, 77

1, 1, 0, 70

Coated 7540 C

Submarine

#B3B4B4

179, 180, 180

1, 0, 0, 29

Cool Gray 5 C

White

#FFFFFF

255, 255, 255

0, 0, 0, 0

Coated 663 C

Color Usage

Bonneville CTC has 3 main colors, try to balance the usage evenly and consider the product usage:• Flush Mahogany - is mainly used in all Bonneville CTC designs, in the logo, brochures, posters, and online designs.• Tundora - is the color used for the main logo font and for any dark accenting in designs for print & web.• White - is the neutral color for the logo background and any other designs for print & web.

Typography

Our Font Families

Our font families should be used for all communications. This is to ensure the consistent look and feel of all literature in print & online.

Montserrat should be used for all header and sub-header text, where Roboto should be used for all other copy (body,quotes etc). To ensure a consistent look, make sure fonts are used in a consistent manner and the weights of the fonthave been considered, using heavier weights for headers and the highlight key messages.

Aa ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890(,.;:?!$&*)

Montserrat

Weight: 400

Style: normal

Aa ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890(,.;:?!$&*)

Montserrat

Weight: 700

Style: normal

Montserrat

Usage

HTML

CSS

Aa ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890(,.;:?!$&*)

Roboto

Weight: 100

Style: normal


Roboto

Weight: 100

Style: italic


Roboto

Weight: 300

Style: normal

Aa

Roboto

<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>

font-family: 'Montserrat', sans-serif;

1

1

AaAa ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz 1234567890(,.;:?!$&*)

Roboto

Weight: 300

Style: italic


Roboto

Weight: 400

Style: normal


Roboto

Weight: 400

Style: italic


Roboto

Weight: 500

Style: normal


Roboto

Weight: 500

Style: italic


Roboto

Weight: 700

Style: normal


Roboto

Weight: 700

Style: italic

Usage

HTML

CSS

Montserrat_Font.zip449 KB 4

Roboto_Font.zip2 MB 4

<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

font-family: 'Roboto', sans-serif;

1

1

https://app.frontify.com/api/attachment/download/36358


Headings & Body Copy

Used for both web & print... (next page)

Heading 1

Font: Montserrat

Weight: Bold

Style: normal

Size: 60px

Line Height: 1

Text Color: #000000

Background: #FFFFFF

Text Colors

Background ColorsHeading 1

Heading 2

Font: Montserrat

Weight: Bold

Style: normal

Size: 40px

Line Height: 1

Text Color: #000000

Background: #FFFFFF

Text Colors


Heading 3

Font: Montserrat

Weight: Bold

Style: normal

Size: 22px

Line Height: 1

Text Color: #000000

Background: #FFFFFF

Text Colors


Heading 4

Font: Montserrat

Weight: normal

Style: normal

Size: 20px

Line Height: 1

Text Color: #000000

Background: #FFFFFF

Text Colors


Body Text

Font: Roboto

Weight: normal

Style: normal

Size: 14px

Line Height: 1.3

Text Color: #000000

Background: #FFFFFF

Text Colors

Background ColorsRoboto is a neo-grotesque sans-serif typeface family developedby Google as a system font. Google describes the font as"modern, yet approachable" and "emotional".

Brochure

This is the brochure design for Bonneville CTC. The same style and colors would be used on other print media to createconsistency. The design for this brochure is meant to be modern and professional by using the slanted text sectionsand large images. The images help to highlight the theme of “pave the way to a brighter future” by using road travelimagery to represent the path in life that youth are on and the choices that are ahead of them, as well as parents whohave the responsibility to lead the way and keep an eye on their children in the proverbial “front seat.” Images of teenslearning and having fun with friends show youth choosing the better path.

Bonneville_CTC_ Brochure_FINAL-01.png

Bonneville_CTC_ Brochure_FINAL-02.png

Bonneville_CTC_ Brochur…13 MB 4

Images Used

light-sunset-man-trees.jpg SplitShire-8596.jpg


Index

Teen_Huddle_BW.jpg

Bonneville_CTC_Community_Event.jpg

View the online version of this style guide here:https://app.frontify.com/d/LDxq2UYBm9ah/bonneville-ctc-style-guide

Bonneville CTC: http://www.bonnevillectc.org/

Montserrat font by Julieta Ulanovsky: https://www.google.com/fonts/specimen/Montserrat

Roboto font by Christian Robertson https://www.google.com/fonts/specimen/Roboto

SplitShire-8596.jpg: http://www.splitshire.com/eyes-in-the-mirror/

light-sunset-man-trees.jpg: http://snapwiresnaps.tumblr.com/post/120620982689/jordan-mcqueen-instagram-free-under-cc0-10

Teen_Huddle_BW.jpg: https://www.flickr.com/photos/spirit-fire/4965078010

Last modified on Mon, 7. Dec 22:34

https://app.frontify.com/d/LDxq2UYBm9ah/bonneville-ctc-style-guide

http://null/

http://null/

http://null/

http://null/

http://null/

http://null/

Documents

Bonneville CTC Style Guide (FINAL)