Grid

Design

Grids are the foundation element that determines the layout of all elements in the interface. There is a vertical grid that defines the layout of elements across the page and a baseline grid that defines that layout of elements down the page. Grids are essential to creating a consistent layout and visual rhythm across the product.

Horizontal

The grid design uses a 16 column layout optimised to a page width of 980 pixels and uses 20 pixel wide gutters that results in 40 pixel column widths. The base unit for the horizontal grid is 5 pixels.

Baseline (Vertical)

The base unit for the vertical grid is 6 pixels and is optimised for typesetting.