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
Company Configuration
Layout guidelines
A layout comprises UI elements, components, and the space between them. Adhering to these guidelines enables users to swiftly grasp the interconnection among elements, facilitating effortless scanning and comprehension of page content. Utilize these guidelines in conjunction with space tokens to craft layouts that are uniform and straightforward to interpret.
Group by similarity
Users anticipate elements to be semantically grouped or organized to provide enhanced context around the presented information.
Consistent spacing around elements offers them a visual coherence that aids in comprehending their semantic association. For instance, maintaining uniform spacing in a table or list of items fosters a cohesive perception of the unit or collection.
Group by proximity
The proximity between elements conveys semantic significance; objects positioned closely are perceived as related.
Leverage this principle to impart meaning by grouping more closely related objects and spacing less related ones further apart. For instance, position elements associated with the same workflow or user action nearer to each other to facilitate user comprehension of their relationship.
Create order and hierarchy
Users prefer organized visual information to ease the process of understanding. Therefore, the arrangement of elements on a page can direct users through a desired path.
Hierarchy ranks elements and influences the order of their viewing. Larger elements draw attention, while smaller ones are less prominent. Adjusting whitespace around elements can group or separate them, affecting their perceived importance.
Case Studies
Building a new Seamless User Experience
Discover the exciting features
