Skip Navigation
React Magma

Design Guidelines

Spacing

Spacing is a powerful visual design tool for creating clearly organized and harmonious interfaces.

Spacing Scale

The React Magma spacing scale is based on the 8px grid system with some more granular increments at the smaller end of the scale for more fine-tuned spacing. Spacing can be applied using margin or padding.

The spacing scale helps us determine how much space to put between or inside of everything you see. This includes large things like the gutters of our page layouts or the padding inside a card component, as well as the tiny space between a label and its corresponding input.

PropertyempxExample
spacing010.1252px
spacing020.254px
spacing030.58px
spacing040.7512px
spacing05116px
spacing061.524px
spacing071.7528px
spacing08232px
spacing092.540px
spacing10348px
spacing113.556px
spacing12464px
spacing13696px
spacing1410160px
Example of using spacing properties to add padding inside a card, as well as the margins between the content within the card.
Example of using spacing properties to create the space between cards in a grid.

Designing with Space

Every part of a UI should be intentional including the empty space between elements. The amount of space between items creates relationships and hierarchy.

Creating Relationships

When elements in a design are close to each other, then they are seen as related. This relationship becomes weaker as the space between them increases.

Using space to arrange related elements into groups can help you create sections on a page without using lines as a divider.

Creating Hierarchy

You can give more importance to elements by increasing the space around them. Elements that are close to each other often get grouped together or are viewed as being equally important to each other. Therefore, if you have an element or content of high importance on the page, consider giving it extra surrounding space to help it attract focus.

White Space

Empty space — also known as white space — is important in design. It can be used to break up sections on a page or to help create focus on certain elements. White space helps with information processing; too much dense information can be disorienting or overwhelming for a user. Sections of a UI are allowed to be dense, but the whole page should not be crowded; there should be white space to let the user’s eye rest.


FAQ

Are spacing increments outside of the scale allowed?
There are always exceptions to the rule, but deviating from the spacing scale should be avoided whenever possible.

Can I still use percentages for spacing?
Percentages like 50% (1/2) or 33% (1/3) are still acceptable ways to divide a page. Percentages can all still be used to control max and min widths. However, using percentages for padding or margin inside of a component or element should be avoided (ex. padding-right: 10%).

Is the spacing scale responsive?
No, the spacing properties themselves do not change values based on the screen size. However, it is acceptable at page breakpoints to jump a step(s) on the spacing scale to fit spacing needs.

Example: At 1440px padding-right: spacing05 but at breakpoint 768px padding-right: spacing03.

Deploys by Netlify