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.

NameValuePreview
--hop-space-inset-xs
0.25rem
--hop-space-inset-sm
0.5rem
--hop-space-inset-md
1rem
--hop-space-inset-lg
1.5rem
--hop-space-inset-xl
2rem

Inset Squish

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

NameValuePreview
--hop-space-inset-squish-sm
0.25rem 0.5rem
--hop-space-inset-squish-md
0.5rem 1rem
--hop-space-inset-squish-lg
1rem 2rem

Inset Stretch

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

NameValuePreview
--hop-space-inset-stretch-sm
1rem 0.5rem
--hop-space-inset-stretch-md
1.5rem 1rem
--hop-space-inset-stretch-lg
3rem 1.5rem

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.

NameValuePreview
--hop-space-stack-xs
0.25rem
--hop-space-stack-sm
0.5rem
--hop-space-stack-md
1rem
--hop-space-stack-lg
1.5rem
--hop-space-stack-xl
2rem

Inline

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

NameValuePreview
--hop-space-inline-xs
0.25rem
--hop-space-inline-sm
0.5rem
--hop-space-inline-md
1rem
--hop-space-inline-lg
1.5rem
--hop-space-inline-xl
2rem