<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>
	</div>

	<div class="block">
		<p class="text-primary">
			Основной текст интерфейса. Используется для контента.
		</p>
		<p class="text-secondary">
			Вторичный текст, комментарии, подписи.
		</p>
		<p class="text-muted">
			Приглушённый текст, подсказки.
		</p>
	</div>

	<div class="block">
		<code class="code">
			console.log("IBM Plex Mono");
		</code>
	</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;p class="text-primary"&gt;Основной текст интерфейса.&lt;/p&gt;
&lt;p class="text-muted"&gt;Приглушённая подсказка.&lt;/p&gt;
&lt;code class="code"&gt;console.log("GNexus")&lt;/code&gt;</code></pre>
	</div>
</section>