Mastheads

The masthead should express a single idea; a concise summary of the page’s content. Visually, it should be set apart from the rest of the page and entice the user to explore further.

 
 
Homepage - Image Grid
 Use a grid of images instead of a single person, which could be polarizing. Add animation to highlight one story at a time.   Background:  Grid of low-contrast, desaturated images, multiplied at 25% opacity over a gradient   Foreground/Animation:  One image pops forward at a time, using Marydale and a hand-drawn arrow for annotations   Eyebrow:  Marydale Regular, 28px, #FFFFFF   Headline:  Lato Heavy, 75px, #FFFFFF   Body Copy:  Lato Medium, 16px/25px, #FFFFFF

Use a grid of images instead of a single person, which could be polarizing. Add animation to highlight one story at a time.

Background: Grid of low-contrast, desaturated images, multiplied at 25% opacity over a gradient

Foreground/Animation: One image pops forward at a time, using Marydale and a hand-drawn arrow for annotations

Eyebrow: Marydale Regular, 28px, #FFFFFF

Headline: Lato Heavy, 75px, #FFFFFF

Body Copy: Lato Medium, 16px/25px, #FFFFFF

 
 
Interior Pages - Gradient
 Use a plain gradient with no imagery to provide a cleaner look   Background:  Any of the 3 primary gradients   Eyebrow:  Marydale Regular, 28px, #FADB00   Headline:  Lato Light, 64px, #FFFFFF   Body Copy : Lato Light, 14px/27px, #FFFFFF

Use a plain gradient with no imagery to provide a cleaner look

Background: Any of the 3 primary gradients

Eyebrow: Marydale Regular, 28px, #FADB00

Headline: Lato Light, 64px, #FFFFFF

Body Copy: Lato Light, 14px/27px, #FFFFFF

 
Interior Pages - Image
 Use overhead shots with props on a wood background to provide more context around the subject matter     Background:  Image with low-contrast copy space   Eyebrow:  Marydale Regular, 28px, #FADB00   Headline:  Lato Light, 64px, #FFFFFF   Body Copy:  Lato Light, 14px/27px, #FFFFFF

Use overhead shots with props on a wood background to provide more context around the subject matter  

Background: Image with low-contrast copy space

Eyebrow: Marydale Regular, 28px, #FADB00

Headline: Lato Light, 64px, #FFFFFF

Body Copy: Lato Light, 14px/27px, #FFFFFF