Layout
The layout is where all the visual elements come together. A good layout requires careful planning and composition. It relies on design principles such as hierarchy, scale, proportion, contrast, harmony, rhythm, repetition and more.
Table of contents
Divisions of two
At the core of the grid concept is the idea of divisions of two. This can be applied to most surfaces, screens and print in order to divide space into an effective grid system.
Digital modular grid
The base unit of a digital modular grid is 4px. The 4px unit guides everything in a digital environment, from the construction of the grid to all the elements that live within it.
Digital baseline grid
The text bounding box aligns to the 4px baseline grid. Typography can be placed outside of the 4px grid when it’s centered within a component, such as a button or a list item.
Grid structure
Each case may require a different grid structure. Keep these nuances in mind when constructing a grid.
Divide space into 2, 4, 8, 12 or more columns or rows to achieve structure.
Add margins to a canvas when you need to separate content from the canvas boundaries.
Add gutters to columns and rows when additional space is needed to separate content. Always align to the gutters rather than the canvas divisions. Columns and rows must always remain the same.
Dividing space into columns and rows is the basis through which the system will help you to organize content.
Digital responsive grid
A responsive grid allows a layout to change dynamically based on the size of the screen and a set of breakpoints. This will guarantee consistent layouts across all of the ICS materials and internal products.
Resize the browser to see all the responsive grid changes for each breakpoint.
Desktop 12 column / Tablet 8 column / Mobile 4 column.
Digital spacing scale
Spacing between elements can be defined based on the 4px unit. Use the multiples of the base unit to build a layout. Consistent and repetitive use of spacing ensures spatial rhythm between all content.
The spacing scale is used for arranging components and other object parts into a full page layout. It has increments that are used to control the density of a design. Use the smaller layout tokens to create more dense compositions and direct relationships. Use the larger tokens to increase the amount of white space and to disassociate sections.