HAWTHORNE ELEMENTARY
SPANISH DUAL LANGUAGE SCHOOL
BRAND STANDARDS MANUAL
Title of Section | 1
TABLE OF CONTENTS Logos ................................................. 6 Colors ................................................ 20 Typography ..................................... 26 Photography ................................... 30 Design Elements ............................ 34 Web Elements ................................. 40
4 | Hawthorne Elementary Brand Standard Guidelines
LOGOS This concept is inspired by Hawthorne’s inspiring energy and authenticity. It speaks directly to the Spanish Dual Language program through its reference to Spanish grammar while giving a refreshing, new look to the Hawthorne Hawk and crest that speaks to our globally-minded mission. The colors should remain the primary Hawthorne yellow and blues, with no addition of the secondary palette.
Title of Section | 5
PRIMARY LOGO This is the primary logo that is used to represent Hawthorne Elementary and their Spanish dual language program. The logo has two different color application for when it is being applied on white backgrounds.
Logotype for white background
Logotype for color background
6 | Hawthorne Elementary Brand Standard Guidelines
Logo for white background
Logo for color backgrounds
Logos | 7
CLEAR SPACE The diagram below displays the appropriate amount space that should surround the logo in all print applications. The amount of clearspace is determined by the height of the circle that is at the bottom and top of the logo.
height of the circle
8 | Hawthorne Elementary Brand Standard Guidelines
SIZE The smallest the logo should ever be reproduced is 1/2 inch or 30 pixels.
1/2 inch 30 pixels
Logos | 9
INCORRECT USES 1
2
3
4
1. Do not tilt or rotate the logo.
3. Do not alter the scale or stretch the logo.
2. Do not crop the logo. 4. Do not apply a drop shadow to the logo.
10 | Hawthorne Elementary Brand Standard Guidelines
5
6
7
8
5. Do not rearrange elements
7. Do not change colors
of the logo.
of the logo.
6. Do not blur the logo.
8. Do not change elements of the logotype.
Logos | 11
SECONDARY LOGO This is the secondary logo is the Hawthorne Hawk. It is used to represent Hawthorne spirit. The Hawk is intended for more energetic, dynamic applications. It should not be used in any academic application for Hawthorne such as letterheads, and business cards.
Logotype for white background
Logotype for color background
12 | Hawthorne Elementary Brand Standard Guidelines
Logo for white background
Logo for color backgrounds
Logos | 13
CLEARSPACE The diagram below displays the appropriate amount space that should surround the logo in all print applications. The amount of clearspace is determined by the height of the hawk’s tail that is at the bottom the logo.
height of the circle
14 | Hawthorne Elementary Brand Standard Guidelines
SIZE The smallest the logo should ever be reproduced is 1/2 inch or 30 pixels.
1/2 inch 30 pixels
Logos | 15
INCORRECT USES 1
2
3
4
1. Do not tilt or rotate the logo.
3. Do not alter the scale or stretch the logo.
2. Do not crop the logo. 4. Do not apply a drop shadow to the logo.
16 | Hawthorne Elementary Brand Standard Guidelines
5
6
7
8
5. Do not rearrange elements
7. Do not change colors
of the logo.
of the logo.
6. Do not blur the logo.
8. Do not change elements of the logotype.
Logos | 17
18 | Hawthorne Elementary Brand Standard Guidelines
COLORS The Hawthorne brand uses a primary color palette of two blues and a yellow, staying true to the original school colors. These colors are to be used across all Hawthorne applications. The accent color palette is to be used as compliments to the original palette. They are intended to serve as visual accents and emphases.
Title of Section | 19
PRIMARY COLORS
only used on white background
HEX
#FFDD4f
HEX
#ffc20e
CMYK
0 11 80 0
CMYK
0 25 100 0
RGB
255 221 79
RGB
82 13 81
HEX
#00b5ef
HEX
#005c97
CMYK
83 1 0 0
CMYK
100 53 4 19
RGB
0 181 239
RGB
0 92 151
Because the appearance of color varies between application, the RGB color definition of each selected will be used for web use. The CMYK color definition will be used for print application. It is critical that for quality assurance, the correct color definition is used.
20 | Hawthorne Elementary Brand Standard Guidelines
ACCENT COLORS
HEX #05d77
CMYK 0 79 36 0
RGB 240 93 119
HEX #603f99
CMYK 76 90 0 0
RGB 96 63 153
HEX #2cb34a
CMYK 77 0 100 0
RGB 44 179 74
HEX #a884bc
CMYK 35 52 0 0
RGB 168 132 188
HEX #f58025
CMYK 0 61 97 0
RGB 245 128 37
HEX #010c03
CMYK 67 44 67 95
RGB 0 92 152 Colors | 21
COLOR DISTRIBUTION
70% PRIMARY COLORS This graph shows the appropriate color distribution for Hawthorne materials. 70 percent of materials should be a combination of the primary colors. The other 30 percent can be a combination of the accent colors. The accent colors should never overpower the primary colors.
22 | Hawthorne Elementary Brand Standard Guidelines
30% ACCENT COLORS
Colors | 23
24 | Hawthorne Elementary Brand Standard Guidelines
TYPOGRAPHY Hawthorne uses typeface pairing of Brandon Grotesque and Merriweather for their brand identity. This combination creates a combination of fun and youthful energy with academic seriousness. Brandon Grotesque brings the energy while the serif, Merriweather, speaks to academia.
Title of Section | 25
BRANDON GROTESQUE Brandon Grotesque will be used for all headers and titles. Both the black and bold weights of the typeface family may be used, depending on the copy and relativeness to other titles (i.e. Black for main heading, Bold for subheadings)
BRANDON GROTESQUE BLACK ABCDEFGHIJKLMOPQRSTUVWXYS abcdefghijklmopqrstuvwxys 1234567890!@#$%^&*()/? BRANDON GROTESQUE BOLD ABCDEFGHIJKLMOPQRSTUVWXYS abcdefghijklmopqrstuvwxys 1234567890!@#$%^&*()/?
26 | Hawthorne Elementary Brand Standard Guidelines
MERRIWEATHER For body copy and reading texts, Merriweather Light will be used.
Merriweather Light ABCDEFGHIJKLMOPQRSTUVWXYS abcdefghijklmopqrstuvwxys
1234567890!@#$%^&*()/?
HAWTHORNE’S VISION Hawthorne is adapting a new, original visual identity to reflect the uniqueness of their educational program. The tonality of the brand is to be energetic, vibrant, positive, authentic, inclusive, and aspirational. All materials are to be outstandingly welcoming and accessible to all.
Example of heading with body copy
Typography | 27
28 | Hawthorne Elementary Brand Standard Guidelines
PHOTOGRAPHY Photography used for Hawthorne materials is ideally more dynamic and less traditionally posed. High energy, high engagement photography is encouraged to reflect the nature of the lively school environment.
Title of Section | 29
SUBJECT MATTER All Hawthorne photography should be candid and personal, not posed or forced. Hawthorne should avoid the use of stock photography and clip art as well. Photography should reflect the reality at Hawthorne, whether that be classroom activities or teachers helping students with their work .
Correct use of subject matter
Incorrect use of subject matter
30 | Hawthorne Elementary Brand Standard Guidelines
COLOR PHOTOGRAPHY All Hawthorne photography should remain in color. Hawthorne should avoid the use black and white photography. Any editing done to the photos should be use to only increase the quality or resolution of the image.
Correct use of color
Incorrect use of color
Typography | 31
32 | Hawthorne Elementary Brand Standard Guidelines
DESIGN ELEMENTS Hawthorne uses hand-drawn elements to bring energy to their identity and designs. These design elements are not meant to be used in a academic setting. They are used to draw people in to learn more about Hawthorne Elementary and their dual language approach.
Title of Section | 33
PATTERNS Reflecting Hawthorne’s playful energy, these hand drawn illustrations are meant to be used as attention-grabbing visual elements. In order to complement this visually, the use of the hand-illustrated patterns come to play. It should not be used in any academic application for Hawthorne such as letterheads, and business cards.
34 | Hawthorne Elementary Brand Standard Guidelines
Selections from the Pattern Library
Design Elements | 35
HASHTAG In order to prompt users to use the social engagement hashtags, use lockups of the phrases “We do it in Spanish too” and “Lo hacemos en inglés tambien”.
Hashtag for white background
Hashtag for color background
36 | Hawthorne Elementary Brand Standard Guidelines
ILLUSTRATION APPLICATION Always use high-energy photos. When pairing photos with illustrations, the illustrations must interact with the photo to drive Hawthorne’s interactive learning curriculum.
Banner application of illustration style
Design Elements | 37
38 | Hawthorne Elementary Brand Standard Guidelines
WEB ELEMENTS Hawthorne’s website has a set of standards that differ from standards used in print applications. These standards consider user navigation and accessibility.
Title of Section | 39
GRID The website utilizes a 10 column, responsive grid with 3.125 rem gutters. The outer two columns act as the outer margins. For all devices, make sure there is a 1.875 rem top margin and a 6.25 rem margin between each header section.
40 | Hawthorne Elementary Brand Standard Guidelines
Grid application for home page
Web Elements | 41
COLOR The purpose of the website is to effectively deliver information to the user whilst driving the multi-cultural aspect that makes Hawthorne different from other schools. Use heavy whitespace (60%), along with an accent of the primary color palette (30%) and the secondary color palette (10%).
42 | Hawthorne Elementary Brand Standard Guidelines
Color application for website
Web Elements | 43
TYPOGRAPHY Although the font families remain consistent with print, typography is slightly adjusted in web for maximum legibility on screens. All type should be limited to Hawthorne Black and/ or Hawthorne White and follow the specified paragraph styles.
Header: Brandon Grotesque Black All Caps 30/32 Body: Merriweather Regular 16/30
44 | Hawthorne Elementary Brand Standard Guidelines
Subhead: Brandon Grotesque Black All Caps, 18/22 Button: Brandon Grotesque Bold 16pt
Quotes: Merriweather Regular 20/30 Caption: Brandon Grotesque Regular 14pt
Container Title: Brandon Grotesque Black All Caps 16/26 Body: Merriweather Regular 16/30 Button: Brandon Grotesque Bold 16pt
Web Elements | 45
BUTTONS Buttons are used to show the user important links with clear hierarchy from others. Primarily use the dark blue button, and add the secondary palette buttons as necessary for visual interest.
Primary Button
46 | Hawthorne Elementary Brand Standard Guidelines
Secondary Buttons
Web Elements | 47
SIZE Button background should be 200 pixels by 50 pixels with an 3 pixel border accent offset by 10 pixel to the bottom right.
60 px 10 px
210 px
48 | Hawthorne Elementary Brand Standard Guidelines
EXCEPTION The yellow Tour button with Hawthorne Black text is the only exception to color and size restrictions that should only appear in the navigation bar.
60 px 10 px
160 px
Web Elements | 49
CONTAINER BOX In order to convey listings of information with short descriptions, use container boxes. These should be 40% opacities of the colors from the Hawthorne palette. Never use black.
50 | Hawthorne Elementary Brand Standard Guidelines
Color options for container box
Web Elements | 51
SIZE Allow for a 30 pixel top and bottom padding and a 40 pixel left and right padding for all content inside the container.
USAGE WITH BUTTONS When using buttons within these containers, the button and background color must match although the transparencies will differ between 40% and 100% for the background versus the button respectively.
52 | Hawthorne Elementary Brand Standard Guidelines
30 px
30 px
40 px
40 px
Web Elements | 53
DIVIDER SECTIONS Keeping content-heavy pages visually interesting for the reader is important. For sections requiring more space for content, add divider sections to add color and rhythm to the black and white.
54 | Hawthorne Elementary Brand Standard Guidelines
Application examples of divider sections
Web Elements | 55
SIZE Always maintain the 8 column width with outer gutters, 65 pixel height for title background, and 30 pixel top and bottom padding for content within the divider section.
65 px 30 px
30 px
56 | Hawthorne Elementary Brand Standard Guidelines
8 column + outer gutter width
Web Elements | 57
Designed by Team Catalyst University of Louisville Hite Art Institute Fall 2019