Introduction to the Intuit spatial units
The Intuit spatial units apply to all business units including QuickBooks.
The Intuit spatial units apply to all business units including QuickBooks.
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
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.
Make sure interactions are well-separated and easy to hit.
Keep screens feeling “light” – don’t make them overly dense.
See accessibility guidelinesUse 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.
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.
These principals will guide Intuit to make best use of the spatial units