<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="code-example-copy" type="button">Copy</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>