Size

The organization of space is critical to every great design. Mindful sizing gives your designs a consistent rhythm and constrains decision-making and consistency across teams.

Examples

Check these example screens using our sizing units!

Usage

Applying Spacing

  • Elements with more spacing around them are perceived as more important because they get more focus on the page, while small spacing makes components look stacked and not stand out.
  • You can double the sizes to create bigger spacing than 64px
  • Stay consistent with paddings and sizes across different UI components.
  • Align all the elements to the exact spacing within the components or a page.

 

Sizing usage examples

Below you’ll find some common sizing usage examples:

sizing-example-1
Size
Sizing Units
Size
Design
Something looks broken on this site?

Report it to the Design System team here!

Resources
Support

© 2026 Spark Flare 4.0. Page last updated on Oct 15, 2024, 21:27