                        <div class="page-header">
                            <div>
                                <h1>Typography</h1>
                                <p class="subtitle">Inter type scale — display, headings h1–h6, body text, lists, blockquote, and code patterns.</p>
                            </div>
                        </div>

                        <h5 class="section-eyebrow" style="margin-bottom: 8px;">HEADING SCALE</h5>
                        <section class="m-card">
                            <header class="m-card__header"><div><h2 class="m-card__title">Inter, weight 600, tracking -0.01em</h2><p class="m-card__subtitle">Sentence-case throughout. Avoid all-caps headings.</p></div></header>
                            <div style="display:flex;flex-direction:column;gap:14px;">
                                <div><h1 style="margin:0;font-size:32px;font-weight:700;letter-spacing:-0.02em;color:var(--m-text);">Display heading</h1><p style="margin:4px 0 0;color:var(--m-text-faint);font-size:12px;">32px / weight 700 / tracking -0.02em</p></div>
                                <div><h1 style="margin:0;font-size:24px;font-weight:600;letter-spacing:-0.01em;color:var(--m-text);">Heading 1</h1><p style="margin:4px 0 0;color:var(--m-text-faint);font-size:12px;">24px / weight 600</p></div>
                                <div><h2 style="margin:0;font-size:20px;font-weight:600;letter-spacing:-0.005em;color:var(--m-text);">Heading 2</h2><p style="margin:4px 0 0;color:var(--m-text-faint);font-size:12px;">20px / weight 600</p></div>
                                <div><h3 style="margin:0;font-size:18px;font-weight:600;color:var(--m-text);">Heading 3</h3><p style="margin:4px 0 0;color:var(--m-text-faint);font-size:12px;">18px / weight 600</p></div>
                                <div><h4 style="margin:0;font-size:16px;font-weight:600;color:var(--m-text);">Heading 4</h4><p style="margin:4px 0 0;color:var(--m-text-faint);font-size:12px;">16px / weight 600</p></div>
                                <div><h5 style="margin:0;font-size:14px;font-weight:600;color:var(--m-text);">Heading 5</h5><p style="margin:4px 0 0;color:var(--m-text-faint);font-size:12px;">14px / weight 600</p></div>
                                <div><h6 style="margin:0;font-size:13px;font-weight:600;color:var(--m-text);text-transform:uppercase;letter-spacing:0.05em;">Heading 6 (eyebrow)</h6><p style="margin:4px 0 0;color:var(--m-text-faint);font-size:12px;">13px / weight 600 / uppercase / tracking 0.05em</p></div>
                            </div>
                        </section>

                        <h5 class="section-eyebrow" style="margin: 28px 0 8px;">BODY TEXT</h5>
                        <section class="m-card">
                            <header class="m-card__header"><div><h2 class="m-card__title">Paragraphs and inline elements</h2></div></header>
                            <p style="font-size:16px;color:var(--m-text);line-height:1.6;margin:0 0 14px;"><strong style="color:var(--m-text);">Lead paragraph.</strong> Slightly larger than body text — used for the first paragraph of an article or to set context. Inter at 16px / line-height 1.6 reads comfortably on most screens.</p>
                            <p style="margin:0 0 14px;color:var(--m-text);font-size:14px;line-height:1.6;">Default body text at 14px. Inline elements: <strong>bold</strong>, <em>italic</em>, <a href="#" style="color:var(--m-accent);">links</a>, <code style="background:var(--m-surface-2);padding:1px 6px;border-radius:4px;font-size:12px;border:1px solid var(--m-border);">inline code</code>, and <kbd style="background:var(--m-surface-2);border:1px solid var(--m-border);border-radius:4px;padding:1px 6px;font-size:11.5px;">⌘K</kbd> keyboard shortcuts.</p>
                            <p style="margin:0;color:var(--m-text-muted);font-size:13px;line-height:1.5;">Muted text at 13px / muted color &mdash; for secondary information, captions, or supporting content.</p>
                        </section>

                        <h5 class="section-eyebrow" style="margin: 28px 0 8px;">LISTS</h5>
                        <div class="row row-tight">
                            <div class="col-md-6">
                                <section class="m-card">
                                    <h3 style="font-size:13px;font-weight:600;color:var(--m-text-muted);margin:0 0 12px;">Unordered</h3>
                                    <ul style="margin:0;padding-left:20px;color:var(--m-text);font-size:14px;line-height:1.7;">
                                        <li>First item with some explanatory text</li>
                                        <li>Second item also with descriptive copy</li>
                                        <li>Third item, slightly different
                                            <ul style="margin:4px 0 0;padding-left:20px;">
                                                <li>Nested item one</li>
                                                <li>Nested item two</li>
                                            </ul>
                                        </li>
                                        <li>Fourth item</li>
                                    </ul>
                                </section>
                            </div>
                            <div class="col-md-6">
                                <section class="m-card">
                                    <h3 style="font-size:13px;font-weight:600;color:var(--m-text-muted);margin:0 0 12px;">Ordered</h3>
                                    <ol style="margin:0;padding-left:20px;color:var(--m-text);font-size:14px;line-height:1.7;">
                                        <li>Step one — the first action</li>
                                        <li>Step two — followed by the next</li>
                                        <li>Step three — and finally</li>
                                        <li>Step four with a closing note</li>
                                    </ol>
                                </section>
                            </div>
                        </div>

                        <h5 class="section-eyebrow" style="margin: 28px 0 8px;">BLOCKQUOTE</h5>
                        <section class="m-card">
                            <blockquote style="border-left:3px solid var(--m-accent);background:var(--m-accent-soft);padding:14px 18px;margin:0;border-radius:0 8px 8px 0;">
                                <p style="margin:0 0 8px;font-size:14px;color:var(--m-text);line-height:1.6;">&ldquo;Design isn&rsquo;t how it looks &mdash; it&rsquo;s how it works. And then how it looks.&rdquo;</p>
                                <footer style="font-size:12.5px;color:var(--m-text-muted);">— Michelle Moreno, <cite style="font-style:normal;">Product designer</cite></footer>
                            </blockquote>
                        </section>

                        <h5 class="section-eyebrow" style="margin: 28px 0 8px;">CODE BLOCK</h5>
                        <section class="m-card">
                            <pre style="background:#0f172a;color:#e2e8f0;padding:16px 20px;border-radius:10px;overflow-x:auto;margin:0;font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:12.5px;line-height:1.6;"><code>// Toast API — built into the template
toast.success('Saved successfully');
toast.warning('Storage at 82%');
toast.error('Failed to fetch');

// Command palette — open programmatically
window.cmdk.open();</code></pre>
                        </section>

                        <div class="row" style="margin-top: 28px;">
                            <div class="col-md-12">
                                <div class="copyright">
                                    <p>Copyright © 2026 Colorlib. All rights reserved. Template by <a href="https://colorlib.com" rel="nofollow" target="_blank">Colorlib</a>.</p>
                                </div>
                            </div>
                        </div>
