Margin & Gutters

Margins are clear spaces around the edges of a composition, ensuring no content bleeds off the page.

Typically, the margin will be 4% to 7% of the shortest side of the composition. There is no exact science to finding the perfect margin size, but use this as a visual reference.

Columns are vertical spaces that run up and down the layout. The space between columns, called the gutter, should typically be 50% of the margin width. Use 2-8 columns.  Always use an even number of columns: 2, 4, 6, or 8.

Setting Typography

Left-aligned is the most common way that we set typography. It can appear to be large or full-width. It can also hang off of an interesting grid line to create visual interest.

Staggered typography can be used for communications where we want to be extra expressive. It’s when we hang words from columns, creating movement within a block of copy. We only use staggered copy for short headlines typeset with large copy.

Color and Photography

Applying Color in Layouts

Core Color can be applied without limitations—to the background, the typography and to the logo itself.

For added expression, Emotive Color blends can be layered or masked into these compositions as well. We never use the Dynamic Color Palette for typography or the identity.

Applying Photography in Layouts

Photography can also be used in harmony with typography and color to inspire and bolster the joy of movement.

When applying photography, the most important thing to remember is to leave room for other elements and utilize negative space effectively