Logo Files
Notes on Hawkes Blue Background: When used next to image along top, use straight light. When used against white background along top, use wave design. Always use wave design along bottom and follow with white background.
Color Palette
Hawkers Blue Rows With Wave Edges
Use this blue row either as the row directly after a hero image (1), or as row a off-set in the middle of design (2).
1 - Top edge against hero image is straight and butted up against image. Bottom edge is “wave”. Height: 80px. Y-Offset: -80px. Orientation: flipped vertical. Scale 2-4 (adjust to fit design). Next row will need 80px top margin or padding adjustment to account for wave design.
2- Top and bottom edge will have wave design. Height: 80px. Y-Offset: -80px. Orientation: flipped vertical. Scale 2-4 (adjust to fit design - usually higher number is better). Previous and Next row will need 80px top margin or padding adjustment to account for wave design.
Image Style
Image style is vector illustrations using our Jasper Red as the primary color in the color scheme of the image.
All current images are from StorySet. Fresh images can be searched for here. Just set the primary color to Jasper Red. Animating the image is also possible.
Cusom illustrations can be created, they should follow the style of the images below:
Hero Image
Seen at the top of this page and many others on the site and throughout our brand.
When placing text over the Hero Background Image: use white-text with text drop shadow
{text-shadow: 1px 1px 3px rgba(0,0,0,0.5);} & a Hawkes Blue overlay at 30% opacity, plus enough padding to show all of the microphone/headphone image.
Fonts
Headlines Are In "Nunito Sans" Ultra Bold. Line Height: 1.4.
H1 40px
H2 36px
H3 28px
H4 18px
H5 14px
H6 12px
Paragraph: Body fonts are in "Nunito Sans" Extra-Lite. Font-size: 18px. Line Height: 1.4.