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

codymaster 4.1.4 → 4.3.0

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 (657) hide show

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

@@ -0,0 +1,1596 @@
+<!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>Fila - Bootstrap 5 Admin Dashboard Template — 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">Fila - Bootstrap 5 Admin Dashboard Template</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">Fila - Bootstrap 5 Admin Dashboard Template</div>
+                </div>
+                <div class="intro-card">
+                    <div class="intro-label">Source</div>
+                    <div class="intro-value"><a href="https://templates.envytheme.com/fila/project-management.html" target="_blank" rel="noopener">https://templates.envytheme.com/fila/project-management.html</a></div>
+                </div>
+                <div class="intro-card">
+                    <div class="intro-label">Pages Scanned</div>
+                    <div class="intro-value">1</div>
+                </div>
+                <div class="intro-card">
+                    <div class="intro-label">Tokens Extracted</div>
+                    <div class="intro-value">65</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">Surface Colors</h3>
+        <div class="swatch-grid">
+            <div class="swatch" onclick="copyColor('50%')">
+                <div class="swatch-color" style="background: 50%"></div>
+                <div class="swatch-info">
+                    <div class="swatch-name">  Semi Border Radius Circle</div>
+                    <code class="swatch-value">50%</code>
+                </div>
+            </div>
+            <div class="swatch" onclick="copyColor('3px')">
+                <div class="swatch-color" style="background: 3px"></div>
+                <div class="swatch-info">
+                    <div class="swatch-name">  Semi Border Radius Extra Small</div>
+                    <code class="swatch-value">3px</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('6px')">
+                <div class="swatch-color" style="background: 6px"></div>
+                <div class="swatch-info">
+                    <div class="swatch-name">  Semi Border Radius Medium</div>
+                    <code class="swatch-value">6px</code>
+                </div>
+            </div>
+            <div class="swatch" onclick="copyColor('3px')">
+                <div class="swatch-color" style="background: 3px"></div>
+                <div class="swatch-info">
+                    <div class="swatch-name">  Semi Border Radius Small</div>
+                    <code class="swatch-value">3px</code>
+                </div>
+            </div>
+            <div class="swatch" onclick="copyColor('0')">
+                <div class="swatch-color" style="background: 0"></div>
+                <div class="swatch-info">
+                    <div class="swatch-name">  Semi Border Thickness</div>
+                    <code class="swatch-value">0</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 Thickness Control</div>
+                    <code class="swatch-value">1px</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 Thickness Control Focus</div>
+                    <code class="swatch-value">1px</code>
+                </div>
+            </div>
+            <div class="swatch" onclick="copyColor('#E6E8EA')">
+                <div class="swatch-color" style="background: #E6E8EA"></div>
+                <div class="swatch-info">
+                    <div class="swatch-name">Disabled Border</div>
+                    <code class="swatch-value">#E6E8EA</code>
+                </div>
+            </div>
+            <div class="swatch" onclick="copyColor('#0064FA')">
+                <div class="swatch-color" style="background: #0064FA"></div>
+                <div class="swatch-info">
+                    <div class="swatch-name">Focus Border</div>
+                    <code class="swatch-value">#0064FA</code>
+                </div>
+            </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: system-ui, sans-serif">system-ui</div>
+                <code>system-ui, sans-serif</code>
+            </div>
+            <div class="type-specimen">
+                <div class="type-label">Heading</div>
+                <div class="type-heading-sample" style="font-family: system-ui, 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: system-ui, 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: system-ui, 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>
+            <p style="color: var(--doc-text-secondary)">No spacing data extracted. Run harvester v3 for spacing inference.</p>
+        </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: #000000"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Color Black</div>
+                    <code>#000000</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview" style="border-radius: #F9F9F9"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Color Default</div>
+                    <code>#F9F9F9</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview" style="border-radius: #EAEAEA"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Color Default Active</div>
+                    <code>#EAEAEA</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview" style="border-radius: #F1F1F1"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Color Default Hover</div>
+                    <code>#F1F1F1</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview" style="border-radius: #E6E8EA"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Color Disabled Bg</div>
+                    <code>#E6E8EA</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview" style="border-radius: rgba(46, 50, 56, 0.04)"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Color Disabled Fill</div>
+                    <code>rgba(46, 50, 56, 0.04)</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview" style="border-radius: rgba(28, 31, 35, 0.35)"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Color Disabled Text</div>
+                    <code>rgba(28, 31, 35, 0.35)</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview" style="border-radius: #000000"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Color Highlight</div>
+                    <code>#000000</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview" style="border-radius: #F0C000"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Color Highlight Bg</div>
+                    <code>#F0C000</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview" style="border-radius: #0064FA"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Color Link</div>
+                    <code>#0064FA</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview" style="border-radius: #0050C8"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Color Link Active</div>
+                    <code>#0050C8</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview" style="border-radius: #005AE1"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Color Link Hover</div>
+                    <code>#005AE1</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview" style="border-radius: #0064FA"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Color Link Visited</div>
+                    <code>#0064FA</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 Nav Bg</div>
+                    <code>#FFFFFF</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview" style="border-radius: rgba(22, 22, 26, 0.6)"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Color Overlay Bg</div>
+                    <code>rgba(22, 22, 26, 0.6)</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview" style="border-radius: #6B7075"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Color Tertiary</div>
+                    <code>#6B7075</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview" style="border-radius: #55595D"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Color Tertiary Active</div>
+                    <code>#55595D</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview" style="border-radius: #C3C5C7"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Color Tertiary Disabled</div>
+                    <code>#C3C5C7</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview" style="border-radius: #606469"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Color Tertiary Hover</div>
+                    <code>#606469</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview" style="border-radius: #DADBDC"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Color Tertiary Light Active</div>
+                    <code>#DADBDC</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview" style="border-radius: #EDEDEE"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Color Tertiary Light Default</div>
+                    <code>#EDEDEE</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview" style="border-radius: #E4E5E6"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Color Tertiary Light Hover</div>
+                    <code>#E4E5E6</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 White</div>
+                    <code>#FFFFFF</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview" style="border-radius: 32px"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Height Control Default</div>
+                    <code>32px</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview" style="border-radius: 40px"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Height Control Large</div>
+                    <code>40px</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview" style="border-radius: 24px"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Height Control Small</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">Spacing Base</div>
+                    <code>16px</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 Base 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 Base Tight</div>
+                    <code>12px</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview" style="border-radius: 32px"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Spacing Extra Loose</div>
+                    <code>32px</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: 24px"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Spacing Loose</div>
+                    <code>24px</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview" style="border-radius: 0"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Spacing None</div>
+                    <code>0</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview" style="border-radius: 40px"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Spacing Super Loose</div>
+                    <code>40px</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview" style="border-radius: 2px"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Spacing Super Tight</div>
+                    <code>2px</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" style="border-radius: 24px"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Width Icon Extra Large</div>
+                    <code>24px</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview" style="border-radius: 8px"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Width Icon Extra Small</div>
+                    <code>8px</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview" style="border-radius: 20px"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Width Icon Large</div>
+                    <code>20px</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview" style="border-radius: 16px"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Width Icon Medium</div>
+                    <code>16px</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview" style="border-radius: 12px"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Width Icon Small</div>
+                    <code>12px</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview geo-shadow" style="box-shadow: rgba(0, 0, 0, 0.04)"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Color Shadow</div>
+                    <code>rgba(0, 0, 0, 0.04)</code>
+                </div>
+            </div>
+            <div class="geo-item">
+                <div class="geo-preview geo-shadow" style="box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.1)"></div>
+                <div class="geo-info">
+                    <div class="geo-label">Shadow Elevated</div>
+                    <code>0 0 1px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.1)</code>
+                </div>
+            </div>
+        </div>
+        </section>
+        <!-- Section 6: Layout -->
+        <section class="section" id="layout">
+            <h2 class="section-title">📱 Layout Blueprint</h2>
+            <p style="color: var(--doc-text-secondary)">No layout data extracted. Run harvester v3 on a dashboard page.</p>
+        </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:#2463EB; border-radius:6px; color:#fff; padding:8px 16px">Primary</button>
+                    <button class="comp-btn comp-btn-outline" style="border: 1px solid #E5E7EB; border-radius:6px; color:#111827; background:transparent">Secondary</button>
+                    <button class="comp-btn comp-btn-danger" style="background:#EF4444; border-radius:6px; color:#fff">Danger</button>
+                </div>
+                <div class="component-row" style="margin-top:8px">
+                    <button class="comp-btn" style="background:#10B981; border-radius:6px; color:#fff; padding:6px 12px; font-size:12px">Small</button>
+                    <button class="comp-btn" style="background:#2463EB; border-radius:6px; color:#fff; padding:8px 16px">Medium</button>
+                    <button class="comp-btn" style="background:#2463EB; border-radius:6px; 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:0 0 1px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.1); border:1px solid #E5E7EB; padding:20px">
+                    <div class="comp-card-title" style="color:#111827">Card Title</div>
+                    <div class="comp-card-body" style="color:#4B5563">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 #E5E7EB; border-radius:6px; color:#111827; padding:10px 12px; margin-bottom:8px">
+                <div class="component-row">
+                    <select style="border:1px solid #E5E7EB; border-radius:6px; padding:10px 12px; background:#FFFFFF; color:#111827; 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 #E5E7EB; border-radius:6px">
+                    <table style="width:100%; border-collapse:collapse; font-size:14px">
+                        <thead>
+                            <tr style="background:#F9FAFB">
+                                <th style="padding:12px 16px; text-align:left; font-weight:600; font-size:12px; color:#4B5563; border-bottom:1px solid #E5E7EB">Name</th>
+                                <th style="padding:12px 16px; text-align:left; font-weight:600; font-size:12px; color:#4B5563; border-bottom:1px solid #E5E7EB">Status</th>
+                                <th style="padding:12px 16px; text-align:left; font-weight:600; font-size:12px; color:#4B5563; border-bottom:1px solid #E5E7EB">Amount</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr style="border-bottom:1px solid #E5E7EB">
+                                <td style="padding:12px 16px; color:#111827">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:#111827">$1,250.00</td>
+                            </tr>
+                            <tr style="border-bottom:1px solid #E5E7EB">
+                                <td style="padding:12px 16px; color:#111827">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:#111827">$430.50</td>
+                            </tr>
+                            <tr>
+                                <td style="padding:12px 16px; color:#111827">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:#111827">$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:6px">Primary</span>
+                    <span class="comp-tag" style="background:#10B98120; color:#10B981; border-radius:6px">Success</span>
+                    <span class="comp-tag" style="background:#F59E0B20; color:#F59E0B; border-radius:6px">Warning</span>
+                    <span class="comp-tag" style="background:#EF444420; color:#EF4444; border-radius:6px">Danger</span>
+                    <span class="comp-tag" style="background:#3B82F620; color:#3B82F6; border-radius:6px">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:6px; 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:6px; cursor:pointer; margin-bottom:4px">📦 Orders</div>
+                    <div style="padding:8px 12px; color:rgba(255,255,255,0.5); font-size:14px; border-radius:6px; cursor:pointer; margin-bottom:4px">⚙️ Settings</div>
+                    <div style="padding:8px 12px; color:rgba(255,255,255,0.5); font-size:14px; border-radius:6px; 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-radius-circle</code></td>
+                    <td> 50%</td>
+                    <td>Border</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-border-radius-extra-small</code></td>
+                    <td> 3px</td>
+                    <td>Border</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-border-radius-full</code></td>
+                    <td> 9999px</td>
+                    <td>Border</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-border-radius-large</code></td>
+                    <td> 12px</td>
+                    <td>Border</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-border-radius-medium</code></td>
+                    <td> 6px</td>
+                    <td>Border</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-border-radius-small</code></td>
+                    <td> 3px</td>
+                    <td>Border</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-border-thickness</code></td>
+                    <td> 0</td>
+                    <td>Border</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-border-thickness-control</code></td>
+                    <td> 1px</td>
+                    <td>Border</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-border-thickness-control-focus</code></td>
+                    <td> 1px</td>
+                    <td>Border</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-black</code></td>
+                    <td><span class="token-color-preview" style="background:#000000"></span> #000000</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-default</code></td>
+                    <td><span class="token-color-preview" style="background:#F9F9F9"></span> #F9F9F9</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-default-active</code></td>
+                    <td><span class="token-color-preview" style="background:#EAEAEA"></span> #EAEAEA</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-default-hover</code></td>
+                    <td><span class="token-color-preview" style="background:#F1F1F1"></span> #F1F1F1</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-disabled-bg</code></td>
+                    <td><span class="token-color-preview" style="background:#E6E8EA"></span> #E6E8EA</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-disabled-border</code></td>
+                    <td><span class="token-color-preview" style="background:#E6E8EA"></span> #E6E8EA</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-disabled-fill</code></td>
+                    <td><span class="token-color-preview" style="background:rgba(46, 50, 56, 0.04)"></span> rgba(46, 50, 56, 0.04)</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-disabled-text</code></td>
+                    <td><span class="token-color-preview" style="background:rgba(28, 31, 35, 0.35)"></span> rgba(28, 31, 35, 0.35)</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-focus-border</code></td>
+                    <td><span class="token-color-preview" style="background:#0064FA"></span> #0064FA</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-highlight</code></td>
+                    <td><span class="token-color-preview" style="background:#000000"></span> #000000</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-highlight-bg</code></td>
+                    <td><span class="token-color-preview" style="background:#F0C000"></span> #F0C000</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-link</code></td>
+                    <td><span class="token-color-preview" style="background:#0064FA"></span> #0064FA</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-link-active</code></td>
+                    <td><span class="token-color-preview" style="background:#0050C8"></span> #0050C8</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-link-hover</code></td>
+                    <td><span class="token-color-preview" style="background:#005AE1"></span> #005AE1</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-link-visited</code></td>
+                    <td><span class="token-color-preview" style="background:#0064FA"></span> #0064FA</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-nav-bg</code></td>
+                    <td><span class="token-color-preview" style="background:#FFFFFF"></span> #FFFFFF</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-overlay-bg</code></td>
+                    <td><span class="token-color-preview" style="background:rgba(22, 22, 26, 0.6)"></span> rgba(22, 22, 26, 0.6)</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-shadow</code></td>
+                    <td> rgba(0, 0, 0, 0.04)</td>
+                    <td>Shadow</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-tertiary</code></td>
+                    <td><span class="token-color-preview" style="background:#6B7075"></span> #6B7075</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-tertiary-active</code></td>
+                    <td><span class="token-color-preview" style="background:#55595D"></span> #55595D</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-tertiary-disabled</code></td>
+                    <td><span class="token-color-preview" style="background:#C3C5C7"></span> #C3C5C7</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-tertiary-hover</code></td>
+                    <td><span class="token-color-preview" style="background:#606469"></span> #606469</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-tertiary-light-active</code></td>
+                    <td><span class="token-color-preview" style="background:#DADBDC"></span> #DADBDC</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-tertiary-light-default</code></td>
+                    <td><span class="token-color-preview" style="background:#EDEDEE"></span> #EDEDEE</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-tertiary-light-hover</code></td>
+                    <td><span class="token-color-preview" style="background:#E4E5E6"></span> #E4E5E6</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-color-white</code></td>
+                    <td><span class="token-color-preview" style="background:#FFFFFF"></span> #FFFFFF</td>
+                    <td>Color</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-font-size-header-1</code></td>
+                    <td> 32px</td>
+                    <td>Typography</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-font-size-header-2</code></td>
+                    <td> 28px</td>
+                    <td>Typography</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-font-size-header-3</code></td>
+                    <td> 24px</td>
+                    <td>Typography</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-font-size-header-4</code></td>
+                    <td> 20px</td>
+                    <td>Typography</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-font-size-header-5</code></td>
+                    <td> 18px</td>
+                    <td>Typography</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-font-size-header-6</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> 600</td>
+                    <td>Typography</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-font-weight-light</code></td>
+                    <td> 200</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-height-control-default</code></td>
+                    <td> 32px</td>
+                    <td>Sizing</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-height-control-large</code></td>
+                    <td> 40px</td>
+                    <td>Sizing</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-height-control-small</code></td>
+                    <td> 24px</td>
+                    <td>Sizing</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-shadow-elevated</code></td>
+                    <td> 0 0 1px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.1)</td>
+                    <td>Shadow</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-spacing-base</code></td>
+                    <td> 16px</td>
+                    <td>Spacing</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-spacing-base-loose</code></td>
+                    <td> 20px</td>
+                    <td>Spacing</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-spacing-base-tight</code></td>
+                    <td> 12px</td>
+                    <td>Spacing</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-spacing-extra-loose</code></td>
+                    <td> 32px</td>
+                    <td>Spacing</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-spacing-extra-tight</code></td>
+                    <td> 4px</td>
+                    <td>Spacing</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-spacing-loose</code></td>
+                    <td> 24px</td>
+                    <td>Spacing</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-spacing-none</code></td>
+                    <td> 0</td>
+                    <td>Spacing</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-spacing-super-loose</code></td>
+                    <td> 40px</td>
+                    <td>Spacing</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-spacing-super-tight</code></td>
+                    <td> 2px</td>
+                    <td>Spacing</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-spacing-tight</code></td>
+                    <td> 8px</td>
+                    <td>Spacing</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-width-icon-extra-large</code></td>
+                    <td> 24px</td>
+                    <td>Sizing</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-width-icon-extra-small</code></td>
+                    <td> 8px</td>
+                    <td>Sizing</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-width-icon-large</code></td>
+                    <td> 20px</td>
+                    <td>Sizing</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-width-icon-medium</code></td>
+                    <td> 16px</td>
+                    <td>Sizing</td>
+                </tr>
+                <tr>
+                    <td><code>--semi-width-icon-small</code></td>
+                    <td> 12px</td>
+                    <td>Sizing</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 Fila - Bootstrap 5 Admin Dashboard Template theme set</code></pre>
+            </div>
+        </div>
+        </section>
+    </main>
+    <footer class="footer">
+        <p>Generated by <strong>MasterDesign Agent — 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>