STYLE GUIDE 1
Table of Contents ELEMENTS 6810 11 12 14 -
Logo Logo & Tagline Color Typography Graphic Elements Photography Style
PRINT 18 20 22 24 26 28 -
Stationery Interior Signage Exterior Signage Uniforms / Premiums Brochure Vehicle Graphics
DIGITAL 32 36 37 38 39 40 42 -
Website Email Signature Email Newsletter Web Banners App Layout Social Media Commercial
3
4
ELEMENTS
Logo Logo & Tagline Color Typography Graphic Elements Photography Style 5
LOGO Primary Logo and Usage
Secondary Usage
6
Do Not Use the Logo this Way
Do Not Stretch the Logo
Do Not Place Logo on Another Color
Do Not Apply a Drop Shadow
Do Not Change the Color of the Logo
Do Not Apply a Gradient
Do Not Place Logo Upside Down
Do Not Display the Horn Mark Alone
Do Not Change the Logo Typeface
The Emerging Leaders logo features a design inspired by the Open Buffalo Logo. Using the horns from the Buffalo, an abstract shape was created. The shape exudes upward motion, as well as stability. The logo should be used in all design functions as a means to establish credibility and heighten the work completed by the Emerging Leaders program. The logo may be displayed either in Emerging Orange on a white background or in white on an Emerging Orange, Leadership Lime background. 7
LOGO AND TAGLINE Primary Logo Lockups
CHARGING BUFFALO
CHARGING BUFFALO 8
Alternate Logo Lockups
CHARGING BUFFALO
CHARGING BUFFALO
Tagline: Charging Buffalo - This tagline offers a unique wordplay on the word ‘charging.’ In this context, ‘charging’ can be interpreted as “rushing forward,” or as “rejuvenating,” both of which have strong connotations in regard to the Emerging Leaders program. Alternate logos have also been created for extended horizontal spaces. 9
COLOR Primary Color - Emerging Orange, a bold and eye-catching color reflects the dynamic leadership showcased in the Emerging Leaders program. Emerging Orange should always featured as the main color in all design, and is the only color that the logo should appear in, aside from black and white configurations.
Emerging Orange Pantone 7416C CMYK (3.74.70.0) RGB (234.103.82)
Secondary Color - Bumblebee Buffalo and Leadership Lime are the secondary colors for the Emerging Leaders program. These colors should be used selectively when incorporating additional elements to design.
Bumblebee Buffalo Pantone 106C CMYK (3.5.85.0) RGB (252.228.68)
Leadership Lime Pantone 368C CMYK (58.2.100.0) RGB (119.188.31)
Tertiary Color - Maroon to Improve, You’re Doing Gray-t and For the Gray-ter Good are the tertiary colors for the Emerging Leaders program. These colors should be used sparingly when incorporating additional elements to design.
Maroon to Improve Pantone 188C CMYK (33.93.74.38) RGB (122.35.46) 10
You’re Doing Gray-t Pantone 427C CMYK (17.12.13.0) RGB (209.211.211)
For the Gray-ter Good Pantone 430C CMYK (54.40.37.4) RGB (125.134.140)
TYPOGRAPHY DINPro - DINPro is a versatile sansserif font that allows for a strong range of typographic control. As a sans-serif font it is easily legible, as well as meaningful. This typeface should be used for headers and bold statements.
DINPro Light DINPro Regular DINPro Medium DINPro Bold DINPro Black ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
Century Schoolbook - Century Schoolbook offers a playful serif font that can also assume a serious tone. With several variations, Century Schoolbook allows users to create expressive and meaningful copy.
Century Schoolbook Regular Century Schoolbook Italic Century Schoolbook Bold Century Schoolbook Bold Italic ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
11
GRAPHIC ELEMENTS
E
Double Bold Line - Used to denote headings and other important type. The bold line is twice the size of the Horizontal Bar of a bold DINPro ‘E’ at the type size being used. Additionally, the line should stretch to the exact length of the type. This element conveys a strong sense of purpose and importance.
Photo Horn - An additional element added to photography to add an additional visual element to imagery. A solid overlay should cover the photo at 35% opacity, the solid colored horn should be overlaid with the smaller horn at 19% opacity.
12
Horn Overlay - Derived from the dual horn shape from the logo, the Horn Overlay can be used atop vast areas of color to add additional depth to a design. This design element can be utilized only on Emerging Orange, Bumblebee Buffalo, or Leadership Lime. The element can be cropped according to the needs of the space. This element makes for strong usage on print graphics as well as dividers within presentation slides.
Triple Horn - Derived from the dual horn shape from the logo, the triple horn can be used as an additional element that bleeds off of the page. It can be used with the primary color, a combination of the primary and secondary colors, or white if used on a colored background.
13
PHOTOGRAPHY STYLE
People To build upon the idea of upwardly rising individuals being developed through the Emerging Leaders program, leaders will be photographed in upwardly angled compositions in environments that relate to their field of work. 14
Places As with people, places should be photographed with an upward angled composition as a means of establishing a powerful, and admirable look-and-feel for the city of Buffalo and the work being done within its limits. 15
16
Stationery Interior Signage Exterior Signage Uniforms / Premiums Brochure Vehicle Graphics 17
STATIONERY Envelope #10 - 4.125” x 9.5” Jacob Schupbach Emerging Leaders 617 Main Street, Suite 350 Buffalo, NY 14203
Jacob Schupbach University at Buffalo 210PA South Lake Village Buffalo, NY 14261
Letterhead - 8.5” x 11”
Jacob Schupbach Emerging Leaders 617 Main Street, Suite 350 Buffalo, NY 14203
Jacob Schupbach University at Buffalo 210PA South Lake Village Buffalo, NY 14261
18
Business Cards - 2� x 3.5�
JACOB SCHUPBACH Senior Social Media Assistant University Communications 617 Main Street, Suite 350 Buffalo, NY 14203 716.380.1280 jpschupb@buffalo.edu
Stationery - Each piece of the stationery set is used to add purpose and professionalism to the interactions that Emerging Leaders encounter on a regular basis. The simple designs allow the content of the documents to shine while being elevated by subtle graphic elements such as the double bold line and triple horn.
19
INTERIOR SIGNAGE Wall Treatment
20
Podium
Wall Treatment - For use in an office space, a wall treatment will place a large logo signature upon the wall to establish a sense of grandeur as well as a welcoming environment through a strong use of the Emerging Orange color. Podium - Emerging Leaders will be consistently speaking to their peers in order to share their messages. Thus, a metallic podium sign will be created as a means to allow for a professional speaking point for the leaders. 21
EXTERIOR SIGNAGE
CHARGING BUFFALO openbuffalo.org
Billboard - To attract potential leaders, a large billboard has been designed to be implemented in a high visibility area. The design simply makes use of the Horn Overlay to create a highly visible base color on which the tagline, logo and web address sit. 22
CHARGING BUFFALO
External Signage - As a member of the Market Arcade within Buffalo, Emerging Leaders will be subjected to the signage type made available to them. As seen above, the signage is an extended rectangle, therefore the signage makes use of the Emerging Leaders alternate logo. 23
UNIFORMS / PREMIUMS
CHARGING BUFFALO
Emerging Leaders Polo - Front
Emerging Leaders Polo - Back
Apparel - Professionalism will be a major aspect of the Emerging Leaders program. In order to help the members dress the part, professional polos have been designed to further develop the branding of the Emerging Leaders program. The shirts are colored Emerging Orange with the Double Bold Line making a key appearance as an accent on the sleeves and collar. 24
Travel Mug
Travel Mug - Every good leader in Buffalo loves a warm drink in the middle of wintry weather! The Emerging Leaders travel mug allows for on-the-go leadership and refueling.
Portable Charger
Portable Charger - A good leader is never without a source of energy! Playing off of the Emerging Leaders tagline, the portable charge is an invaluable asset for anyone. 25
BROCHURE
EMERGING LEADERS CHARGING BUFFALO
Emerging Leaders 617 Main Street, Suite 350 Buffalo, NY 14203 openbuffalo.org
Back
Front
Brochure - To offer interested persons more information. The brochure makes use of a variety of design elements to create a cohesive look and feel. 26
HEADLINE
L
orem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut malesuada nibh, eget lacinia est. Nam quis rhoncus mi. Cras tempus mollis massa auctor dictum. Fusce consectetur condimentum accumsan. Sed semper pretium ultrices. Nullam a fermentum neque. Vestibulum tempus, tortor at vehicula auctor, justo est tempor nunc, eget semper libero arcu vitae nunc.
Caption for above image.
Nam porttitor dolor vitae porta aliquet. Duis pellentesque vestibulum metus a scelerisque. Sed ut neque eget felis viverra euismod. Fusce quis sem venenatis, vulputate quam nec, cursus neque. Donec a egestas velit. Sed tempor justo vel justo congue accumsan ac eget arcu. Morbi sed dolor vel justo posuere varius id a metus. Pellentesque blandit, orci nec pulvinar iaculis, metus risus gravida dui, sit amet posuere erat purus ut tortor. Sed malesuada congue luctus. Phasellus interdum sapien ex, nec pharetra ligula malesuada ac.
Inside Left
HEADLINE Donec et dapibus ipsum. Duis ac gravida mi. Vestibulum aliquam vehicula magna ac eleifend. Nam sit amet lacus a mi egestas condimentum. Sed velit neque, tempus et sem at, accumsan laoreet metus. In malesuada, nunc in faucibus suscipit, tellus ligula fringilla nunc, sagittis dignissim nulla nibh vitae ipsum. Ut a tellus eu erat egestas semper. Mauris neque magna, imperdiet et elit at, fermentum dictum urna. Proin hendrerit aliquet venenatis. Quisque porttitor sem erat, sit amet mattis enim eleifend id. Sed suscipit quis nibh in ullamcorper. Nam porttitor dolor vitae porta aliquet. Duis pellentesque vestibulum metus a scelerisque. Sed ut neque eget felis viverra euismod. Fusce quis sem venenatis, vulputate quam nec, cursus neque. Donec a egestas velit. Sed tempor justo vel justo congue accumsan ac eget arcu. Morbi sed dolor vel justo posuere varius id a metus. Pellentesque blandit, orci nec pulvinar iaculis, metus risus gravida dui, sit amet posuere erat purus ut tortor. Sed malesuada congue luctus. Phasellus interdum sapien ex, nec pharetra ligula malesuada ac. Etiam justo ligula, elementum id turpis vel. Sed suscipit quis nibh in ullamcorper.
Caption for above image.
HEADLINE Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut malesuada nibh, eget lacinia est. Nam quis rhoncus mi. Cras tempus mollis massa auctor dictum. Fusce consectetur condimentum accumsan. Sed semper pretium ultrices. Nullam a fermentum neque. Vestibulum tempus, tortor at vehicula auctor, justo est tempor nunc, eget semper libero arcu vitae nunc. Nam porttitor dolor vitae porta aliquet. Duis pellentesque vestibulum metus a scelerisque. Sed ut neque eget felis viverra euismod. Fusce quis sem venenatis, vulputate quam nec, cursus neque. Donec a egestas velit. Sed tempor justo vel justo congue accumsan ac eget arcu. Morbi sed dolor vel justo posuere varius id a metus. Pellentesque blandit, orci nec pulvinar iaculis, metus risus gravida dui, sit amet posuere erat purus ut tortor. Sed malesuada congue luctus. Phasellus interdum sapien ex, nec pharetra ligula malesuada ac. Etiam
justo ligula, elementum id turpis vel, ullamcorper elementum ante. Donec et dapibus ipsum. Duis ac gravida mi. Vestibulum aliquam vehicula magna ac eleifend. Nam sit amet lacus a mi egestas condimentum. Sed velit neque, tempus et sem at, accumsan laoreet metus. In malesuada, nunc in faucibus suscipit, tellus ligula fringilla nunc, sagittis dignissim nulla nibh vitae ipsum. Ut a tellus eu erat egestas semper. Mauris neque magna, imperdiet et elit at, fermentum dictum urna. Proin hendrerit aliquet venenatis. Quisque porttitor sem erat, sit amet mattis enim eleifend id. Sed suscipit quis nibh in ullamcorper. Nam porttitor dolor vitae porta aliquet. Duis pellentesque vestibulum metus a scelerisque. Sed ut neque eget felis viverra euismod. Fusce quis sem venenatis, vulputate quam nec, cursus neque. Donec a egestas velit. Sed tempor justo vel justo congue accumsan ac eget arcu. Morbi sed dolor vel justo posuere varius sem.
Inside Right
27
VEHICLE GRAPHICS Profile View
Vehicle Graphics - In order to maintain legibility and express the purpose of the van quickly and efficiently, the van makes use of only a few graphic elements. Most notably, the vehicle wrap features the Horn Overlay over the majority of the van. 28
Rear View
29
30
DIGITAL
Website Email Signature Email Newsletter Web Banners App Layout Social Media Commercial 31
WEBSITE
About Us
Lead with Us
Open Buffalo
DONATE
Contact
CHARGING BUFFALO EMERGING LEADERS In 2015, Open Buffalo launched Emerging Leaders, a first-of-its-kind leadership development school which aims to build a stronger Buffalo by preparing new leaders in our city. Those who have been accepted into the 2016 EL class will complete an innovative curriculum that combines cutting-edge community organizing training, action-oriented research, and interpersonal skill-building. Local partners from across the Open Buffalo social justice collaborative join forces with national trainers to deliver this groundbreaking curriculum and begin to build a new leadership pipeline in Buffalo. In addition, each participant is paired with a mentor in order to further build bridges between communities and organizations in our city. The 2016 Emerging Leaders are 26 dynamic community leaders, representing a diverse range of identities and from every corner of Buffalo. Participants were selected with the intention of empowering communities directly impacted by injustice. Careers
32
Contact
Open Buffalo Emerging Leaders 617 Main Street, Suite 350 Buffalo, NY 14203
News & Press
Privacy Policy / Your Privacy Rights
Site Terms
Help
Login
About Us Lead with Us Open Buffalo Contact DONATE
GET IN TOUCH
CONTACT Questions and Comments? We would love to hear your feedback! Fill out the following, and we’ll take your feedback into careful consideration. Name Email Feedback
Jacob Schup|
Website - Each web page makes use of a large visual with the Photo Horn overlaid upon it. An action statement relating to the purpose of the page is then placed upon the Photo Horn. This give a direct understanding of what purpose the page serves. The mobile version of the website makes use of a hamburger menu to hide navigation. Once tapped, the hamburger menu extends to reveal what page the user is on, as well as what other pages they can travel to. 33
WEBSITE
About Us
Lead with Us
Open Buffalo
DONATE
Contact
OUR ORGANIZERS ABOUT OPEN BUFFALO Open Buffalo is a community movement for social and economic justice. Open Buffalo is a shared vision of an equal, just, and free city driven by a united and empowered community, open to full democratic participation, innovative ideas and policies, new leaders from diverse communities, and meaningful economic opportunity and sustainable wealth creation for all. Community leaders, grassroots organizations, entrepreneurs, artists, innovators, and residents are working together to “open� Buffalo and make this vision a reality. For more information head to www.openbuffalo.org.
Careers
34
Contact
Open Buffalo Emerging Leaders 617 Main Street, Suite 350 Buffalo, NY 14203
News & Press
Privacy Policy / Your Privacy Rights
Site Terms
Help
Login
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis mi sit amet arcu ultrices tempus. Nam tortor magna, tempor sed sagittis in, vestibulum nec diam. Vestibulum vel erat turpis. Integer laoreet at leo et semper. Nulla facilisi. Morbi rhoncus, mi ac maximus euismod, lorem turpis feugiat nisl, ullamcorper accumsan odio tortor venenatis massa. Mauris mattis luctus augue, eget cursus neque posuere id. Vestibulum molestie eget orci eu fermentum. Morbi ultrices elit et risus mollis consectetur. Donec ac mi lacinia, consectetur sem et, placerat ipsum. Proin ultrices enim condimentum justo vehicula egestas. Morbi augue eros, tincidunt nec vulputate et, pharetra non erat. Sed ac risus a enim scelerisque feugiat. Sed sagittis lobortis porttitor. Integer a ornare dolor, feugiat faucibus.
Careers Contact News & Press
Website - A key note to keep in mind regarding web design is that all pages should be entirely responsive so that all users have a positive and seemless experience when interacting with the site. Furthermore, a responsive website reads in a more professional manner. 35
EMAIL SIGNATURE Jacob Schupbach Senior Content Social Media Assistant University Communications Emerging Leaders Class of 2017 www.linkedin.com/in/jacob-schupbach
Name Title Company Line 1 Emerging Leaders Class of 20XX Vanity LinkedIn Hyperlink
Email Signature - As the final impression left at the end of an email, the email signature assumes a clean look that allows a natural framing of email communication. The signature also features a vanity LinkedIn Hyperlink highlighted in Leadership Lime. A vanity link can be created within the bounds of LinkedIn’s product. 36
EMAIL NEWSLETTER
UPDATES Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus laoreet molestie metus in consectetur. Cras urna sapien, vestibulum eget bibendum nec, lobortis sit amet mi. Suspendisse vulputate magna sit amet ante hendrerit, a molestie sem ornare. ›› CONTINUE READING
BLOG Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus laoreet molestie metus in consectetur. Cras urna sapien, vestibulum eget bibendum nec, lobortis sit amet mi. Suspendisse vulputate magna sit amet ante hendrerit, a molestie sem ornare. ›› CONTINUE READING
CONNECT: Email Newsletter - The email newsletter makes use of the Horn Overlay to split topics of discussion. Additionally, as with the email signature, Leadership Lime is used to denote hyperlinks for additional web content. 37
WEB BANNERS
LEAD BUFFALO. TODAY. ›› LEARN MORE
CHARGING BUFFALO
Web Banners - In the event that Emerging Leaders chooses to seek new applications using digital media, simple banner ads have been created to draw the attention of web users. The banner ads can be changed to fit size specifications, but all ads will make use of the bright Emerging Orange coloring as a means of grabbing attention. 38
APP LAYOUT
DIRECTORY
NAME
FIND HELP I need help from someone who knows...
Jacob Schupbach University at Buffalo Class of 2017 Name Organization Class of 20XX
DESIGN
Organization Class of 20XX My name is Jacob Schupbach, and I am a member of the Emerging Leaders class of 2017. I work for the University at Buffalo, and my areas of expertise include: Social Media Engagement as well as Graphic Design. Feel free to reach out if you have any questions!
Name Organization Class of 20XX Name Organization Class of 20XX
ABOUT
Name Organization Class of 20XX
PROJECTS
VOLUNTEERS SOCIAL MEDIA
MESSAGE
Jacob Schupbach University at Buffalo Class of 2017
HEALTH CARE
I was so excited to work on the Retree the District Project! With the help of over 300 volunteers, we were able to plant 175 trees in the University Heights area.
Name Organization Class of 20XX
REFUGEE SERVICES
Name Organization Class of 20XX
PEOPLE
CONNECT
PROFILE
PEOPLE
CONNECT
PROFILE
HEALTH CARE MAIL CONNECT PROFILE
PEOPLE
App Layout - The Emerging Leaders app is an micro social media platform exclusively for people within the city of Buffalo. The work of Emerging Leaders is prominently featured for all to see and learn from. Other users can use the platform not only for inspiration, but also to get in contact with leaders that they believe can help them. The design of the platform makes heavy use of many design elements as the platform must work for a variety of means. 39
SOCIAL MEDIA
Facebook Icon
Twitter Icon
Icons - The social icons simply showcase the logo mark on account using the entire logo signature would be illegible at the smaller icon scale used by the mobile versions of the social platforms.
Instagram Icon 40
Covers - The cover photos used for Emerging Leaders features the DINPro typeface placed within the city of Buffalo. This is a visually appealing image that has a high shareability factor, so that when the Facebook algorithm shares the image to users, many will feel prideful enough to share the post.
Facebook Cover
Twitter Cover 41
COMMERCIAL
1 - View of Buffalo, showing off the city that the leaders are working to improve, making the ad more relevant.
2 - An Emerging Leader begins to speak about their experience and connections to another leader.
3 - The second Emerging Leader talks about their connections and how they accomplished a task.
CHARGING BUFFALO
4 - A third Emerging Leader joins and talks about their experience and how the program moves the city of Buffalo forward. 42
5 - All three Emerging Leaders look directly at the camera and state the name and tagline, Emerging Leaders: Charging Buffalo
6 - View of Buffalo, to frame the piece. An Emerging Leaders overlay is added to complete the story.
43