npm - codymaster - Versions diffs - 4.1.4 → 4.4.1 - Mend

codymaster 4.1.4 → 4.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (662) hide show

package/skills/cm-ux-master/output/haravan/design-system-v3.html ADDED Viewed

@@ -0,0 +1,1770 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Haravan Dashboard — Design System</title>
+    <style>
+        :root {
+            --doc-primary: #2463EB;
+            --doc-bg: #FAFBFC;
+            --doc-surface: #FFFFFF;
+            --doc-text: #111827;
+            --doc-text-secondary: #6B7280;
+            --doc-border: #E5E7EB;
+            --doc-code-bg: #F3F4F6;
+            --doc-radius: 12px;
+            --doc-shadow: 0 1px 3px rgba(0,0,0,0.08);
+        }
+        [data-theme="dark"] {
+            --doc-bg: #0F172A;
+            --doc-surface: #1E293B;
+            --doc-text: #F1F5F9;
+            --doc-text-secondary: #94A3B8;
+            --doc-border: #334155;
+            --doc-code-bg: #1E293B;
+            --doc-shadow: 0 1px 3px rgba(0,0,0,0.3);
+        }
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body {
+            font-family: -apple-system, system-ui, 'Segoe UI', Roboto, 'Inter', sans-serif;
+            background: var(--doc-bg);
+            color: var(--doc-text);
+            line-height: 1.6;
+            transition: background 0.3s, color 0.3s;
+        }
+        .header {
+            position: sticky;
+            top: 0;
+            z-index: 100;
+            background: var(--doc-surface);
+            border-bottom: 1px solid var(--doc-border);
+            backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
+        }
+        .header-inner {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 16px 24px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+        .header-left {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+        .header-title {
+            font-size: 20px;
+            font-weight: 700;
+        }
+        .header-badge {
+            background: var(--doc-primary);
+            color: #fff;
+            font-size: 11px;
+            font-weight: 600;
+            padding: 2px 8px;
+            border-radius: 100px;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+        .theme-toggle {
+            background: var(--doc-code-bg);
+            border: 1px solid var(--doc-border);
+            border-radius: 8px;
+            padding: 8px 12px;
+            cursor: pointer;
+            font-size: 16px;
+            transition: all 0.2s;
+        }
+        .theme-toggle:hover {
+            border-color: var(--doc-primary);
+        }
+        .main {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 32px 24px;
+        }
+        .section {
+            margin-bottom: 48px;
+        }
+        .section-title {
+            font-size: 24px;
+            font-weight: 700;
+            margin-bottom: 20px;
+            padding-bottom: 8px;
+            border-bottom: 2px solid var(--doc-border);
+        }
+        .subsection-title {
+            font-size: 16px;
+            font-weight: 600;
+            margin: 16px 0 12px;
+            color: var(--doc-text-secondary);
+        }
+        /* Intro Grid */
+        .intro-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            gap: 12px;
+        }
+        .intro-card {
+            background: var(--doc-surface);
+            border: 1px solid var(--doc-border);
+            border-radius: var(--doc-radius);
+            padding: 16px;
+            box-shadow: var(--doc-shadow);
+        }
+        .intro-label {
+            font-size: 12px;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            color: var(--doc-text-secondary);
+            margin-bottom: 4px;
+        }
+        .intro-value {
+            font-size: 15px;
+            font-weight: 500;
+            word-break: break-all;
+        }
+        .intro-value a {
+            color: var(--doc-primary);
+            text-decoration: none;
+        }
+        /* Color Swatches */
+        .swatch-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+            gap: 12px;
+        }
+        .swatch {
+            background: var(--doc-surface);
+            border: 1px solid var(--doc-border);
+            border-radius: var(--doc-radius);
+            overflow: hidden;
+            cursor: pointer;
+            transition: transform 0.15s, box-shadow 0.15s;
+        }
+        .swatch:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+        }
+        .swatch-color {
+            height: 72px;
+            width: 100%;
+        }
+        .swatch-info {
+            padding: 10px 12px;
+        }
+        .swatch-name {
+            font-size: 13px;
+            font-weight: 600;
+            margin-bottom: 2px;
+        }
+        .swatch-value {
+            font-size: 11px;
+            color: var(--doc-text-secondary);
+        }
+        /* Typography */
+        .type-specimens {
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+        }
+        .type-specimen {
+            background: var(--doc-surface);
+            border: 1px solid var(--doc-border);
+            border-radius: var(--doc-radius);
+            padding: 20px;
+        }
+        .type-label {
+            font-size: 12px;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            color: var(--doc-text-secondary);
+            margin-bottom: 8px;
+        }
+        .type-sample {
+            font-size: 32px;
+            font-weight: 600;
+            margin-bottom: 8px;
+        }
+        .type-heading-sample {
+            font-size: 28px;
+            font-weight: 700;
+        }
+        .type-body-sample {
+            line-height: 1.6;
+        }
+        .type-muted-sample {
+            color: var(--doc-text-secondary);
+            line-height: 1.6;
+        }
+        /* Geometry */
+        .geo-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            gap: 12px;
+        }
+        .geo-item {
+            background: var(--doc-surface);
+            border: 1px solid var(--doc-border);
+            border-radius: var(--doc-radius);
+            padding: 16px;
+            display: flex;
+            align-items: center;
+            gap: 16px;
+        }
+        .geo-preview {
+            width: 48px;
+            height: 48px;
+            background: var(--doc-primary);
+            flex-shrink: 0;
+        }
+        .geo-shadow {
+            background: var(--doc-surface);
+            border-radius: 8px;
+        }
+        .geo-label {
+            font-size: 13px;
+            font-weight: 600;
+            margin-bottom: 2px;
+        }
+        .geo-info code {
+            font-size: 11px;
+            color: var(--doc-text-secondary);
+        }
+        /* Components */
+        .component-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+            gap: 16px;
+        }
+        .component-card {
+            background: var(--doc-surface);
+            border: 1px solid var(--doc-border);
+            border-radius: var(--doc-radius);
+            padding: 20px;
+        }
+        .component-card h4 {
+            font-size: 14px;
+            font-weight: 600;
+            margin-bottom: 12px;
+            color: var(--doc-text-secondary);
+        }
+        .component-row {
+            display: flex;
+            gap: 8px;
+            flex-wrap: wrap;
+        }
+        .comp-btn {
+            padding: 8px 16px;
+            border: none;
+            font-size: 14px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: opacity 0.2s;
+        }
+        .comp-btn:hover { opacity: 0.9; }
+        .comp-card-preview {
+            padding: 16px;
+        }
+        .comp-card-title {
+            font-size: 16px;
+            font-weight: 600;
+            margin-bottom: 8px;
+        }
+        .comp-card-body {
+            font-size: 14px;
+            line-height: 1.5;
+        }
+        .comp-input {
+            width: 100%;
+            padding: 10px 12px;
+            font-size: 14px;
+            background: var(--doc-bg);
+            outline: none;
+            transition: border-color 0.2s;
+        }
+        .comp-input:focus {
+            border-color: var(--doc-primary) !important;
+        }
+        .comp-tag {
+            display: inline-block;
+            padding: 4px 10px;
+            font-size: 12px;
+            font-weight: 500;
+        }
+        /* Neutral Scale */
+        .neutral-grid {
+            display: grid;
+            grid-template-columns: repeat(10, 1fr);
+            gap: 4px;
+            border-radius: var(--doc-radius);
+            overflow: hidden;
+        }
+        .neutral-swatch {
+            cursor: pointer;
+            text-align: center;
+            transition: transform 0.15s;
+        }
+        .neutral-swatch:hover { transform: translateY(-2px); }
+        .neutral-color {
+            height: 48px;
+            width: 100%;
+        }
+        .neutral-label {
+            font-size: 11px;
+            font-weight: 600;
+            margin-top: 4px;
+            color: var(--doc-text-secondary);
+        }
+        .neutral-hex {
+            font-size: 9px;
+            color: var(--doc-text-secondary);
+        }
+        /* Spacing Scale */
+        .spacing-scale {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+            background: var(--doc-surface);
+            border: 1px solid var(--doc-border);
+            border-radius: var(--doc-radius);
+            padding: 20px;
+        }
+        .spacing-item {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+        .spacing-value {
+            width: 48px;
+            text-align: right;
+            font-size: 12px;
+            color: var(--doc-text-secondary);
+            flex-shrink: 0;
+        }
+        .spacing-bar {
+            height: 12px;
+            background: var(--doc-primary);
+            border-radius: 4px;
+            opacity: 0.7;
+            transition: opacity 0.2s;
+        }
+        .spacing-bar:hover { opacity: 1; }
+        .spacing-px {
+            font-size: 11px;
+            color: var(--doc-text-secondary);
+        }
+        /* Layout Blueprint */
+        .layout-blueprint {
+            margin-bottom: 20px;
+        }
+        .layout-diagram {
+            display: flex;
+            border: 2px dashed var(--doc-border);
+            border-radius: var(--doc-radius);
+            min-height: 200px;
+            overflow: hidden;
+        }
+        .layout-sidebar {
+            background: rgba(31, 41, 55, 0.9);
+            color: #D1D5DB;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            gap: 4px;
+            border-right: 2px dashed var(--doc-border);
+            flex-shrink: 0;
+        }
+        .layout-main-area {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+        }
+        .layout-header {
+            background: var(--doc-surface);
+            border-bottom: 2px dashed var(--doc-border);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+        }
+        .layout-content {
+            flex: 1;
+            padding: 20px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            gap: 4px;
+            background: var(--doc-bg);
+        }
+        .layout-metric-label {
+            font-size: 12px;
+            font-weight: 600;
+        }
+        .layout-tokens {
+            margin-top: 16px;
+        }
+        /* Token Table */
+        .table-wrapper {
+            overflow-x: auto;
+            border: 1px solid var(--doc-border);
+            border-radius: var(--doc-radius);
+        }
+        .token-table {
+            width: 100%;
+            border-collapse: collapse;
+            font-size: 13px;
+        }
+        .token-table th {
+            background: var(--doc-code-bg);
+            padding: 10px 16px;
+            text-align: left;
+            font-weight: 600;
+            font-size: 12px;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            border-bottom: 1px solid var(--doc-border);
+        }
+        .token-table td {
+            padding: 8px 16px;
+            border-bottom: 1px solid var(--doc-border);
+            vertical-align: middle;
+        }
+        .token-table tr:last-child td {
+            border-bottom: none;
+        }
+        .token-table tr:hover {
+            background: var(--doc-code-bg);
+        }
+        .token-color-preview {
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            border-radius: 4px;
+            vertical-align: middle;
+            margin-right: 8px;
+            border: 1px solid var(--doc-border);
+        }
+        /* Usage */
+        .usage-blocks {
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+        }
+        .usage-block {
+            background: var(--doc-surface);
+            border: 1px solid var(--doc-border);
+            border-radius: var(--doc-radius);
+            padding: 20px;
+        }
+        .usage-block h4 {
+            font-size: 14px;
+            font-weight: 600;
+            margin-bottom: 12px;
+        }
+        .usage-block pre {
+            background: var(--doc-code-bg);
+            border-radius: 8px;
+            padding: 16px;
+            overflow-x: auto;
+            font-size: 13px;
+            line-height: 1.5;
+        }
+        code {
+            font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
+        }
+        /* Footer */
+        .footer {
+            text-align: center;
+            padding: 24px;
+            font-size: 13px;
+            color: var(--doc-text-secondary);
+            border-top: 1px solid var(--doc-border);
+        }
+        /* Toast */
+        .toast {
+            position: fixed;
+            bottom: -60px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: var(--doc-text);
+            color: var(--doc-bg);
+            padding: 10px 20px;
+            border-radius: 8px;
+            font-size: 14px;
+            font-weight: 500;
+            transition: bottom 0.3s;
+            z-index: 999;
+        }
+        .toast.show {
+            bottom: 24px;
+        }
+        /* Responsive */
+        @media (max-width: 640px) {
+            .intro-grid { grid-template-columns: 1fr 1fr; }
+            .swatch-grid { grid-template-columns: repeat(2, 1fr); }
+            .component-grid { grid-template-columns: 1fr; }
+            .geo-grid { grid-template-columns: 1fr; }
+        }
+    </style>
+</head>
+<body>
+    <header class="header">
+        <div class="header-inner">
+            <div class="header-left">
+                <h1 class="header-title">Haravan Dashboard</h1>
+                <span class="header-badge">Design System</span>
+            </div>
+            <button class="theme-toggle" onclick="toggleTheme()" aria-label="Toggle dark mode">
+                <span class="toggle-icon" id="themeIcon">☀️</span>
+            </button>
+        </div>
+    </header>
+    <main class="main">
+        <!-- Section 1: Introduction -->
+        <section class="section" id="introduction">
+            <h2 class="section-title">Introduction</h2>
+            <div class="intro-grid">
+                <div class="intro-card">
+                    <div class="intro-label">Project</div>
+                    <div class="intro-value">Haravan Dashboard</div>
+                </div>
+                <div class="intro-card">
+                    <div class="intro-label">Source</div>
+                    <div class="intro-value"><a href="https://showcase.myharavan.com" target="_blank" rel="noopener">https://showcase.myharavan.com</a></div>
+                </div>
+                <div class="intro-card">
+                    <div class="intro-label">Pages Scanned</div>
+                    <div class="intro-value">3</div>
+                </div>
+                <div class="intro-card">
+                    <div class="intro-label">Tokens Extracted</div>
+                    <div class="intro-value">69</div>
+                </div>
+                <div class="intro-card">
+                    <div class="intro-label">Last Updated</div>
+                    <div class="intro-value">2026-02-25</div>
+                </div>
+            </div>
+        </section>
+        <!-- Section 2: Color Palette -->
+        <section class="section" id="colors">
+            <h2 class="section-title">🎨 Color Palette</h2>
+        <h3 class="subsection-title">Brand Colors</h3>
+        <div class="swatch-grid">
+            <div class="swatch" onclick="copyColor('#2463EB')">
+                <div class="swatch-color" style="background: #2463EB"></div>
+                <div class="swatch-info">
+                    <div class="swatch-name">Primary</div>
+                    <code class="swatch-value">#2463EB</code>
+                </div>
+            </div>
+            <div class="swatch" onclick="copyColor('#1C4FBC')">
+                <div class="swatch-color" style="background: #1C4FBC"></div>
+                <div class="swatch-info">
+                    <div class="swatch-name">Primary Active</div>
+                    <code class="swatch-value">#1C4FBC</code>
+                </div>
+            </div>
+            <div class="swatch" onclick="copyColor('#2059D3')">
+                <div class="swatch-color" style="background: #2059D3"></div>
+                <div class="swatch-info">
+                    <div class="swatch-name">Primary Hover</div>
+                    <code class="swatch-value">#2059D3</code>
+                </div>
+            </div>
+            <div class="swatch" onclick="copyColor('#DEE7FC')">
+                <div class="swatch-color" style="background: #DEE7FC"></div>
+                <div class="swatch-info">
+                    <div class="swatch-name">Primary Light Default</div>
+                    <code class="swatch-value">#DEE7FC</code>
+                </div>
+            </div>
+        </div>
+        <h3 class="subsection-title">Semantic Colors</h3>
+        <div class="swatch-grid">
+            <div class="swatch" onclick="copyColor('#EF4444')">
+                <div class="swatch-color" style="background: #EF4444"></div>
+                <div class="swatch-info">
+                    <div class="swatch-name">Danger</div>
+                    <code class="swatch-value">#EF4444</code>
+                </div>
+            </div>
+            <div class="swatch" onclick="copyColor('#BF3636')">
+                <div class="swatch-color" style="background: #BF3636"></div>
+                <div class="swatch-info">
+                    <div class="swatch-name">Danger Active</div>
+                    <code class="swatch-value">#BF3636</code>
+                </div>
+            </div>
+            <div class="swatch" onclick="copyColor('#D73D3D')">
+                <div class="swatch-color" style="background: #D73D3D"></div>
+                <div class="swatch-info">
+                    <div class="swatch-name">Danger Hover</div>
+                    <code class="swatch-value">#D73D3D</code>
+                </div>
+            </div>
+            <div class="swatch" onclick="copyColor('#10B981')">
+                <div class="swatch-color" style="background: #10B981"></div>
+                <div class="swatch-info">
+                    <div class="swatch-name">Success</div>
+                    <code class="swatch-value">#10B981</code>
+                </div>
+            </div>
+            <div class="swatch" onclick="copyColor('#0C9467')">
+                <div class="swatch-color" style="background: #0C9467"></div>
+                <div class="swatch-info">
+                    <div class="swatch-name">Success Active</div>
+                    <code class="swatch-value">#0C9467</code>
+                </div>
+            </div>
+            <div class="swatch" onclick="copyColor('#0EA674')">
+                <div class="swatch-color" style="background: #0EA674"></div>
+                <div class="swatch-info">
+                    <div class="swatch-name">Success Hover</div>
+                    <code class="swatch-value">#0EA674</code>
+                </div>
+            </div>
+            <div class="swatch" onclick="copyColor('#F59E0B')">
+                <div class="swatch-color" style="background: #F59E0B"></div>
+                <div class="swatch-info">
+                    <div class="swatch-name">Warning</div>
+                    <code class="swatch-value">#F59E0B</code>
+                </div>
+            </div>
+            <div class="swatch" onclick="copyColor('#C47E08')">
+                <div class="swatch-color" style="background: #C47E08"></div>
+                <div class="swatch-info">
+                    <div class="swatch-name">Warning Active</div>
+                    <code class="swatch-value">#C47E08</code>
+                </div>
+            </div>
+            <div class="swatch" onclick="copyColor('#DC8E09')">
+                <div class="swatch-color" style="background: #DC8E09"></div>
+                <div class="swatch-info">
+                    <div class="swatch-name">Warning Hover</div>
+                    <code class="swatch-value">#DC8E09</code>
+                </div>
+            </div>
+        </div>
+        <h3 class="subsection-title">Surface Colors</h3>
+        <div class="swatch-grid">
+            <div class="swatch" onclick="copyColor('#DEE7FC')">
+                <div class="swatch-color" style="background: #DEE7FC"></div>
+                <div class="swatch-info">
+                    <div class="swatch-name">  Semi Border Color</div>
+                    <code class="swatch-value">#DEE7FC</code>
+                </div>
+            </div>
+            <div class="swatch" onclick="copyColor('16px')">
+                <div class="swatch-color" style="background: 16px"></div>
+                <div class="swatch-info">
+                    <div class="swatch-name">  Semi Border Radius Extra Large</div>
+                    <code class="swatch-value">16px</code>
+                </div>
+            </div>
+            <div class="swatch" onclick="copyColor('9999px')">
+                <div class="swatch-color" style="background: 9999px"></div>
+                <div class="swatch-info">
+                    <div class="swatch-name">  Semi Border Radius Full</div>
+                    <code class="swatch-value">9999px</code>
+                </div>
+            </div>
+            <div class="swatch" onclick="copyColor('12px')">
+                <div class="swatch-color" style="background: 12px"></div>
+                <div class="swatch-info">
+                    <div class="swatch-name">  Semi Border Radius Large</div>
+                    <code class="swatch-value">12px</code>
+                </div>
+            </div>
+            <div class="swatch" onclick="copyColor('8px')">
+                <div class="swatch-color" style="background: 8px"></div>
+                <div class="swatch-info">
+                    <div class="swatch-name">  Semi Border Radius Medium</div>
+                    <code class="swatch-value">8px</code>
+                </div>
+            </div>
+            <div class="swatch" onclick="copyColor('4px')">
+                <div class="swatch-color" style="background: 4px"></div>
+                <div class="swatch-info">
+                    <div class="swatch-name">  Semi Border Radius Small</div>
+                    <code class="swatch-value">4px</code>
+                </div>
+            </div>
+            <div class="swatch" onclick="copyColor('1px')">
+                <div class="swatch-color" style="background: 1px"></div>
+                <div class="swatch-info">
+                    <div class="swatch-name">  Semi Border Width</div>
+                    <code class="swatch-value">1px</code>
+                </div>
+            </div>
+            <div class="swatch" onclick="copyColor('#F4F6F8')">
+                <div class="swatch-color" style="background: #F4F6F8"></div>
+                <div class="swatch-info">
+                    <div class="swatch-name">Bg 0</div>
+                    <code class="swatch-value">#F4F6F8</code>
+                </div>
+            </div>
+            <div class="swatch" onclick="copyColor('#FFFFFF')">
+                <div class="swatch-color" style="background: #FFFFFF"></div>
+                <div class="swatch-info">
+                    <div class="swatch-name">Bg 1</div>
+                    <code class="swatch-value">#FFFFFF</code>
+                </div>
+            </div>
+            <div class="swatch" onclick="copyColor('#1F2937')">
+                <div class="swatch-color" style="background: #1F2937"></div>
+                <div class="swatch-info">
+                    <div class="swatch-name">Bg 2</div>
+                    <code class="swatch-value">#1F2937</code>
+                </div>
+            </div>
+            <div class="swatch" onclick="copyColor('#FFFFFF')">
+                <div class="swatch-color" style="background: #FFFFFF"></div>
+                <div class="swatch-info">
+                    <div class="swatch-name">Bg 3</div>
+                    <code class="swatch-value">#FFFFFF</code>
+                </div>
+            </div>
+            <div class="swatch" onclick="copyColor('#DEE7FC')">
+                <div class="swatch-color" style="background: #DEE7FC"></div>
+                <div class="swatch-info">
+                    <div class="swatch-name">Border</div>
+                    <code class="swatch-value">#DEE7FC</code>
+                </div>
+            </div>
+        </div>
+        <h3 class="subsection-title">Text Colors</h3>
+        <div class="swatch-grid">
+            <div class="swatch" onclick="copyColor('#0F172A')">
+                <div class="swatch-color" style="background: #0F172A"></div>
+                <div class="swatch-info">
+                    <div class="swatch-name">Text 0</div>
+                    <code class="swatch-value">#0F172A</code>
+                </div>
+            </div>
+            <div class="swatch" onclick="copyColor('#475569')">
+                <div class="swatch-color" style="background: #475569"></div>
+                <div class="swatch-info">
+                    <div class="swatch-name">Text 1</div>
+                    <code class="swatch-value">#475569</code>
+                </div>
+            </div>
+            <div class="swatch" onclick="copyColor('#94A3B8')">
+                <div class="swatch-color" style="background: #94A3B8"></div>
+                <div class="swatch-info">
+                    <div class="swatch-name">Text 2</div>
+                    <code class="swatch-value">#94A3B8</code>
+                </div>
+            </div>
+        </div>
+        <h3 class="subsection-title">Neutral Scale</h3>
+        <div class="neutral-grid">
+                <div class="neutral-swatch" onclick="copyColor('#fafafa')">
+                    <div class="neutral-color" style="background: #fafafa"></div>
+                    <div class="neutral-label">50</div>
+                    <code class="neutral-hex">#fafafa</code>
+                </div>
+                <div class="neutral-swatch" onclick="copyColor('#f4f4f5')">
+                    <div class="neutral-color" style="background: #f4f4f5"></div>
+                    <div class="neutral-label">100</div>
+                    <code class="neutral-hex">#f4f4f5</code>
+                </div>
+                <div class="neutral-swatch" onclick="copyColor('#e4e4e7')">
+                    <div class="neutral-color" style="background: #e4e4e7"></div>
+                    <div class="neutral-label">200</div>
+                    <code class="neutral-hex">#e4e4e7</code>
+                </div>
+                <div class="neutral-swatch" onclick="copyColor('#d4d4d8')">
+                    <div class="neutral-color" style="background: #d4d4d8"></div>
+                    <div class="neutral-label">300</div>
+                    <code class="neutral-hex">#d4d4d8</code>
+                </div>
+                <div class="neutral-swatch" onclick="copyColor('#a1a1aa')">
+                    <div class="neutral-color" style="background: #a1a1aa"></div>
+                    <div class="neutral-label">400</div>
+                    <code class="neutral-hex">#a1a1aa</code>
+                </div>
+                <div class="neutral-swatch" onclick="copyColor('#71717a')">
+                    <div class="neutral-color" style="background: #71717a"></div>
+                    <div class="neutral-label">500</div>
+                    <code class="neutral-hex">#71717a</code>
+                </div>
+                <div class="neutral-swatch" onclick="copyColor('#52525b')">
+                    <div class="neutral-color" style="background: #52525b"></div>
+                    <div class="neutral-label">600</div>
+                    <code class="neutral-hex">#52525b</code>
+                </div>
+                <div class="neutral-swatch" onclick="copyColor('#3f3f46')">
+                    <div class="neutral-color" style="background: #3f3f46"></div>
+                    <div class="neutral-label">700</div>
+                    <code class="neutral-hex">#3f3f46</code>
+                </div>
+                <div class="neutral-swatch" onclick="copyColor('#27272a')">
+                    <div class="neutral-color" style="background: #27272a"></div>
+                    <div class="neutral-label">800</div>
+                    <code class="neutral-hex">#27272a</code>
+                </div>
+                <div class="neutral-swatch" onclick="copyColor('#18181b')">
+                    <div class="neutral-color" style="background: #18181b"></div>
+                    <div class="neutral-label">900</div>
+                    <code class="neutral-hex">#18181b</code>
+                </div>
+        </div>
+        </section>
+        <!-- Section 3: Typography -->
+        <section class="section" id="typography">
+            <h2 class="section-title">🔤 Typography</h2>
+        <div class="type-specimens">
+            <div class="type-specimen">
+                <div class="type-label">Font Family</div>
+                <div class="type-sample" style="font-family: -apple-system, BlinkMacSystemFont, sans-serif">-apple-system</div>
+                <code>-apple-system, BlinkMacSystemFont, sans-serif</code>
+            </div>
+            <div class="type-specimen">
+                <div class="type-label">Heading</div>
+                <div class="type-heading-sample" style="font-family: -apple-system, BlinkMacSystemFont, sans-serif">The quick brown fox jumps over the lazy dog</div>
+            </div>
+            <div class="type-specimen">
+                <div class="type-label">Body (12px)</div>
+                <div class="type-body-sample" style="font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-size: 12px">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
+                </div>
+            </div>
+            <div class="type-specimen">
+                <div class="type-label">Muted</div>
+                <div class="type-muted-sample" style="font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-size: 12px">
+                    Secondary text, captions, and supplementary information.
+                </div>
+            </div>
+        </div>
+        </section>
+        <!-- Section 4: Spacing -->
+        <section class="section" id="spacing">
+            <h2 class="section-title">📏 Spacing Scale</h2>
+        <div class="spacing-scale">
+            <div class="spacing-item">
+                <code class="spacing-value">4px</code>
+                <div class="spacing-bar" style="width: 4px; min-width: 4px"></div>
+                <span class="spacing-px">4</span>
+            </div>
+            <div class="spacing-item">
+                <code class="spacing-value">8px</code>
+                <div class="spacing-bar" style="width: 8px; min-width: 4px"></div>
+                <span class="spacing-px">8</span>
+            </div>
+            <div class="spacing-item">
+                <code class="spacing-value">12px</code>
+                <div class="spacing-bar" style="width: 12px; min-width: 4px"></div>
+                <span class="spacing-px">12</span>
+            </div>
+            <div class="spacing-item">
+                <code class="spacing-value">16px</code>
+                <div class="spacing-bar" style="width: 16px; min-width: 4px"></div>
+                <span class="spacing-px">16</span>
+            </div>
+            <div class="spacing-item">
+                <code class="spacing-value">20px</code>
+                <div class="spacing-bar" style="width: 20px; min-width: 4px"></div>
+                <span class="spacing-px">20</span>
+            </div>
+            <div class="spacing-item">
+                <code class="spacing-value">24px</code>
+                <div class="spacing-bar" style="width: 24px; min-width: 4px"></div>
+                <span class="spacing-px">24</span>
+            </div>
+            <div class="spacing-item">
+                <code class="spacing-value">32px</code>
+                <div class="spacing-bar" style="width: 32px; min-width: 4px"></div>
+                <span class="spacing-px">32</span>
+            </div>
+            <div class="spacing-item">
+                <code class="spacing-value">48px</code>
+                <div class="spacing-bar" style="width: 48px; min-width: 4px"></div>
+                <span class="spacing-px">48</span>
+            </div>
+        </div>
+        </section>
+        <!-- Section 5: Geometry -->
+        <section class="section" id="geometry">
+            <h2 class="section-title">📐 Geometry</h2>
+        <div class="geo-grid">
+            <div class="geo-item">
+                <div class="geo-preview" style="border-radius: #F3F4F6"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Color Fill 0</div>
+                    <code>#F3F4F6</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview" style="border-radius: #EFF6FF"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Color Fill 1</div>
+                    <code>#EFF6FF</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview" style="border-radius: #FFFFFF"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Color Fill 2</div>
+                    <code>#FFFFFF</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview" style="border-radius: #3B82F6"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Color Info</div>
+                    <code>#3B82F6</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview" style="border-radius: #2563EB"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Color Link</div>
+                    <code>#2563EB</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview" style="border-radius: #F4F4F5"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Color Neutral 100</div>
+                    <code>#F4F4F5</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview" style="border-radius: #E4E4E7"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Color Neutral 200</div>
+                    <code>#E4E4E7</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview" style="border-radius: #D4D4D8"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Color Neutral 300</div>
+                    <code>#D4D4D8</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview" style="border-radius: #A1A1AA"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Color Neutral 400</div>
+                    <code>#A1A1AA</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview" style="border-radius: #FAFAFA"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Color Neutral 50</div>
+                    <code>#FAFAFA</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview" style="border-radius: #71717A"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Color Neutral 500</div>
+                    <code>#71717A</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview" style="border-radius: #52525B"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Color Neutral 600</div>
+                    <code>#52525B</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview" style="border-radius: #3F3F46"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Color Neutral 700</div>
+                    <code>#3F3F46</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview" style="border-radius: #27272A"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Color Neutral 800</div>
+                    <code>#27272A</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview" style="border-radius: #18181B"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Color Neutral 900</div>
+                    <code>#18181B</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview" style="border-radius: 1280px"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Layout Content Max Width</div>
+                    <code>1280px</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview" style="border-radius: 24px"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Layout Content Padding</div>
+                    <code>24px</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview" style="border-radius: 16px"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Layout Grid Gap</div>
+                    <code>16px</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview" style="border-radius: 56px"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Layout Header Height</div>
+                    <code>56px</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview" style="border-radius: 240px"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Layout Sidebar Width</div>
+                    <code>240px</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview" style="border-radius: 24px"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Spacing Extra Loose</div>
+                    <code>24px</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview" style="border-radius: 4px"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Spacing Extra Tight</div>
+                    <code>4px</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview" style="border-radius: 20px"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Spacing Loose</div>
+                    <code>20px</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview" style="border-radius: 12px"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Spacing Medium</div>
+                    <code>12px</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview" style="border-radius: 16px"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Spacing Regular</div>
+                    <code>16px</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview" style="border-radius: 8px"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Spacing Tight</div>
+                    <code>8px</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview geo-shadow" style="box-shadow: 0px 1px 3px rgba(0,0,0,0.1)"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Shadow Elevated</div>
+                    <code>0px 1px 3px rgba(0,0,0,0.1)</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview geo-shadow" style="box-shadow: 0px 10px 15px rgba(0,0,0,0.1)"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Shadow Lg</div>
+                    <code>0px 10px 15px rgba(0,0,0,0.1)</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview geo-shadow" style="box-shadow: 0px 1px 2px rgba(0,0,0,0.05)"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Shadow Sm</div>
+                    <code>0px 1px 2px rgba(0,0,0,0.05)</code>
+                </div>
+            </div>
+        </div>
+        </section>
+        <!-- Section 6: Layout -->
+        <section class="section" id="layout">
+            <h2 class="section-title">📱 Layout Blueprint</h2>
+        <div class="layout-blueprint">
+            <div class="layout-diagram">
+                <div class="layout-sidebar" style="width: 120px">
+                    <div class="layout-metric-label">Sidebar</div>
+                    <code>240px</code>
+                </div>
+                <div class="layout-main-area">
+                    <div class="layout-header" style="height: 40px">
+                        <div class="layout-metric-label">Header</div>
+                        <code>56px</code>
+                    </div>
+                    <div class="layout-content">
+                        <div class="layout-metric-label">Content</div>
+                        <code>max-width: 1280px</code>
+                        <code>padding: 24px</code>
+                        <code>gap: 16px</code>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="layout-tokens">
+            <div class="geo-grid">
+                <div class="geo-item"><div class="geo-info"><div class="geo-label">Sidebar Width</div><code>240px</code></div></div>
+                <div class="geo-item"><div class="geo-info"><div class="geo-label">Header Height</div><code>56px</code></div></div>
+                <div class="geo-item"><div class="geo-info"><div class="geo-label">Content Max Width</div><code>1280px</code></div></div>
+                <div class="geo-item"><div class="geo-info"><div class="geo-label">Content Padding</div><code>24px</code></div></div>
+                <div class="geo-item"><div class="geo-info"><div class="geo-label">Grid Gap</div><code>16px</code></div></div>
+            </div>
+        </div>
+        </section>
+        <!-- Section 7: Components Preview -->
+        <section class="section" id="components">
+            <h2 class="section-title">🧱 Components Preview</h2>
+        <div class="component-grid">
+            <!-- Buttons -->
+            <div class="component-card">
+                <h4>Buttons</h4>
+                <div class="component-row">
+                    <button class="comp-btn comp-btn-primary" style="background:rgb(36, 99, 235); border-radius:8px; color:#fff; padding:8px 16px">Primary</button>
+                    <button class="comp-btn comp-btn-outline" style="border: 1px solid #DEE7FC; border-radius:8px; color:rgb(55, 65, 81); background:rgb(255, 255, 255)">Secondary</button>
+                    <button class="comp-btn comp-btn-danger" style="background:#EF4444; border-radius:8px; color:#fff">Danger</button>
+                </div>
+                <div class="component-row" style="margin-top:8px">
+                    <button class="comp-btn" style="background:#10B981; border-radius:8px; color:#fff; padding:6px 12px; font-size:12px">Small</button>
+                    <button class="comp-btn" style="background:#2463EB; border-radius:8px; color:#fff; padding:8px 16px">Medium</button>
+                    <button class="comp-btn" style="background:#2463EB; border-radius:8px; color:#fff; padding:12px 24px; font-size:16px">Large</button>
+                </div>
+            </div>
+            <!-- Card -->
+            <div class="component-card">
+                <h4>Card</h4>
+                <div class="comp-card-preview" style="background:#FFFFFF; border-radius:12px; box-shadow:0px 1px 3px rgba(0,0,0,0.1); border:1px solid #DEE7FC; padding:20px">
+                    <div class="comp-card-title" style="color:#0F172A">Card Title</div>
+                    <div class="comp-card-body" style="color:#475569">Card content with extracted design tokens applied.</div>
+                </div>
+            </div>
+            <!-- Input + Forms -->
+            <div class="component-card">
+                <h4>Form Elements</h4>
+                <input type="text" class="comp-input" placeholder="Text input..." style="border: 1px solid #DEE7FC; border-radius:8px; color:#0F172A; padding:10px 12px; margin-bottom:8px">
+                <div class="component-row">
+                    <select style="border:1px solid #DEE7FC; border-radius:8px; padding:10px 12px; background:#FFFFFF; color:#0F172A; font-size:14px; flex:1">
+                        <option>Select option</option>
+                    </select>
+                </div>
+            </div>
+            <!-- Table -->
+            <div class="component-card" style="grid-column: span 2">
+                <h4>Table</h4>
+                <div style="overflow-x:auto; border:1px solid #DEE7FC; border-radius:8px">
+                    <table style="width:100%; border-collapse:collapse; font-size:14px">
+                        <thead>
+                            <tr style="background:rgb(249, 250, 251)">
+                                <th style="padding:12px 16px; text-align:left; font-weight:600; font-size:12px; color:#475569; border-bottom:1px solid #DEE7FC">Name</th>
+                                <th style="padding:12px 16px; text-align:left; font-weight:600; font-size:12px; color:#475569; border-bottom:1px solid #DEE7FC">Status</th>
+                                <th style="padding:12px 16px; text-align:left; font-weight:600; font-size:12px; color:#475569; border-bottom:1px solid #DEE7FC">Amount</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr style="border-bottom:1px solid #DEE7FC">
+                                <td style="padding:12px 16px; color:#0F172A">Order #1024</td>
+                                <td style="padding:12px 16px"><span class="comp-tag" style="background:#10B98120; color:#10B981; border-radius:6px">Completed</span></td>
+                                <td style="padding:12px 16px; color:#0F172A">$1,250.00</td>
+                            </tr>
+                            <tr style="border-bottom:1px solid #DEE7FC">
+                                <td style="padding:12px 16px; color:#0F172A">Order #1025</td>
+                                <td style="padding:12px 16px"><span class="comp-tag" style="background:#F59E0B20; color:#F59E0B; border-radius:6px">Pending</span></td>
+                                <td style="padding:12px 16px; color:#0F172A">$430.50</td>
+                            </tr>
+                            <tr>
+                                <td style="padding:12px 16px; color:#0F172A">Order #1026</td>
+                                <td style="padding:12px 16px"><span class="comp-tag" style="background:#EF444420; color:#EF4444; border-radius:6px">Cancelled</span></td>
+                                <td style="padding:12px 16px; color:#0F172A">$89.00</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+            <!-- Tags -->
+            <div class="component-card">
+                <h4>Tags / Badges</h4>
+                <div class="component-row">
+                    <span class="comp-tag" style="background:#2463EB20; color:#2463EB; border-radius:8px">Primary</span>
+                    <span class="comp-tag" style="background:#10B98120; color:#10B981; border-radius:8px">Success</span>
+                    <span class="comp-tag" style="background:#F59E0B20; color:#F59E0B; border-radius:8px">Warning</span>
+                    <span class="comp-tag" style="background:#EF444420; color:#EF4444; border-radius:8px">Danger</span>
+                    <span class="comp-tag" style="background:#3B82F620; color:#3B82F6; border-radius:8px">Info</span>
+                </div>
+            </div>
+            <!-- Nav Items -->
+            <div class="component-card">
+                <h4>Navigation</h4>
+                <div style="background:#1F2937; border-radius:12px; padding:12px">
+                    <div style="padding:8px 12px; color:rgba(255,255,255,0.5); font-size:14px; border-radius:8px; cursor:pointer; margin-bottom:4px">📊 Dashboard</div>
+                    <div style="padding:8px 12px; color:#fff; background:rgba(255,255,255,0.1); font-size:14px; border-radius:8px; cursor:pointer; margin-bottom:4px">📦 Orders</div>
+                    <div style="padding:8px 12px; color:rgba(255,255,255,0.5); font-size:14px; border-radius:8px; cursor:pointer; margin-bottom:4px">⚙️ Settings</div>
+                    <div style="padding:8px 12px; color:rgba(255,255,255,0.5); font-size:14px; border-radius:8px; cursor:pointer">📈 Reports</div>
+                </div>
+            </div>
+        </div>
+        </section>
+        <!-- Section 8: Token Reference -->
+        <section class="section" id="tokens">
+            <h2 class="section-title">📋 Token Reference</h2>
+        <div class="table-wrapper">
+            <table class="token-table">
+                <thead>
+                    <tr>
+                        <th>Variable</th>
+                        <th>Value</th>
+                        <th>Category</th>
+                    </tr>
+                </thead>
+                <tbody>
+                <tr>
+                    <td><code>--semi-border-color</code></td>
+                    <td><span class="token-color-preview" style="background:#DEE7FC"></span> #DEE7FC</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-border-radius-extra-large</code></td>
+                    <td><span class="token-color-preview" style="background:16px"></span> 16px</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-border-radius-full</code></td>
+                    <td><span class="token-color-preview" style="background:9999px"></span> 9999px</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-border-radius-large</code></td>
+                    <td><span class="token-color-preview" style="background:12px"></span> 12px</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-border-radius-medium</code></td>
+                    <td><span class="token-color-preview" style="background:8px"></span> 8px</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-border-radius-small</code></td>
+                    <td><span class="token-color-preview" style="background:4px"></span> 4px</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-border-width</code></td>
+                    <td><span class="token-color-preview" style="background:1px"></span> 1px</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-bg-0</code></td>
+                    <td><span class="token-color-preview" style="background:#F4F6F8"></span> #F4F6F8</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-bg-1</code></td>
+                    <td><span class="token-color-preview" style="background:#FFFFFF"></span> #FFFFFF</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-bg-2</code></td>
+                    <td><span class="token-color-preview" style="background:#1F2937"></span> #1F2937</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-bg-3</code></td>
+                    <td><span class="token-color-preview" style="background:#FFFFFF"></span> #FFFFFF</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-border</code></td>
+                    <td><span class="token-color-preview" style="background:#DEE7FC"></span> #DEE7FC</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-danger</code></td>
+                    <td><span class="token-color-preview" style="background:#EF4444"></span> #EF4444</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-danger-active</code></td>
+                    <td><span class="token-color-preview" style="background:#BF3636"></span> #BF3636</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-danger-hover</code></td>
+                    <td><span class="token-color-preview" style="background:#D73D3D"></span> #D73D3D</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-fill-0</code></td>
+                    <td><span class="token-color-preview" style="background:#F3F4F6"></span> #F3F4F6</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-fill-1</code></td>
+                    <td><span class="token-color-preview" style="background:#EFF6FF"></span> #EFF6FF</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-fill-2</code></td>
+                    <td><span class="token-color-preview" style="background:#FFFFFF"></span> #FFFFFF</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-info</code></td>
+                    <td><span class="token-color-preview" style="background:#3B82F6"></span> #3B82F6</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-link</code></td>
+                    <td><span class="token-color-preview" style="background:#2563EB"></span> #2563EB</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-neutral-100</code></td>
+                    <td><span class="token-color-preview" style="background:#F4F4F5"></span> #F4F4F5</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-neutral-200</code></td>
+                    <td><span class="token-color-preview" style="background:#E4E4E7"></span> #E4E4E7</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-neutral-300</code></td>
+                    <td><span class="token-color-preview" style="background:#D4D4D8"></span> #D4D4D8</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-neutral-400</code></td>
+                    <td><span class="token-color-preview" style="background:#A1A1AA"></span> #A1A1AA</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-neutral-50</code></td>
+                    <td><span class="token-color-preview" style="background:#FAFAFA"></span> #FAFAFA</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-neutral-500</code></td>
+                    <td><span class="token-color-preview" style="background:#71717A"></span> #71717A</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-neutral-600</code></td>
+                    <td><span class="token-color-preview" style="background:#52525B"></span> #52525B</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-neutral-700</code></td>
+                    <td><span class="token-color-preview" style="background:#3F3F46"></span> #3F3F46</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-neutral-800</code></td>
+                    <td><span class="token-color-preview" style="background:#27272A"></span> #27272A</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-neutral-900</code></td>
+                    <td><span class="token-color-preview" style="background:#18181B"></span> #18181B</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-primary</code></td>
+                    <td><span class="token-color-preview" style="background:#2463EB"></span> #2463EB</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-primary-active</code></td>
+                    <td><span class="token-color-preview" style="background:#1C4FBC"></span> #1C4FBC</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-primary-hover</code></td>
+                    <td><span class="token-color-preview" style="background:#2059D3"></span> #2059D3</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-primary-light-default</code></td>
+                    <td><span class="token-color-preview" style="background:#DEE7FC"></span> #DEE7FC</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-success</code></td>
+                    <td><span class="token-color-preview" style="background:#10B981"></span> #10B981</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-success-active</code></td>
+                    <td><span class="token-color-preview" style="background:#0C9467"></span> #0C9467</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-success-hover</code></td>
+                    <td><span class="token-color-preview" style="background:#0EA674"></span> #0EA674</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-text-0</code></td>
+                    <td><span class="token-color-preview" style="background:#0F172A"></span> #0F172A</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-text-1</code></td>
+                    <td><span class="token-color-preview" style="background:#475569"></span> #475569</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-text-2</code></td>
+                    <td><span class="token-color-preview" style="background:#94A3B8"></span> #94A3B8</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-warning</code></td>
+                    <td><span class="token-color-preview" style="background:#F59E0B"></span> #F59E0B</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-warning-active</code></td>
+                    <td><span class="token-color-preview" style="background:#C47E08"></span> #C47E08</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-warning-hover</code></td>
+                    <td><span class="token-color-preview" style="background:#DC8E09"></span> #DC8E09</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-font-family-heading</code></td>
+                    <td> -apple-system, BlinkMacSystemFont, sans-serif</td>
+                    <td>Typography</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-font-family-regular</code></td>
+                    <td> -apple-system, BlinkMacSystemFont, sans-serif</td>
+                    <td>Typography</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-font-size-extra-small</code></td>
+                    <td> 11px</td>
+                    <td>Typography</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-font-size-header-4</code></td>
+                    <td> 24px</td>
+                    <td>Typography</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-font-size-header-5</code></td>
+                    <td> 20px</td>
+                    <td>Typography</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-font-size-large</code></td>
+                    <td> 16px</td>
+                    <td>Typography</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-font-size-regular</code></td>
+                    <td> 14px</td>
+                    <td>Typography</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-font-size-small</code></td>
+                    <td> 12px</td>
+                    <td>Typography</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-font-weight-bold</code></td>
+                    <td> 700</td>
+                    <td>Typography</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-font-weight-medium</code></td>
+                    <td> 500</td>
+                    <td>Typography</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-font-weight-regular</code></td>
+                    <td> 400</td>
+                    <td>Typography</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-font-weight-semibold</code></td>
+                    <td> 600</td>
+                    <td>Typography</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-layout-content-max-width</code></td>
+                    <td> 1280px</td>
+                    <td>Other</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-layout-content-padding</code></td>
+                    <td> 24px</td>
+                    <td>Other</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-layout-grid-gap</code></td>
+                    <td> 16px</td>
+                    <td>Other</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-layout-header-height</code></td>
+                    <td> 56px</td>
+                    <td>Other</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-layout-sidebar-width</code></td>
+                    <td> 240px</td>
+                    <td>Other</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-shadow-elevated</code></td>
+                    <td> 0px 1px 3px rgba(0,0,0,0.1)</td>
+                    <td>Shadow</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-shadow-lg</code></td>
+                    <td> 0px 10px 15px rgba(0,0,0,0.1)</td>
+                    <td>Shadow</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-shadow-sm</code></td>
+                    <td> 0px 1px 2px rgba(0,0,0,0.05)</td>
+                    <td>Shadow</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-spacing-extra-loose</code></td>
+                    <td> 24px</td>
+                    <td>Other</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-spacing-extra-tight</code></td>
+                    <td> 4px</td>
+                    <td>Other</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-spacing-loose</code></td>
+                    <td> 20px</td>
+                    <td>Other</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-spacing-medium</code></td>
+                    <td> 12px</td>
+                    <td>Other</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-spacing-regular</code></td>
+                    <td> 16px</td>
+                    <td>Other</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-spacing-tight</code></td>
+                    <td> 8px</td>
+                    <td>Other</td>
+                </tr>
+                </tbody>
+            </table>
+        </div>
+        </section>
+        <!-- Section 9: Usage -->
+        <section class="section" id="usage">
+            <h2 class="section-title">⚙️ Usage</h2>
+        <div class="usage-blocks">
+            <div class="usage-block">
+                <h4>1. CSS Import</h4>
+                <pre><code>/* Import the theme override in your main CSS/entry */
+@import './semi-theme-override.css';
+/* Or in HTML */
+&lt;link rel="stylesheet" href="semi-theme-override.css"&gt;</code></pre>
+            </div>
+            <div class="usage-block">
+                <h4>2. React Setup (Semi Design)</h4>
+                <pre><code>// Install Semi UI
+npm install @douyinfe/semi-ui
+// Import theme override AFTER Semi default styles
+import '@douyinfe/semi-ui/dist/css/semi.min.css';
+import './semi-theme-override.css';</code></pre>
+            </div>
+            <div class="usage-block">
+                <h4>3. Figma Tokens</h4>
+                <pre><code>// Import figma-tokens.json into Tokens Studio plugin
+// File → Import → Select figma-tokens.json
+// Apply Haravan Dashboard theme set</code></pre>
+            </div>
+        </div>
+        </section>
+    </main>
+    <footer class="footer">
+        <p>Generated by <strong>UX Master — Semi-Sync Harvester</strong></p>
+    </footer>
+    <div class="toast" id="toast">Copied!</div>
+    <script>
+        function toggleTheme() {
+            const html = document.documentElement;
+            const current = html.getAttribute('data-theme');
+            const next = current === 'dark' ? 'light' : 'dark';
+            html.setAttribute('data-theme', next);
+            document.getElementById('themeIcon').textContent = next === 'dark' ? '🌙' : '☀️';
+            localStorage.setItem('theme', next);
+        }
+        function copyColor(value) {
+            navigator.clipboard.writeText(value).then(() => {
+                const toast = document.getElementById('toast');
+                toast.textContent = 'Copied: ' + value;
+                toast.classList.add('show');
+                setTimeout(() => toast.classList.remove('show'), 2000);
+            });
+        }
+        // Restore saved theme
+        (function() {
+            const saved = localStorage.getItem('theme');
+            if (saved) {
+                document.documentElement.setAttribute('data-theme', saved);
+                document.getElementById('themeIcon').textContent = saved === 'dark' ? '🌙' : '☀️';
+            }
+        })();
+    </script>
+</body>
+</html>