Nets Design logo and other specific symbols

Grid - Baseline

The basic principle of the Nets baseline grid is using multiples of 8 (or 4) to define dimensions, padding and margin for all design components.

This proposed structure is based on Google’s Material design guidelines, where all components rigorously align to an 8dp square baseline grid and all typography aligns to a 4dp baseline grid.

Why is the baseline grid important

  • Consistence and harmony in your designs
    Using the 8pt grid facilitates the creation of an aesthetically pleasing composition to the overall pages you are designing. By using a defined rule of sizing instead of arbitrary numbers to define the space and size of elements, we ensure a visual consistency between different Nets products, and also between the components of each product.
  • Faster output of design resources
    The grid allows teams to move quickly and efficiently. Providing fewer decision to make, the grid reduces time spent fiddling with the elements in design. It also makes things z from a development standpoint, as it’s easier to anticipate values instead of having to discuss or measure for each element or margin.
  • High fidelity mockups
    Elements sized according to the grid will guarantee the highest fidelity rendering of graphics and type, given that they will have pixel perfect dimensions.
  • Aligning Nets Design with industry standards
    In Google Material design, created with mobile, tablet, and desktop in mind, all components rigorously align to an 8dp square baseline grid and all typography aligns to a 4dp baseline grid. While Apple is not rigorous about aligning to an atomic grid, but most elements are sized to fit on a 4px grid. Importantly, outer margins in native apps are always a multiple of 4px.
Nets grid image
8pt grid example from the Material Design Guidelines
Nets grid image
Keylines and margins example from the Material Design Guidelines

Examples

Find below a couple of breakdowns on of how we used the baseline grid in building the Nets UI components created for the Digital Guidelines.

  • Nets grid image
  • Nets grid image
    Table template based on a 8pt grid, as suggested in our Nets UI Guidelines.
  • Nets grid image
    Card template based on a 8pt grid, as suggested in our Nets UI Guidelines.

More information

Find out more about using a baseline grid in digital products via the following references: