UNC Eshelman School of Pharmacy

UNC Eshelman School of Pharmacy Brand Guide FINAL

Typography The primary typeface is Fira Sans (Hair, Extra Light, Book, Bold, Extra Bold as well as matching italic equivalents). This has been carefully selected to best represent the brand image, and must be used to retain consistency. Replacing fonts with alternatives should not be done under any circumstances. PRIMARY The typeface Fira Sans has been chosen as the primary typeface for all brand messageing within the School website including headlines, display copy, and body copy. Heirarchical distinctions can be made by using various weights and styles as well as incorporating the use of upper case and lower case text. HAIR abcdefghijklmnopqrstuvwxyz1234567890;!?. ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz1234567890 EXTRA LIGHT abcdefghijklmnopqrstuvwxyz1234567890;!?. ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz1234567890 BOOK abcdefghijklmnopqrstuvwxyz1234567890;!?. ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz1234567890 BOLD abcdefghijklmnopqrstuvwxyz1234567890;!?. ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz1234567890 EXTRA BOLD abcdefghijklmnopqrstuvwxyz1234567890;!?. ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz1234567890

Typography The secondary typeface is Adobe Garamond Pro (Regular, Semibold and Bold). This has been carefully selected to best represent the brand image, and must be used to retain consistency. Replacing fonts with alternatives should not be done under any circumstances. SECONDARY Adobe Garamond Pro has been chosen as the secondary font to accent the primary typeface, Fira Sans. Large bodies of copy such as long reports, magazine articles, etc. should incorporate the use of Adobe Garamond Pro for greater legibility. This font may also be used for more formal messaging such as event invitations, programs, etc. REGULAR abcdefghijklmnopqrstuvwxyz1234567890;!?. ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz1234567890 SEMIBOLD abcdefghijklmnopqrstuvwxyz1234567890;!?. ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz1234567890 BOLD abcdefghijklmnopqrstuvwxyz1234567890;!?. ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz1234567890

Color Palette Accurate reproduction of the brand color scheme is essential in communicating a clear and consistent message throughout the UNC Eshelman School of Pharmacy site. This palette will act as the main palette for all communication from the School. These basic tones should be incorporated into materials produced for all branches and groups within the scope of the UNC Eshelman School of Pharmacy. PRIMARY PALETTE The primary palette has been expanded to include the use of secondary/neutral tones that complement each other and can be used in any combination as long as the integrity of the brand is not diminished. NEUTRAL PALETTE

Color Palette The RGB and Hex color codes should be used exactly as shown below for web purposes in order to retain brand consistency. Please use Pantones whenver possible or the CMYK equivalents for print purposes. However, the colors may be used at various levels of opacity when neccessary. PRIMARY PALETTE hex pantone r g b c m y k #56A0D3 542 86 160 211 62 22 0 3 #044570 540 4 69 112 100 76 32 17 #E88A6B 1645 232 138 107 6 55 59 0 #EAB05E 1365 234 176 94 7 32 73 0 #707C7C 444 112 124 124 58 42 45 10 SECONDARY PALETTE hex pantone r g b c m y k #8F8778 403 143 135 120 44 41 51 7 #9DA39D 415 157 163 157 41 30 36 1 #EAE7C8 4545 234 231 200 8 5 24 0 #FFFFFF none 255 255 255 0 0 0 0

Pattern A simple geometric pattern is recommended to compliment the overall brand of the UNC Eshelman School of Pharmacy. The hard angles reflect the scientific nature of the School while the use of the thin lines combined with the almost translucent effect of a light tone will minimize any chance of overpowering the message within a specific design layout (web, print, etc.). Blue background shown only to provide a high-contrast view of the shapes within the pattern.

Sample Composition Below is a sample composition using the pattern shown on the previous page. This is not a concrete recommendation for the use of the pattern but shows you how it would work together with elements that have already been created. about programs faculty research divisions admissions news

Brand Elements Shapes can be pulled from the recommended pattern and used within the design layout to draw attention to specific messaging or created added visual interest. These elements should be used sparingly and with careful consideration to the overal goal of the piece.

Photography Recommendations Photography used in print, web, and other interactive pieces should provide not only a representation of life at the UNC Eshelman School of Pharmacy, but should also create a powerful emotional attachment to the education, research, and innovation happening here. Controlled color palettes that focusing on blues and grays coupled with an airy, light emphasis will reinforce the idea and feeling of cutting-edge modernity at the School. Whenever possible, compositions with unexpected angles should be used to bring excitement and energy to the overall layout. Photos that include students, faculty, and staff are welcome but should be used with high-consideration to the overall feel of the layout specific guidelines and examples are shown below. Photos should also strive to reflect diversity. ACCEPTABLE UNACCEPTABLE 1 2 3 Whenever possible, avoid photos like the ones shown here. 1. Overly staged; seems disingenuine 2. Group shots typically do not engage or provide an emotional connection with viewers, regardless of the significance of those shown in the photo. 3. Poorly lit photography conveys a lack of professionalism

Web Banners The images below will act as feature images placed just below the School s logo and main navigation. Banner images immediately point viewers to the mission and central goals of the UNC Eshelman School of Pharmacy and showcases the School brand by incorporating the color palette, typefaces and a unified photography style. Accompanying notes on page 7. OPTIONS FOR EDUCATION THEMED BANNER (cont d, next page) A B

Web Banners NOTES Text and headlines are only for placement purposes only. They can and should be changed to reflect the 3-5 main goals of the School. Photos of students and scenes from around campus and the School of Pharmacy were used to help supplement the headlines and provide an overall feel of the experience as a student, faculty or staff member at the UNC Eshelman School of Pharmacy. Four photos are placed below the headline text as a way to highlight the most recent happenings within the School and reinforce the heading (ie: student s research breakthrough story and photo to highlight the Innovative Research section. These photos will be active links that redirect to the full story page. When the viewer mouses one of the four feature story photos, the photo is overlaid with a gray box which reveals the abbreviated title of the story this acts as the hover state for the photo buttons.

Web Banners STANDARD DESKTOP VIEW VERTICAL MOBILE VIEW

Icons The icons below will bring emphasis to the three most important areas of the site pages and information that you want viewers to go to most frequently. These icons will also help to easily digest the sections by bringing an instant visual connection to the section title. Icons coordinate with the overall brand of the School by incorporating color and matching the clean approach to design established by the typogrgraphy and imagery in banners. See icons in context on following page.

Banner & Icon Mockup

Secondary Landing Pages