COLOR PALETTE Color: #cc0000 Color: #f39121 Color: # 1ba387 Color: #3599b4 Color: #6a5992 Color: #a8a8a8 Color: #000000 SITE-WIDE BACKGROUND COLOR Color: #e8eae7 height: 45 px note: text as image here to note: text as image here to keep note: hamburger on click opens keep with the brading of with the brading of the navigation. University. printed piece. link: this should link back to the link: this should link back to the NU homepage TOC main page. TOP NAV color: #ffffff Placement: Directing on top of hamburger icon Notes: Show the close icon when height: 90 px humbruger menu is open when it’s closed goes back to hamburger UX Link: Example of above description found here NAVIGATION FROM HAMBURGER when click on hamburger. height: 75 px height: 75 px color: #f39121 Placement: 10 px to left of text height: 75 px Font: Open Sans Bold Size: 18 px height: 75 px Style: All Caps Color: #ffffff Hover state: On hover the other text is blurred. UX Link: Example of above height: 75 px description found in navigation here. height: 75 px height: 75 px Color: #ffffff Line Weight: 1 px height: 100 px Line Length: fit within box padding Note: place top of line 40 px from base- line of text above and 55 px from baseline of text below. Color: #231f20 Box width: 425 px Box Height: length of screen height Padding: L, R, 50 px TOC TEXT Font: Open Sans Extra Bold Size: 82 px Style: All Caps Color: #ffffff Line Height: 72 px Drop Shadow: Opacity 70%, Distance 6 px, Spread 0 px, Size 6 px Font: Open Sans Semi Bold Size: 46 px Color: #ffffff Line Height: 54 px SCROLL ICON color: #ffffff Placement: centered to page Notes: persistent on the first page of all sections Functionality: Animation on page land- ing: mouse icon bounces twice, arrow static. Repeat every 5 seconds. height: 40 px STANDARD TEXT BOX Color: #ffffff width: 25 px Box width: 336 px Box Height: Variable to fit content Padding: L, R, T, 25 px; B 50 px Color: Varies section to section Box width: 208 px Box Height: 208 px Hover State: Color changes based on section when mouse over the button at Font: Open Sans Bold bottom of box Size: 36 px Color: #000000 Text-Align: Left Line-Height: 38 px width: 25 px Color: #000000 Line Weight: 1 px Line Length: fit within box padding Note: place top of line 18px from base- line of text above and 28 px from baseline of text below. Font: Open Sans Extra Bold Size: 14 px Color: #000000 Text-Align: Left Line Spacing: 20 px Button: On click link to modal window. Hover State: On mouse over change icon to learn more. UX Link: Animation of button on hover, coin flip similar to button on this page. Repeat coin flip every 5 seconds. STAT 01 Font: Open Sans Semi Bold Open Sans Extra Bold Font: Size: 50 px 325 px Size: Color: #ffffff #ffffff Color: Text-Align: Left Opacity 20%, Distance 3 px, Spread 0 px, Drop Shadow: Line-Height: 30 px Size 20 px Letter Spacing: - 20 px Note: This is a stat. It will be 4 numbers long. Final stat is TK. Font: Open Sans Extra Bold Color: #ffffff Size: 16 px Line Weight: 3 px Color: #ffffff Line Length: 137 px Text-Align: Left Note: l eft align with text, place top of line Letter Spacing: 420 px 18px from baseline of text above Note: Place baseline 28 px from bottom of line above, make sure dash is en-dash STAT 02 Font: Open Sans Semi Bold Size: 50 px Color: #ffffff Text-Align: Left Line-Height: 30 px Letter Spacing: - 20 px Font: Open Sans Extra Bold Size: 275 px Color: #ffffff Drop Shadow: Opacity 20%, Distance 3 px, Spread 0 px, Size 18 px Note: This is a stat. It will be 3 numbers long. Final stat is TK. Color: #ffffff Line Weight: 3 px Line Length: 137 px Note: l eft align with text, place top of line 18px from baseline of text above Font: Open Sans Extra Bold Size: 16 px Color: #ffffff Text-Align: Left Letter Spacing: 420 px Note: Place baseline 28 px from bottom of line above, make sure dash is en-dash STAT 03 Font: Open Sans Semi Bold Size: 50 px Color: #ffffff Text-Align: Left Line-Height: 30 px Letter Spacing: - 20 px Font: Open Sans Extra Bold Size: 125 px Color: #ffffff Drop Shadow: Opacity 20%, Distance 3 px, Spread 0 px, Size 15 px Note: This is a stat. It will be 4 numbers long. Final stat is TK. Color: #ffffff Line Weight: 3 px Line Length: 137 px Note: l eft align with text, place top of line 18px from baseline of text above Font: Open Sans Extra Bold Size: 16 px Color: #ffffff Text-Align: Left Letter Spacing: 420 px Note: Place baseline 28 px from bottom of line above, make sure dash is en-dash STAT 04 Font: Open Sans Extra Bold Size: 75 px Color: #ffffff Drop Shadow: Opacity 20%, Distance 3 px, Spread 0 px, Size 12 px Font: Open Sans Semi Bold Note: This is a stat. It will be 5 numbers long. Size: 40 px Final stat is TK. Color: #ffffff Text-Align: Left Line-Height: 27 px Letter Spacing: - 20 px Font: Open Sans Extra Bold Color: #ffffff Size: 16 px Line Weight: 3 px Color: #ffffff Line Length: 137 px Text-Align: Left Note: l eft align with text, place top of line Letter Spacing: 420 px 18px from baseline of text above Note: Place baseline 28 px from bottom of line above, make sure dash is en-dash INFOGRAPHIC TEXT BOX Color: #ffffff Opacity: 90% Box width: 225 px Box Height: Variable to fit content Padding: 25 px Font: Open Sans Extra Bold Size: 21 px Color: #000000 Color: #000000 Line Weight: 1 px Text-Align: Left Line Length: fit within box padding Line-Height: 23 px Note: place top of line 10 px from base- line of text above and 20 px from baseline of text below. Font: Open Sans Semi Bold Size: 14 px Color: #000000 Text-Align: Left Line-Height: 16 px width: 20 px Color: #000000 Box width: 42 px VIDEO MODAL Box Height: 42 px Modal: Screen loads to fit the screen minus 20px around to see a little of the screen behind the modal. width: 25 px width: 20 px width: 35 px Scroll Bar appears on Hov- NARRATIVE MODAL er and active scroll, dissa Color: #a8a8a8 Bar width: 13 px Color: #000000 Bar Height: 85 px Modal: Screen loads Box width: 42 px to fit the screen Box Height: 42 px minus 20px Width: 827 px around to see Height: Varies a little of the Color: #e8eae7 Color: #ffffff width: 13 px width, L, R, T B: 25 px Color: #e8eae7 width: 70 px width: 57 px Color: #ffffff Box width: 967px Box Height: Variable to fit content Font: Open Sans Bold Padding: L 70px; R 57px; T 35 px; B 35px Size: 36 px Drop Shadow: Opacity 20%, Distance 3 px, Color: #000000 Spread 0%, Size 20 px Text-Align: Left Line-Height: 34 px Font: Open Sans Regular Size: 16 px Color: #000000 Text-Align: Left Line Spacing: 22 px Indent: 20px (no indent on first paragraph of a after the headline) Font: Open Sans Extra Bold Size: 21 px Color: #000000 Color: #000000 Text-Align: Left Color: #000000 Line Weight: 1 px Line-Height: 15 px Box width: 42 px Line Length: fit within box padding Box Height: 42 px Note: place top of line 9px from base- line of text above and 20px from baseline of text below. Font: Open Sans SemiBold Size: 14 px Color: #000000 Text-Align: Left Line-Height: 16 px Color: #ffffff opacity: 90% Box width: 225 px Box Height: Variable to fit content Padding: L, R, T, B, 25px GALLERY MODAL Modal: Screen loads to fit the Color: varies screen minus 20px around Color: varies Box width: 45 px to see a little of the screen Box width: 45 px Box Height: 45 px behind the modal. Box Height: 45 px align: to edge of modal, align: to edge of modal, appears centered fromt top to bottom. appears centered fromt top to bottom. Color: #ffffff width, L, R, T B: 25 px.