Space may be invisible, but the concept is critical to great interface design in the way it creates relationships and enhances visual style.
Spacing methods are more granular than the responsive layout grid. Spacers, as we call them, are a set of specific measures.
Our spacing system is composed of multiples of 16px (1rem).
Spacers available in Malty
Spacers available in Malty
Applying the spacing system
Range of spacers
Range of spacers
The spacers vary from 5xs to 5xl.
Use less space between small components or components that share a close functional relationship. Inside a component, atoms spacing values can go from 2px to 32px.
From all of the spacers, there are four sizes that can only be applied to components - 5xs, 4xs, 3xs and xs.
For different sections in the layout, spacing can go from 16px to 80px.
