Layout

Containers and spacing tokens are essential tools in Mesa's foundational layout system.

Spacing

Spacing, commonly controlled in code with margin and padding, is the negative area between elements and components. Currently Mesa offers spacing tokens to make implementing spacing in product easier and more consistent.

Mesa's spacing tokens include both small and large increments to support both detail-level and larger scale spatial relationships. Each level of the spacing scale has its own token. Spacing tokens can be used inside of components for building and between components for layout spacing.

 

Applying spacing

The spacing scale can be applied to margin or padding properties, as well as to both vertical and horizontal edges. The token takes the place of the values normally assigned to margin and padding.

 

Containers

Outer and inner container margins ensure that designs maintain a consistent overall layout while still allowing for visual variations within designs.