Spacing
Spacing is a key tool for positioning elements in relation to each other, highlighting some while downplaying others. Consistent spacing boosts visual appeal and guides users through content. It connects size and visual consistency through aligning baselines, gutters, padding, and margins.
While Salt provides a general approach to spacing, it isn’t an exhaustive set of guidelines.
Consistent use of spatial tokens aligns layouts, creates a steady visual rhythm, and enhances your application's design.
The Salt spacing system is built on a base unit of --salt-spacing-100 for each density, with a proportional scale across all densities. Each space token is a multiple of --salt-spacing-100 and percentages of the base unit. This scale ensures consistency and flexibility with values that adjust predictably.
| Token | Formula | High Density (HD) (px) | Medium Density (MD) (px) | Low Density (LD) (px) | Touch Density (TD) (px) |
|---|---|---|---|---|---|
--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 |
--salt-spacing-450 | 4.50x | 18 | 36 | 54 | 72 |
--salt-spacing-500 | 5.00x | 20 | 40 | 60 | 80 |
--salt-spacing-550 | 5.50x | 22 | 44 | 66 | 88 |
--salt-spacing-600 | 6.00x | 24 | 48 | 72 | 96 |
--salt-spacing-650 | 6.50x | 26 | 52 | 78 | 104 |
--salt-spacing-700 | 7.00x | 28 | 56 | 84 | 112 |
--salt-spacing-750 | 7.50x | 30 | 60 | 90 | 120 |
--salt-spacing-800 | 8.00x | 32 | 64 | 96 | 128 |
--salt-spacing-850 | 8.50x | 34 | 68 | 102 | 136 |
--salt-spacing-900 | 9.00x | 36 | 72 | 108 | 144 |
--salt-spacing-950 | 9.50x | 38 | 76 | 114 | 152 |
Fixed spacing offers tokens with values that stay the same across all densities. For instance, --salt-spacing-100 is consistently 1px, and --salt-spacing-200 is 2px, no matter the density. This provides a stable reference for design elements needing uniform spacing, ensuring consistency and simplicity within the design system.
| Token | All densities (px) |
|---|---|
--salt-spacing-fixed-100 | 1 |
--salt-spacing-fixed-200 | 2 |
--salt-spacing-fixed-300 | 3 |
--salt-spacing-fixed-400 | 4 |
--salt-spacing-fixed-500 | 5 |
--salt-spacing-fixed-600 | 6 |
--salt-spacing-fixed-700 | 7 |
--salt-spacing-fixed-800 | 8 |
--salt-spacing-fixed-900 | 9 |
Consider a numerical input with two buttons to its left, allowing users to step through values incrementally. Fixed spacing tokens define the distance between the input and the buttons, as well as the space between the two buttons. These spaces remain constant, ensuring precise control and uniformity. Meanwhile, the space between the numerical input and other components adjusts with density, providing flexibility and adaptability in the design.
Spacing is a key tool for emphasizing certain elements while downplaying others, guiding users through content. We suggests using varied spacing (--salt-spacing-300, --salt-spacing-200, --salt-spacing-100) to establish a visual hierarchy. Consistent vertical separation of items like headings, text blocks, form elements, and cards creates a visual rhythm.
Horizontal dividers help segment layout regions and should be spaced consistently with --salt-spacing-300 above and below sections. For more details on dividers, please refer to the Divider.
Headings act as primary titles for various content types, offering visual separation and hierarchy. They should have standard spacing both above and below. The spacing directly below a heading varies based on the level of focus on the item.
For more information on using spacing in headers, please refer to the Forms pattern.
| 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 |
A container represents an enclosed area with information, this is typically anything that is in a div in code. Padding is the space inside a given area, controlling the distance between its content and boundary. Padding in containers varies depending on the container size.
Please refer to the header block pattern to learn more about container padding in context.
| Container size | Padding size |
|---|---|
| Large | --salt-spacing-300 |
| Medium | --salt-spacing-200 |
| Small | --salt-spacing-100 |
Horizontal spacing between items can vary depending on relationship and context.
| Horizontal spacing | Space between |
|---|---|
| Between buttons | --salt-spacing-100 |
| Between components | --salt-spacing-300 |
Standard spacing between items in a form pattern is typically --salt-spacing-300, which aligns with the design systems responsive layout grid, and automatically will adjust depending on what density you use.
Standard spacing between related items, such as Button in a Button bar, is typically --salt-spacing-100.
We appreciate your thoughts and feedback on any content in the Salt foundations. Please contact us if you have any comments or questions.