Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Spacing is an important, and often underestimated, part of the visual design within Inspire. The Spacing serves to
make all distances within the modules look the same.  The different spacings allow for flexible arrangement within the system.

The spacing can be used horizontally and vertically. It refers to padding, margin, but also to distances between the elements, the "spacing scale".

Use the spacing scale when building individual components. It includes small increments needed to create appropriate spatial relationships for detail-level designs.



Spacing Scale



Spacingrempx
$spacer * 000
$spacer * 10.1252
spacing-3xs exampleImage Removed
$spacer * 20.254

spacing-2xs exampleImage Removed

$spacer * 30.3756

spacing-xs exampleImage Removed

$spacer * 40.58

spacing-xs exampleImage Removed

$spacer * 50.7512

spacing-sm exampleImage Removed

$spacer * 6116
Image Removed
$spacer * 71.37522

Image Removed

$spacer * 81.524
Image Removed
$spacer * 91.62526
Image Removed
$spacer * 10232

Image Removed

$spacer * 112.540
Image Removed
$spacer * 12348

Image Removed

$spacer * 13464
Image Removed