Spacing

Spacing tokens define distance, not intent. They are reused for gaps, padding, and margins depending on context. For the full list of spacing token values, see the Tokens page.

The system is built in layers: unit tokens (raw values) → space tokens (semantic aliases) → utility classes (applied in HTML). Always use space tokens or utility classes — never hardcode pixel values.

Space Scale

The space scale provides a visual reference for the spacing tokens used throughout the system.

padding: var(--space-m);
gap: var(--space-xl);
margin-bottom: var(--space-l);

Gap

Gap modifiers control the space between child elements inside a .block. The default gap is var(--space-m).

<div class="block gap-l">
  <div>Item one</div>
  <div>Item two</div>
  <div>Item three</div>
</div>

Padding

Padding utilities apply internal spacing to an element on all sides.

<div class="padding-l">
  <!-- Content with large padding on all sides -->
</div>

Section Spacing

Section spacing controls the vertical rhythm between major page sections. Apply .top-* and .bottom-* classes to <section> elements. These scale responsively between desktop and mobile.

<section class="top-medium bottom-medium">
  <!-- Section content -->
</section>