Fluid spacing

Espalier spacing tokens use clamp() to grow between minimum and maximum sizes as the viewport widens. Use them for padding, margins, and gaps that should scale with the interface.

Steps and pairs

The seven --esp-size-* steps provide a shared spacing scale. Choose smaller steps for related items, such as a label and input, and larger steps between sections.

Fluid pairs span two steps. For example, --esp-size-tiny-to-small starts at the tiny step's minimum and reaches the small step's maximum. A pair gives a section more room at wider viewports without a separate breakpoint.

The generated formulas depend on the theme. Use token names in application CSS so theme configuration can adjust spacing consistently.

Group content through spacing

Keep headings closer to the text they introduce than to the previous section. Use a smaller gap within a group and a larger gap between groups.

:host {
  padding: var(--esp-size-padding-page);
  display: flex;
  flex-direction: column;
  gap: var(--esp-size-normal);
}

.card {
  padding: var(--esp-size-tiny-to-small);
  border-radius: var(--esp-size-border-radius);
}

See the type scale for text sizes and layout for composing these gaps into pages and components.