Digital Layout

As mentioned previously in the Mobile section above, we have four breakpoints in order to accommodate a variety of device sizes:

• Mobile: 320px
• Tablet: 768px
• Desktop: 1024px
• Desktop HD: 1440px

Within those breakpoints we use a responsive grid that is set to 12 columns for desktop devices, 6 columns on tablets, and 2 columns on mobile phones.

Grid, Spacing & Padding

Desktop HD and Desktop

Uses a 12 column grid. Each column is 50px wide with a left-padding and right-padding of 15px each. The total working width of the grid is 960px.

Tablet

Uses a 6 column grid. Each column is 90px wide with a left-padding and right-padding of 15px each. The total working width of the grid is 720px.

Mobile

Uses a 2 column grid. Each column is 130px wide with a left-padding and right-padding of 15px each. The total working width of the grid is 320px.

Cards & Elevations

In combination with the 12-column grid mentioned previously, we utilize containers as a foundation for creating visual structure and breaking up content on a page. Those containers are referred to as cards.

Card containers have rounded corners set at 8px with a default background color of white (#FFFFFF), though we occasionally use one of the lighter values in the digital color palette instead.

Examples of cards at different elevations: