Grids and layout

How we control space in our brand communications

Grids and layout overview

An integral aspect of our design identity is to create space, reinforcing our guiding thought that “the future of work is the space to succeed.” Using a grid is important to achieving this goal—it helps you define how logos, typography, and graphic elements are coordinated on the page.

Digital grids

When planning out your digital designs, use the column, gutter, and margin specifications in the chart below. Large blocks of color and white space—divided on a horizontal plane—help create our brand’s overall look and feel.

Rows can be used at the designer's discretion.


8-column laptop grid

Small (mobile): text is locked to the margin; horizontal space is divided into 2 areas

Medium (tablet): columns define footer text blocks; horizontal space is divided into 3 areas

Large (laptop): content is divided vertically by 5 and 3 columns

Extra Large (desktop): content is divided vertically by 8 and 4 columns; nav bar uses columns for consistent spacing

Print grids

When creating documents in common sizes for print documents or PDFs, use the recommended specifications in the chart below. Slight modifications are acceptable if necessary. For layout sizes not shown here, create a new grid that has similar proportions to these common sizes.

All print grids use 20 rows, spaced evenly between the top and bottom margins.

11 x 8.5 inch grid

11 x 8.5 inch layout: text is aligned to margins and 2nd column; 1-column-width logo

8.5 x 11 inch layout: title spans 8 columns; body text is split into 4 columns each

4 x 6 inch layout: text spans 3 columns; 1-column-width logo
17 x 11 inch layout: content uses columns to define spacing; 3-column-width arrow graphic; 2-column-width logo

Digital banners

To maintain consistency across digital banners, all layouts should use an 18-pixel margin. Columns and rows can be used at the discretion of the designer. If using columns, set the gutters at 9 pixels wide.

Copy should be left-aligned. The copy should be short and simple—driven by a main headline, and followed by secondary copy if necessary. Avoid using more than two font sizes per layout.

Rows can be used at the designer's discretion.


4-column digital grid


Vertical rectangle (240 x 400 px); single column; text and logo are aligned to margin

Skyscraper (120 x 600 px); single column; text and logo are aligned to margin

Top banner (930 x 180 px); content is divided into 2 and 4 columns

Social media

Sizes vary for social media posts. The designer should determine the proper grid specifications to suit the piece at hand, while having a similar look and feel to our digital banners (see section above).

Copy should be left-aligned. The copy should be short and simple—driven by a main headline and followed by secondary copy if necessary. Avoid using more than two font sizes per layout.

Social media post: content aligns to margins; rows divide the horizontal space

Help

Click a question below to see the answer.

Why is using a grid helpful?

Grids inform alignment, placement, and scale of text, color fields, icons, photography, and illustration. Grids help communicate information with a clear hierarchical structure. Please see detailed guidance on the Grids page.

Do I have to follow the grid guidelines?

Yes, using the grid guidance will help bring coherence and consistency to our expressions.

Still have a question? Send us a message.