Do's + Dont's

The following examples illustrate how the visual guidelines should be applied and which applications should be avoided.

 

Homepage Masthead
 
Use the orange promo bar to highlight a secondary message
Don’t highlight important messaging in a background image
 
Use a background gradient from the brand color pallette
Don’t use background colors outside of the brand color pallette
 
Use a background image with low-contrast areas behind the type
Don’t use a busy or high contrast image that inhibits legibility of type
 
04a_HpMasthead_Do.png
Keep a single point of focus in background images
Don’t feature more than one subject in a single image
 
Background Images
Use ambient, desaturated images when using the gradient overlay effect
Don’t use food images or saturated images with the gradient overlay effect
 
Page Layout
Vary the backgrounds and layouts to provide breaks for the user
Avoid using 3 or more full bleed images in a row
 
Icons
Use filled-in shapes for legibility at small sizes
Don’t use outlined icons
Don’t combine more than one idea in an icon
 
Text
Keep headlines consise and limit the Marydale font to one line
08b_Text_Dont.png
Don’t write long headlines that force the text to two lines
 
Use title case for headlines and CTAs and sentence case for paragraphs, eyebrows, and subheads
Don’t use all-caps unless required
 
CTAs
Use CTAs provided in the CMS
Don’t add CTAs into an image