Spacing

The organization of space is a key aspect of design. Spatial tokens help align layouts and create consistent visual rhythm.

The spacing system is structured around a base unit (--salt-spacing-100) for each density. This token determines the scale used across the design system.

Every space token within the system is a multiple of --salt-spacing-100. The numerical suffix indicates the percentage of the base unit each token represents. The scale is proportional across all densities.

Token	Formula	High Density (HD)	Medium Density (MD)	Low Density (LD)	Touch Density (TD)
--salt-spacing-25	0.25x	1	2	3	4
--salt-spacing-50	0.50x	2	4	6	8
--salt-spacing-75	0.75x	3	6	9	12
--salt-spacing-100	1.00x	4	8	12	16
--salt-spacing-150	1.50x	6	12	18	24
--salt-spacing-200	2.00x	8	16	24	32
--salt-spacing-250	2.50x	10	20	30	40
--salt-spacing-300	3.00x	12	24	36	48
--salt-spacing-350	3.50x	14	28	42	56
--salt-spacing-400	4.00x	16	32	48	64

*These values are listed in pixels (px).

The vertical separation of items such as headings, blocks of text, form elements and cards should follow a consistent pattern to create visual rhythm throughout a layout.

Headings provide visual separation and help to establish hierarchy. All headings should be accompanied by standard spacing above and below. The amount of spacing should be based on the following:

• Add salt-spacing-200 directly above the heading regardless of the level of heading.
• The spacing placed directly below a heading depends on the level of focus placed on the following item.

When content directly following a header is a primary focus, for instance, the first paragraph of an article, the spacing between the header and the text is relative to the level of the heading. An H1 is followed by --salt-spacing-300, H2 by --salt-spacing-200, and H3 by --salt-spacing-100. For text accompanied by an H4, there is no spacing between the elements. Additionally:

• Spacing after a section is consistently implemented using --salt-spacing-300 regardless of the heading level below.
• Although the following example indicates each section as starting with a heading, this is not always required.

Show spacing

Heading	Space above	Space below
H1	--salt-spacing-200	--salt-spacing-300
H2	--salt-spacing-200	--salt-spacing-200
H3	--salt-spacing-200	--salt-spacing-100
H4	--salt-spacing-200	None

When text following a header is a secondary focus, such as a section description intended as a supporting element to the section's content, spacing is a standard size regardless of the heading level. Keep the following in mind:

• Headings followed by secondary focus text are consistently separated by --salt-spacing-100.
• When a description follows a heading, the spacing is reduced to reinforce the relationship between the heading and description.

Show spacing

Heading	Space above	Space below
H1	--salt-spacing-200	--salt-spacing-100
H2	--salt-spacing-200	--salt-spacing-100
H3	--salt-spacing-200	--salt-spacing-100
H4	--salt-spacing-200	--salt-spacing-100

For content following a heading that is not text, such as an image, form, card or data visualization, the spacing between the elements is treated consistently, as with non-hierarchical spacing. To clarify:

• Anything that is not text is separated from its heading by --salt-spacing-300
• Spacing above the header is maintained consistently at --salt-spacing-200

Show spacing

Maintaining consistent spacing between headings, text, content blocks and sections provides visual rhythm when managing large amounts of content. Note that:

• Visual rhythm is maintained when elements repeat at regular intervals
• Consistency and rhythm help people comprehend and navigate an interface more easily

Show spacing

Horizontal separators are used to divide regions of a layout, sections of content, or groups of components and/or data.

For spacing purposes, separators are considered to be a type of content and therefore spaced consistently. This means that:

• Separators do not come with any pre-defined spacing of their own.
• --salt-spacing-300 should appear above and below a separator between sections.

Show spacing

Only use separators if the content cannot be effectively divided in another way. Too many repeating lines can overload a design and create unnecessary visual noise.

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