Guidelines
Guidelines
Usage
A Spacing should:
- Be used consistently in layouts for similar elements.
- Be used to establish a harmonious information hierarchy following the Gestalt Principles of Proximity. In general, whitespace breaks up sections reducing cognitive load and aiding information processing.
- Be used to define margins and paddings, not the size of content like text or icons.
- Be used inside components and in laying out groups of components unless they require a fixed height.
- In general, use x-loose and up for outside padding, whereas everything smaller should be used for spaces between elements.
- Be adapted across viewports to conserve layout proportions.