Grid and layout

Grids define structure, hierarchy, and rhythm in our design. Working with a defined grid system allows us to work faster and more consistently, removing guesswork as you lay out responsive designs.

Our predefined Figma layouts allow you to design at speed, consistently.

Grid layouts showing vertical column structures for tablet and mobile views.

Grid fundamentals

Our grid system is made up of groupings of columns and rows inside one or more containers. Each row can have a minimum of one column or a maximum of 12 columns of equal widths. Columns can be grouped together to create wider columns.

Grid system demonstration showing varied column combinations and widths within a 12-column layout.

Frame sizes

Our responsive design breakpoint guide illustrates 4 standard screen resolutions for different devices: mobile (375 x 812), tablet portrait (768 x 1024), tablet landscape (1024 x 768), and desktop (1440 x 900), represented with viewport dimensions.

Screen size breakpoint diagram showing viewport dimensions for 4 device types: mobile, tablet portrait, tablet landscape, and desktop.

1. 375 x 812

For all AIA apps and responsive websites in mobile view.
⁠

2. 768 x 1024

For all AIA tablet portals and responsive websites using a portrait tablet viewport.
⁠

3. 1024 x 768

For all AIA tablet portals and responsive websites using a landscape tablet viewport.
⁠

4. 1440 x 900

For all AIA web portals and responsive websites.