Skip to content

Commit

Permalink
Update spacing.mdx
Browse files Browse the repository at this point in the history
Included new feedback
  • Loading branch information
amritadesmet authored and joshwooding committed Feb 5, 2025
1 parent 552ce46 commit f80b24d
Showing 1 changed file with 3 additions and 9 deletions.
12 changes: 3 additions & 9 deletions site/docs/foundations/spacing.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,13 @@ sidebar:
priority: 2
---

Consistent spacing enhances visual appeal and functionality in layouts. Space relates to size and visual consistency through alignment of baselines, gutters, padding, margins etc.

Spacing and padding are used in combination and can be defined as the following:

Spacing: the space **outside** a component, determining how elements are positioned relative to each other.

Padding: the space **inside** a component, controlling the distance between its content and boundary.
Spacing is a powerful tool that determines how elements are positioned relative to each other and emphasizes certain elements while de-emphasizing others. Consistent spacing enhances visual appeal and guides the user's journey through the content. Space relates to size and visual consistency through alignment of baselines, gutters, padding, margins etc.

While Salt provides a general approach to spacing, it isn’t an exhaustive set of guidelines.

## Spacing ramp

The design system uses the same spatial tokens for both spacing and padding. Consistent application of these tokens helps align layouts, establish a uniform visual rhythm, and enhance the overall visual appeal of your application's design.
The design system uses the same spatial tokens for both spacing. Consistent application of these tokens helps align layouts, establish a uniform visual rhythm, and enhance the overall visual appeal of your application's design.

The Salt spacing system is structured around a base unit of `--salt-spacing-100` for each density, with a scale that is proportional across all densities. Every space token within the system is a multiple of `--salt-spacing-100` and percentages of the base unit. This scale ensures consistency and flexibility with predictable values that adjust both upward and downward.

Expand Down Expand Up @@ -71,7 +65,7 @@ To find out more about how to use spacing in headers, please refer to the [forms

## Container padding

A container represents an enclosed area with information, this is typically anything that is in a `div` in code. Padding in containers varies depending on the container size.
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 page](/salt/patterns/header-block) to learn more about container padding in context.

Expand Down

0 comments on commit f80b24d

Please sign in to comment.