Density

Density relates to the amount of content that can fit on a screen based on the size and spacing of components.

When creating a product using the design system, choose a base density as a starting point. All components, spacing, and typographic elements will align and remain proportionate regardless of the density you choose.

There are four densities available to choose from:

• High
• Medium
• Low
• Touch.

High density scales components down to their smallest size and reduces the size between elements to ensure a compact layout.

High density is optimized for data-heavy or complex applications, such as trading platforms. It is optimized for frequent use by experienced power users.

Medium density is the default solution for most use cases. It is ideal for most standard applications or content-rich websites.

Low density is optimized for data or content-light interfaces. It's ideal for marketing, communications, or onboarding experiences. In contrast to 'high density', low density is intended for infrequently used applications by inexperienced users.

Touch density scales components to their largest increment and is intended for mobile or tablet devices only.

Density is intended to be used one density at a time, only changing when part of a responsive layout. When applying density:

• Pick a density and be consistent with it across your application
• Alternatively, set density to align to breakpoints and define which density to use per breakpoint
• If the use case requires it, mix densities, but do it sparingly in order to provide greater emphasis to a single component or small group of components, such as log-in fields.

The Responsiveness foundation includes guidance on recommended breakpoints for each density.

Before mixing densities, consider other ways to establish hierarchy or emphasise certain elements, such as:

• Using typographic hierarchy or weight.
• Mixing primary and secondary background colors.
• Applying greater spacing between elements.
• Scaling components.

If you still need to mix densities, do it sparingly. Although possible, the components within the system are not designed to be mixed. This does not mean they can't be mixed, but they are designed around a specific scaling system that ensures components of the same density align. The components are not designed to 'fit' together across densities.

Mixing the density of components sparingly can help to create emphasis without visual disruption. However, if overused, there may be issues with component alignment and use of spacing tokens.

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