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.
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 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:
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.
Paragraph: Body fonts are in "Nunito Sans" Extra-Lite. Font-size: 18px. Line Height: 1.4.