Space
Consistent spacing improves usability, accessibility, and aesthetics by preventing crowding and making elements and text easy to interact with. It guides users’ attention, allowing them to take breaks and easily digest information.
Overview
This library provides clear concepts and code variables for applying and maintaining space within and between components, ensuring consistency across all USAC products.
Space Tokens
Establishing a spacing scale ensures visual consistency and rhythm in our products. Indigo space tokens, built on a base unit of 8 px, can be applied inside and between components using margin and padding properties.
| TOKEN | REM | PIXELS | EXAMPLE |
|---|---|---|---|
$indi-space-default | 1rem | 16px | |
$indi-space-xxs | 0.125rem | 2px | |
$indi-space-xs | 0.25rem | 4px | |
$indi-space-s | 0.5rem | 8px | |
$indi-space-m | 1rem | 16px | |
$indi-space-l | 1.5rem | 24px | |
$indi-space-xl | 2rem | 32px | |
$indi-space-xxl | 3rem | 48px | |
$indi-space-xxxl | 4rem | 64px |
Layout Guidelines
The way objects are grouped impacts visual hierarchy by influencing how users perceive and navigate information on a page. Using space tokens and the grid component to control page spacing and layout, group objects according to their relative importance and similarity. For example, include more white space around larger, more important objects such as top-level headings to help attract users’ attention and group subheadings together with body text.
If a group contains many elements, use containers such as the fieldset component in addition to white space to establish relationships between objects. Positioning objects close together suggests that they are interconnected.
