A layout is an underlying structure that allows you to organize information and lay your content. A well-designed layout has a clear hierarchy and guides users through key pieces of information that serve their main goal. When used consistently layouts create a predictable experience, letting users navigate through a series of pages that they understand as part of a same flow.

A grid system is an ordering system. It sets the measurements used to space and size objects within a given format. It provides a consistent set of rules that is used to define the grid, the spacing system, typography, and the iconography system. All these foundational elements come together to build up the layout, and use the grid system to bring consistency and visual coherence between them.

Our design system is based on a 4-pixel grid system. It has a 4-pixel base unit, and uses increments of 4 to define the spacing and scale of elements on the interface.

Laying content

When it comes to laying content on a page, grid systems can follow a hard or a soft grid approach. A hard grid approach consists on laying text and objects on a baseline grid (a set of equally spaced horizontal lines used to measure typography from its baseline). The soft grid approach measures typography from its line-height and positions elements relative to each other, rather than to an actual baseline grid.

Our design system follows a a soft grid approach which allows more flexibility and is more closely aligned to how websites are built. Use the spacing system to lay your content and achieve a consistent vertical rhythm on the pages of your service.

Predictable

Define layouts that support concrete user flows and apply them consistently across your service. Having recognizable page types will help users navigate through your service in a more efficient way.

Consistent

Build layouts following the spacing system and create a coherent visual experience. Use a consistent logic when distributing content vertically down the page to determine the hierarchy and structure of your layout.

Responsive

Our design system works with responsive layouts. Don’t design for specific screen sizes, devices, or resolutions; instead, build for responsive, fluid content in a browser. To learn more about responsive layouts see responsive design to learn more about responsive layouts.

There are several components that control the layout.

App layout

The app layout component is the basic layout type for applications that include navigation, a content area, and tools or help panel. It consumes 100% of the width and height of the page and contains the following regions:

• Left side region (collapsible) dedicated to display the service navigation.

• Right side region (collapsible) dedicated to display the tools or help panel.

• Top region to display page level notifications such as flashbars.

• Content area where the main content of the page is displayed and the page level 12 column grid should be utilized.

The overall width of the content area has different values across the viewport breakpoints to ensure a balanced and consistent overall page design.

Grid

Our design system uses a fluid 12-column grid component that allows you to create layouts where elements can span across 12 columns of the available horizontal space. Columns have a variable width, while space between them (gutter) remains fixed.

Due to the nature and style of the design system — based on containers that adapt differently depending on the type of flow — the grid is often used to define the distribution of content within containers, rather than on a page level.

While the effects of a page level grid are more apparent on multi-column layouts, such as the service dashboard, all pages should define a page level grid as the first child of the App layout content area to create a consistent and predictable foundation for responsive page layouts. Additional grid components can also be used at the container level to provide further responsiveness of the inner content.

Column layout

The column layout component lets you create a multi-column layout inside a component where columns are sized equally. It is used to build complex layouts where several hierarchical levels need to be conveyed. As for the grid, be mindful when distributing content across columns since it will impact the perception of how the content is related.