bonneville ctc style guide (final)
TRANSCRIPT
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
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
Aa ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890(,.;:?!$&*)
Roboto
Weight: 100
Style: italic
Aa ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890(,.;:?!$&*)
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
Aa ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890(,.;:?!$&*)
Roboto
Weight: 400
Style: normal
Aa ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890(,.;:?!$&*)
Roboto
Weight: 400
Style: italic
Aa ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890(,.;:?!$&*)
Roboto
Weight: 500
Style: normal
Aa ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890(,.;:?!$&*)
Roboto
Weight: 500
Style: italic
Aa ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890(,.;:?!$&*)
Roboto
Weight: 700
Style: normal
Aa ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890(,.;:?!$&*)
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
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
Background ColorsHeading 2
Heading 3
Font: Montserrat
Weight: Bold
Style: normal
Size: 22px
Line Height: 1
Text Color: #000000
Background: #FFFFFF
Text Colors
Background ColorsHeading 3
Heading 4
Font: Montserrat
Weight: normal
Style: normal
Size: 20px
Line Height: 1
Text Color: #000000
Background: #FFFFFF
Text Colors
Background ColorsHeading 4
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