Spacing Helpers

Semantic step helpers for gap, padding, and margin — the most common inline-style escape hatches.

Spacing helpers use a restrained semantic scale:

  • -sm — small step, --space-2 (0.5rem)
  • Default — standard step, --space-4 (1rem)
  • -lg — large step, --space-5 (1.5rem)

All map to logical properties (padding-block, margin-block-end, etc.) for writing-direction safety.

Gap

Override the default gap from layout primitives (.stack, .cluster, .grid):

<ul class="cluster">
  <li><a href="/about" class="btn ghost">About</a></li>
  <li><a href="/contact" class="btn ghost">Contact</a></li>
</ul>
  • .gap-none → gap: 0

Padding

Block (vertical) and inline (horizontal) padding. Values respond to the .sm / .lg modifiers.

Panel content with breathing room above and below. 
<section role="tabpanel" class="py">
  Panel content with breathing room above and below.
</section>
  • .py → padding-block: var(--variant-space)
  • .px → padding-inline: var(--variant-space)

Margin

Block-start and block-end margin for giving elements room:

A section heading with space above

<h2 class="mbs">A section heading with space above</h2>
  • .mbs → margin-block-start: var(--variant-space)
  • .mbe → margin-block-end: var(--variant-space)

No mbs-none / mbe-none — use margin: 0 via .list-reset for lists, or a layout primitive that already resets margins (.stack > *).