Nuxeo Design Guidelines

Spacing

Updated: June 21, 2021

We have two spacing scales; one for general spacing within components and the other for layout spacing. Both are designed to complement the existing components and typography throughout the system.

Spacing Scale

Use the spacing scale when building individual components. It includes small increments needed to create appropriate spatial relationships for detail-level designs.

rem px Example
0.125 2 2px
0.25 4 4px
0.5 8 8px
0.75 12 12px
1 16 16px
1.5 24 24px
2 32 32px
2.5 40 40px
3 48 48px

Example of the spacing scale applied Example of the spacing scale applied

Layout Scale

Use the layout scale for arranging components and other UI parts into a full-page layout. It has larger increments that are used to control the density of a design. Use the smaller layout spaces to create more dense compositions and direct relationships. Use the larger spaces to increase the amount of white space and to disassociate sections.

rem px Example
1 16 2px
1.5 24 4px
2 32 8px
3 48 12px
4 64 16px
6 96 24px
10 160 32px

Example of the layout scale applied Example of the spacing scale applied

We'd love to hear your thoughts!

All fields required