Introduction to the Intuit spatial units

The Intuit spatial units apply to all business units including QuickBooks.

 

Spatial units

Spatial values allow us to create consistent interfaces and a seamless user experience across all our products. These values contribute to a harmonious, coordinated appearance.

Exception XXS/4

Spatial units and excellence in UI design

The power of the design system plays out in the layout, where the grid, typography, and spacing come together to create an easy-to-follow common language. We established a logic and set of rules that are easy to apply by designers, product managers, marketers, developers, and agencies. This systematic approach allows us to deliver greater quality at a higher speed consistently.

Note: Pink and spacing box colors are for spacing reference only and are not part of the system.

You can combine spacing units in multiple ways. Denser screens use more of the smaller units. Marketing pages that can handle larger spaces use more of the 40 and 60 pixel spacings.

Using this systematic spacing approach ensures data aligns better vertically and horizontally on the page. This can calm down dense information pages and make them more legible.

Synchronized sizes help to create relationships between elements. As much as possible, the size of an element relates to the size of other elements. These relationships should be kept simple and easy to follow.

Attention to relationships and spatial values will help us improve our UI experience as our products and pages evolve.

Accessibility pro tip

Make sure interactions are well-separated and easy to hit.

Keep screens feeling “light” – don’t make them overly dense.

See accessibility guidelines

Usage

Use spatial units to position all elements in our design system consistently apart. Spatial units also determine the size of items such as buttons or the height of the global navigation. These units play a crucial role in setting a rhythm within our designs, creating meaningful information hierarchies and balanced interfaces that help users absorb information and see what they can do next.

Configurability

The spatial scale allows for an endless array of combinations in elements and spacing. 
At the same time, the scale establishes structure for spacing elements consistently. The system remains fixed.

For marketing pages we may use more of the large and extra large spacing values to create open pages that are easier to read.

We use smaller spatial units in product screens that contain a lot of information.

Spatial principles

These principals will guide Intuit to make best use of the spatial units

  • Create a good visual rythm with your spacing units
  • Ensure the same spacing is used in similar situations
  • For example, the spacing between a text field and a button is always 20px
  • Margins should be absolutely consistent across the eco system
  • Margin spaces in column grids are 20px
  • Was this Helpful?
  •