Space

Responsive Space

These Space tokens can be applied to gaps, margins and spacing between elements and components that are allowed to change between our different Size Themes: Small (left) and Large (right). Apply the token once and it automatically adjusts depending on your context.

 

Fixed Space

The Fixed Space tokens remain the same size no matter the Theme (it does not change responsively to different viewports or sizes). This can come in handy for gaps, margins and spacing that need to stay the same throughout the change of viewports. For example the space between an icon and label in the Button.

 

Negative Space

There are times when it’s needed that certain elements overlap others based on our art direction. Like we do with content layered on top of the image in the Hero component.

 

Space vs. Padding

Use Space tokens for margins, gaps and spacing so mostly for space between components and elements. And Padding tokens for (inner) padding within components and elements.