Space

Guidelines

• Working with space - Space is the distance between two objects in your design. It should be used to complement the purpose of a page by creating hierarchy and making the content clearer and more comprehensible.
• Be harmonious - Use space tokens in a way that is consistent with the rest of the experience. Some spaces are used in specific context, follow the proper documentation to apply space at the right places.
• Create visual groups - The more visual elements are related, the closer they should be to each other.

Tokens

Padding

Padding refers to the space within a block or container from which elements are separated from the edge. Is is refered as inset in Hopper.

Inset

By default, the inset is equal on all four sides.

Inset Squish

Squish inset reduces the top and bottom padding by one increment relative to the declared inset space.

Inset Stretch

Stretch inset increases the top and bottom padding by one increment relative to the declared inset space.

Margin

Margin refers to the traditional meaning of space between elements. It can be used as a margin or gap when in a grid or flex layout. It is refered as stack in Hopper. The last element of a stack should omit this space.

Stack

Stack is the space that separates elements or containers arranged vertically within a column.

Inline

Inline refers to the space that separates inline elements arranged horizontally.