Spacing
Spacing provides structural references to help you create components and compose pages.
- Overview
- Guidelines
Spacing is the area between elements and components.
To maintain consistency and coherence of all products’ interfaces, spacing must be implemented according to the variables presented and all component spacing and typography must be performed in even-numbered increments.
Variables
Leverage the provided variables when designing.
This standardized scale is consistently applied and used across all Compose components, ensuring uniformity and coherence while maintaining flexibility to accommodate various user experiences. With a base unit of four pixels, the system enables a scale of supported sizes. Using a four-pixel system minimizes confusion and simplifies implementation.
Deviating from the spacing scales should be avoided whenever possible.
| Token | Px | Rem | Examples |
|---|---|---|---|
| $spacing-1 | 1 | 0.063 |  |
| $spacing-2 | 2 | 0.125 |  |
| $spacing-4 | 4 | 0.25 |  |
| $spacing-8 | 8 | 0.5 |  |
| $spacing-12 | 12 | 0.75 |  |
| $spacing-16 | 16 | 1 |  |
| $spacing-20 | 20 | 1.25 |  |
| $spacing-24 | 24 | 1.5 |  |
| $spacing-32 | 32 | 2 |  |
| $spacing-40 | 40 | 2.5 |  |
| $spacing-48 | 48 | 3 |  |
Compose Spacing
Spacing is seamlessly integrated into designs to meet diverse sets of requirements.
Here are a few examples illustrating how Compose’s spacing is applied across our components and layouts.
Layout Spacing
Use spatial arrangements within layouts to direct attention towards critical
elements and seamlessly guide individuals to the pertinent information they will
need to focus on next.
Pattern Spacing
Maintaining uniform spacing is essential for establishing a recognizable visual flow and ensuring design consistency across products, facilitating swift and effortless navigation for users.
Component Spacing
Within components, smaller spacers are applied to maintain a clear and implicit
connection between each element, while also ensuring their individual visibility.
Applying Spacing
The spacing scale works for margin and padding, affecting vertical and horizontal edges. It replaces usual values for margin and padding. Below you can find the approved ways to use Compose’s spacing tokens:
padding: var(--Spacing-spacing-4);
padding: var(--Spacing-spacing-8);
padding: var(--Spacing-spacing-12);
padding: var(--Spacing-spacing-16);
padding: var(--Spacing-spacing-20);
padding: var(--Spacing-spacing-24);
padding: var(--Spacing-spacing-28);
padding: var(--Spacing-spacing-32);
padding: var(--Spacing-spacing-40);
padding: var(--Spacing-spacing-48);
padding: var(--Spacing-spacing-56);
padding: var(--Spacing-spacing-64);Creating Hierarchy with White Space
White space is essential in design: it directs focus, aids information processing, and prevents the user from feeling overwhelmed. It ensures clarity, avoids crowding, and enhances the perception of the importance of elements. Proper spacing creates visual rhythm and focal points. Moreover, elements with more spacing around them are perceived as more important, while those which are too close may be overlooked, emphasizing the importance of using spacing to create visual rhythm and focal areas.
Proportions
Proportions are used to maintain consistency in the design of diverse components so they don’t become disproportionate to each other.
The following are some examples of how Compose proportions are applied to our components.
Adjust the proportions inside components to a maximum of four spacing levels.
Don’t use spacing values greater than four levels apart, as shown in the example, otherwise it will become disproportionate.
Related
