Sizings
Compose uses standard sizes and spacing created from increments of 8 to create consistency between UI elements, with metric values ranging from 64, 48, 32, 24, 16 and eight for easy reference.
- Overview
- Specs
- Guidelines
Usage
Our sizing scales have been chosen to keep the proportions between icons, images, avatar, banners and graphic elements the same when using them.
Benefits
Integrating sizings as variables in design systems ensures consistency, scalability and maintainability, resulting in cohesive user interfaces. By standardizing measurements like margins, paddings, and element sizes, it promotes uniformity throughout the interface and simplifies adjustments. This approach also facilitates scalability and responsiveness, and streamlines maintenance.
Core sizes
We provide six predetermined sizes in our scale that range that vary from 64, 48, 32, 24, 16, eight for easy reference.
Note that not every asset should be displayed in every size. In this example, we don’t show an an X-small avatar, as its readability would be compromised.
Last Update
- Updated Do’s and Don’t under the Guidelines section.
