Spacing

The spacing scale is a fundamental building block of the Resonance design system’s layout. Using a spacing scale helps give all Chorus applications a consistent rhythm and visual balance. The Resonance spacing scale is a nonlinear progression based on the unit of 4px. It is important to be intentional with the use of spacing. The spatial and hierarchical relationship of a page is based on the proper use of this scale.

Using space

• To form strong relationships between smaller pieces of UI, rely on the spacing units on the smaller end of the scale. Less space will help unite and illustrate that they are connected. See Figure A to understand how spacing has been applied to the split button component.
• To distinguish between two distinctly different elements of the interface, use increasingly larger numbers on the scale. Increased space gives breathing room for people to rest in between the different cognitive tasks on a screen. Mid-level numbers are ideal for grouping small components together, while the largest numbers are best for bigger layout components. See Figure B for how spacing outside of the split button component has been applied in the context of other elements.
• Designing with the space scale impacts both the horizontal and vertical axes. Horizontal spacing helps develop the relationship amongst related components while the vertical rhythm helps facilitate the flow of the page.
• Not every piece of space on a page will be able to designed. It is to the designer’s discretion when horizontal or vertical space should take priority. In Figure B, horizontal spacing is important for establishing the relationship between the help icon and the split button, while vertical space is important for anchoring the split button within the navigation container.
• For icons, spacing is applied to the canvas that surrounds icon and not the icon itself.

Recommendations

• The scale is to be used for all instances of spacing and deviations from the scale should be avoided.
• For larger units of measurement that exceed the scale, utilize the grid to break up that space.
• Avoid mathematically adding custom units of spacing in addition to the scale
• The scale should be used both inside and outside of components