Division

Division helps to separate content areas or grouped elements. It provides a sense of visual hierarchy and can improve the scannability of information.

Negative space is the area between design elements. It can also be the space within individual components, such as between an icon and a label within a button.

Negative space should be the first option when dividing regions, blocks of content or elements within a design. It's an elegant visual divider that helps break up an interface without creating visual clutter.

You can find further guidance in the Spacing foundation.

Layering a neutral secondary color on top of a base surface to highlight prominent areas can help to create a sense of visual hierarchy. It should also draw the user's attention and encourage them to focus on the most useful or important content.

You should use secondary backgrounds sparingly in line with the 60-30-10 rule.

Zebra striping data grids

Separators divide regions of a layout, sections of content or groups of related components or data.

We recommend you only use separators if you can't divide content in another way. Too many lines can overload a design and create unnecessary visual noise.

Salt provides three types of separation:

• Primary – separates areas of content that aren't closely related, such as the app header from the app content.
• Secondary – divides related areas, for instance, heading and body text within a content block.
• Tertiary – divides similar items within a group, for example, options within a list, or individual comments in a conversation thread. You should only apply it when subtle division is necessary.

Borders encapsulate pieces of related content and/or components.

Regardless of component size or density, borders remain 1px thick throughout the design system.

We appreciate your thoughts and feedback on any content in the Salt foundations. Please contact us if you have any comments or questions.