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	1px	2px	3px	4px
--salt-spacing-50	0.50x	2px	4px	6px	8px
--salt-spacing-75	0.75x	3px	6px	9px	12px
--salt-spacing-100	1.00x	4px	8px	12px	16px
--salt-spacing-150	1.50x	6px	12px	18px	24px
--salt-spacing-200	2.00x	8px	16px	24px	32px
--salt-spacing-250	2.50x	10px	20px	30px	40px
--salt-spacing-300	3.00x	12px	24px	36px	48px
--salt-spacing-350	3.50x	14px	28px	42px	56px
--salt-spacing-400	4.00x	16px	32px	48px	64px

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.

The Division Foundation provides further guidance on the use of separators and their alternatives.

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