<section class="section docs-section" id="typography">
                  <h2 class="section-title">Typography</h2>
                  <p class="docs-section-description">Базовая типографика задаёт размеры заголовков, текстовые состояния и моноширинный код. Используй семантические теги, а служебные классы добавляй для вариаций текста.</p>
                  <div class="block">
                    <h1>Heading H1</h1>
                    <h2>Heading H2</h2>
                    <h3>Heading H3</h3>
                    <h4>Heading H4</h4>
                    <h5>Heading H5</h5>
                    <h6>Heading H6</h6>
                  </div>
                  <div class="block">
                    <span class="eyebrow">System label</span>
                    <p class="text-lead">Lead text выделяет вводный абзац, описание страницы или важный контекст перед набором действий.</p>
                    <p class="text-primary">Основной текст интерфейса. Используется для контента.</p>
                    <p class="text-secondary">Вторичный текст, комментарии, подписи.</p>
                    <p class="text-muted">Приглушённый текст, подсказки.</p>
                    <p class="caption">Caption text для технических подписей, footnote и compact metadata.</p>
                  </div>
                  <div class="block">
                    <p>Состояния текста: <span class="text-success">success</span>, <span class="text-warning">warning</span>, <span class="text-danger">danger</span>, <span class="text-info">info</span>.</p>
                    <p>Inline code <code class="code">npm run build</code> и keyboard hint <span class="kbd">esc</span>.</p>
                  </div>
                  <div class="block">
                    <blockquote class="quote">Интерфейс должен оставаться читаемым даже в плотных технических сценариях.<cite>GNexus UI Kit</cite></blockquote>
                  </div>
                
<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Typography 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;h1 class="contrast"&gt;Dashboard&lt;/h1&gt;
&lt;span class="eyebrow"&gt;System label&lt;/span&gt;
&lt;p class="text-lead"&gt;Вводный текст страницы.&lt;/p&gt;
&lt;p class="text-primary"&gt;Основной текст интерфейса.&lt;/p&gt;
&lt;p class="text-muted"&gt;Приглушённая подсказка.&lt;/p&gt;
&lt;code class="code"&gt;npm run build&lt;/code&gt;
&lt;span class="kbd"&gt;esc&lt;/span&gt;</code></pre>
	</div>
</section>