Skip to content

Commit

Permalink
Prettier
Browse files Browse the repository at this point in the history
  • Loading branch information
joshwooding committed Feb 5, 2025
1 parent 67ab9bb commit 552ce46
Showing 1 changed file with 4 additions and 7 deletions.
11 changes: 4 additions & 7 deletions site/docs/foundations/spacing.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -7,20 +7,19 @@ sidebar:

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 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.

While Salt provides a general approach to spacing, it isn’t an exhaustive set of guidelines.
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 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.

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.

| Token | Formula | High Density (HD) (px) | Medium Density (MD) (px) | Low Density (LD) (px) | Touch Density (TD) (px) |
| -------------------- | ------- | ---------------------- | ------------------------ | --------------------- | ----------------------- |
Expand Down Expand Up @@ -98,9 +97,7 @@ Standard spacing between items in a form is typically `--salt-spacing-300`, whic
alt="Diagram of what spacing between components should look like."
/>


Standard spacing between related items, such as buttons in a button bar group, is typically `--salt-spacing-100`.

Standard spacing between related items, such as buttons in a button bar group, is typically `--salt-spacing-100`.

<Image
src="/img/foundations/spacing-buttons.png"
Expand Down

0 comments on commit 552ce46

Please sign in to comment.