<section class="demo-section">
  <h2>Utilities</h2>

  <h3>Spacing scale</h3>
  <div class="demo-row">
    <div class="spacing-block m-0">0</div>
    <div class="spacing-block m-1">4px</div>
    <div class="spacing-block m-2">8px</div>
    <div class="spacing-block m-3">12px</div>
    <div class="spacing-block m-4">16px</div>
    <div class="spacing-block m-5">20px</div>
    <div class="spacing-block m-6">24px</div>
    <div class="spacing-block m-7">32px</div>
    <div class="spacing-block m-8">40px</div>
    <div class="spacing-block m-9">48px</div>
  </div>

  <h3>Display helpers</h3>
  <div class="demo-row">
    <span class="d-inline utility-box">d-inline</span>
    <span class="d-inline-block utility-box">d-inline-block</span>
    <span class="d-block utility-box">d-block</span>
    <span class="d-none utility-box">d-none</span>
    <span class="d-flex utility-box">d-flex</span>
    <span class="d-grid utility-box">d-grid</span>
  </div>

  <h3>Radius tokens</h3>
  <div class="demo-row">
    <div class="radius-box radius-xs"></div>
    <div class="radius-box radius-sm"></div>
    <div class="radius-box radius-md"></div>
    <div class="radius-box radius-lg"></div>
    <div class="radius-box radius-xl"></div>
    <div class="radius-box radius-2xl"></div>
    <div class="radius-box radius-full"></div>
  </div>
</section>