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
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
Use filled-in shapes for legibility at small sizes
Don’t use outlined icons
Don’t combine more than one idea in an icon
Keep headlines consise and limit the Marydale font to one line
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
Use CTAs provided in the CMS
Don’t add CTAs into an image