<section class="section docs-section" id="utilities">
                  <h2 class="section-title">Utilities</h2>
                  <p class="docs-section-description">Utilities дают предсказуемую систему отступов, размеров, раскладки и текстовых правок без создания новых компонентов. Spacing scale используется и в SCSS-переменных, и в utility-классах.</p>
                  <div class="block">
                    <h3 class="block-title">Spacing scale</h3>
                    <div class="table-wrapper">
                      <table class="table table-compact">
                        <caption class="table-caption">Spacing tokens</caption>
                        <thead class="table-head"><tr class="table-row"><th>Token</th><th>Value</th><th>Alias</th><th>Utility examples</th></tr></thead>
                        <tbody class="table-body">
                          <tr class="table-row"><td><code class="code">$space-0</code></td><td>0</td><td>-</td><td><code class="code">m-0</code> <code class="code">p-0</code> <code class="code">g-0</code></td></tr>
                          <tr class="table-row"><td><code class="code">$space-1</code></td><td>5px</td><td><code class="code">$space-xs</code></td><td><code class="code">mt-1</code> <code class="code">px-1</code></td></tr>
                          <tr class="table-row"><td><code class="code">$space-2</code></td><td>8px</td><td><code class="code">$space-sm</code></td><td><code class="code">mb-2</code> <code class="code">g-2</code></td></tr>
                          <tr class="table-row"><td><code class="code">$space-3</code></td><td>12px</td><td>-</td><td><code class="code">p-3</code> <code class="code">gy-3</code></td></tr>
                          <tr class="table-row"><td><code class="code">$space-4</code></td><td>15px</td><td><code class="code">$space-md</code></td><td><code class="code">mx-4</code> <code class="code">gx-4</code></td></tr>
                          <tr class="table-row"><td><code class="code">$space-5</code></td><td>18px</td><td>-</td><td><code class="code">pt-5</code> <code class="code">pb-5</code></td></tr>
                          <tr class="table-row"><td><code class="code">$space-6</code></td><td>22px</td><td><code class="code">$space-lg</code></td><td><code class="code">my-6</code> <code class="code">g-6</code></td></tr>
                          <tr class="table-row"><td><code class="code">$space-8</code></td><td>34px</td><td><code class="code">$space-xl</code></td><td><code class="code">mt-8</code> <code class="code">p-8</code></td></tr>
                          <tr class="table-row"><td><code class="code">$space-10</code></td><td>48px</td><td><code class="code">$space-xxl</code></td><td><code class="code">mb-10</code> <code class="code">py-10</code></td></tr>
                          <tr class="table-row"><td><code class="code">$space-12</code></td><td>80px</td><td>-</td><td><code class="code">mt-12</code> <code class="code">pb-12</code></td></tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                  <div class="block">
                    <h3 class="block-title">Utility groups</h3>
                    <dl class="description-list">
                      <div class="description-list-row"><dt class="description-list-term">Margin</dt><dd class="description-list-value"><code class="code">m-*</code> <code class="code">mt-*</code> <code class="code">mr-*</code> <code class="code">mb-*</code> <code class="code">ml-*</code> <code class="code">mx-*</code> <code class="code">my-*</code></dd></div>
                      <div class="description-list-row"><dt class="description-list-term">Padding</dt><dd class="description-list-value"><code class="code">p-*</code> <code class="code">pt-*</code> <code class="code">pr-*</code> <code class="code">pb-*</code> <code class="code">pl-*</code> <code class="code">px-*</code> <code class="code">py-*</code></dd></div>
                      <div class="description-list-row"><dt class="description-list-term">Gap</dt><dd class="description-list-value"><code class="code">g-*</code> <code class="code">gx-*</code> <code class="code">gy-*</code></dd></div>
                      <div class="description-list-row"><dt class="description-list-term">Layout</dt><dd class="description-list-value"><code class="code">row</code> <code class="code">column</code> <code class="code">f-grid</code> <code class="code">grid</code> <code class="code">grid-2</code> <code class="code">grid-3</code></dd></div>
                      <div class="description-list-row"><dt class="description-list-term">Alignment</dt><dd class="description-list-value"><code class="code">items-center</code> <code class="code">justify-between</code> <code class="code">justify-end</code></dd></div>
                      <div class="description-list-row"><dt class="description-list-term">Text</dt><dd class="description-list-value"><code class="code">fs-sm</code> <code class="code">text-center</code> <code class="code">text-uppercase</code> <code class="code">text-nowrap</code></dd></div>
                    </dl>
                  </div>
                  <div class="block">
                    <h3 class="block-title">Spacing preview</h3>
                    <div class="grid-3 g-4">
                      <div class="alert alert-secondary m-0">g-4</div>
                      <div class="alert alert-primary m-0 p-5">p-5</div>
                      <div class="alert alert-warning m-0 px-6 py-3">px-6 py-3</div>
                    </div>
                  </div>
                
<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Utilities HTML</span>
			<button class="btn-icon btn-icon-sm" type="button" aria-label="Copy"><i class="ph ph-copy"></i></button>
		</div>
		<pre><code class="language-html">&lt;div class="grid-2 g-4 items-center"&gt;
  &lt;div class="p-5"&gt;Panel&lt;/div&gt;
  &lt;div class="px-6 py-3 text-right"&gt;Actions&lt;/div&gt;
&lt;/div&gt;</code></pre>
	</div>
</section>