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

 
Homepage Masthead