Grids
Layout
Our grid is the underlying structure that helps us assemble our brand elements into a cohesive whole.
Whether we’re crafting a detailed multi-page presentation or a simple social post, we always use the grid as our starting point.
Margins
Margins establish a consistent foundation for our compositions, ensuring content remains legible,uniform, and tidy. Our standard margin width isdetermined by dividing the document's longestside into 24 equal segments, with the width of onesegment becoming our margin. See the table below for some sample document sizes and margins.
1Sample Text
The margins listed here for Leaderboard Display and Skyscraper Display have been reduced for optical correctness.*
Columns
After establishing margins, we divide the interior space into vertical columns to help organize our content. columns are drawn in increments of two, based on the document’s width. Wider applications will need more columns, while narrow applications will need fewer.
Also consider the type of content that will occupy the space—complex information will require more columns to establish a clear hierarchy. See the table here for some common document sizes and sample column counts.
Gutters
After establishing margins, we divide the interior space into vertical columns to help organize our content. columns are drawn in increments of two, based on the document’s width. Wider applications will need more columns, while narrow applications will need fewer.
Also consider the type of content that will occupy the space—complex information will require more columns to establish a clear hierarchy. See the table here for some common document sizes and sample column counts.
Optical Guide
Applying Logos
After establishing a grid, our logos may be applied in layout.
Rather than using a singular logo lockup, our wordmark and Spark have been decoupled for more flexible and dynamic application. This section outlines the rules that govern their sizing and placement.
Proportions
When our wordmark and Spark are used together in a layout, they always maintain the size relationship shown here. The four inner segments of our Spark should match the height of our wordmark, making the Spark approximately 1.7x our wordmark’s height.
This size relationship is fixed, meaning the wordmark and Spark must always scale up or down as a set—never independently. Remember—our Spark and wordmark are separate logos. We do not lock them up together.
Scale
The standard height for our wordmark in layout is equal to the width of our margin. The corresponding height for our Spark is then 1.7x the margin height, according to the proportions established above.
Use this as a baseline measurement—logo sizes may require optical adjustment, particularly on very wide or very tall layouts.
Remember
When resizing the wordmark, our Spark must also increase or decrease accordingly to maintain correct proportions.
Placement
Our wordmark and Spark are always located on opposite sides of a layout. Where possible, we place the wordmark in the lower left corner and the Spark in the upper right. If this isn’t possible, you may use one of our secondary placements. To help you remember these placements, keep in mind two simple rules:
Applying Margins
When designing a layout, our first step is to establish margins using the formula:
Long Side ÷ 24 = Margin
In the case of very wide or very tall layouts, margins may need to be slightly reduced for optical correctness.
1 815px H ÷ 24 = 34px Margin
2 664px W ÷ 24 = 28px Margin
3 664px W ÷ 24 = 28px Margin
1
2
3
