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 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.
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.
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.