Sync UI from kosmonautical/openhands-index-paul with show_all_labels feature preserved - Add OpenHands-Design typography (Inter + JetBrains Mono fonts) - Update top navigation with script for proper routing - Add show_all_labels toggle to scatter plots (preserved from original) - Apply neutral chart gridlines to visualizations - Various styling and layout improvements

about.py

@@ -2,110 +2,111 @@ import gradio as gr
 
 
 def build_page():
-    with gr.Column(elem_id="about-page-content-wrapper"):
-        # --- Section 1: About ---
-        gr.HTML(
-            """
-            <h2>About</h2>
-            <p>
-                OpenHands Index tracks AI coding agent performance across software engineering benchmarks, providing a unified view of both accuracy and cost efficiency.
-            </p>
-            """
-        )
-        gr.Markdown("---", elem_classes="divider-line")
+    with gr.Column(elem_id="page-content-wrapper"):
+        with gr.Column(elem_id="about-page-content-wrapper"):
+            # --- Section 1: About ---
+            gr.HTML(
+                """
+                <h2>About</h2>
+                <p>
+                    OpenHands Index tracks AI coding agent performance across software engineering benchmarks, providing a unified view of both accuracy and cost efficiency.
+                </p>
+                """
+            )
+            gr.Markdown("---", elem_classes="divider-line")
 
-        # --- Section 2: Benchmark Details ---
-        gr.HTML(
-            """
-            <h2>Benchmark Details</h2>
-            <p>We evaluate agents across five categories:</p>
-            <ul class="info-list">
-                <li><strong>Issue Resolution:</strong> <a href="https://www.swebench.com/" target="_blank">SWE-bench Verified</a> — 500 instances</li>
-                <li><strong>Frontend:</strong> <a href="https://github.com/OpenHands/SWE-bench-multimodal" target="_blank">SWE-bench Multimodal</a> — 617 instances</li>
-                <li><strong>Greenfield:</strong> <a href="https://github.com/commit-0/commit0" target="_blank">Commit0</a> — 16 libraries (lite split)</li>
-                <li><strong>Testing:</strong> <a href="https://github.com/logic-star-ai/swt-bench" target="_blank">SWT-bench Verified</a> — 433 instances</li>
-                <li><strong>Information Gathering:</strong> <a href="https://huggingface.co/gaia-benchmark" target="_blank">GAIA</a> — 165 questions (validation split)</li>
-            </ul>
-            """
-        )
-        gr.Markdown("---", elem_classes="divider-line")
+            # --- Section 2: Benchmark Details ---
+            gr.HTML(
+                """
+                <h2>Benchmark Details</h2>
+                <p>We evaluate agents across five categories:</p>
+                <ul class="info-list">
+                    <li><strong>Issue Resolution:</strong> <a href="https://www.swebench.com/" target="_blank">SWE-bench Verified</a> — 500 instances</li>
+                    <li><strong>Frontend:</strong> <a href="https://github.com/OpenHands/SWE-bench-multimodal" target="_blank">SWE-bench Multimodal</a> — 617 instances</li>
+                    <li><strong>Greenfield:</strong> <a href="https://github.com/commit-0/commit0" target="_blank">Commit0</a> — 16 libraries (lite split)</li>
+                    <li><strong>Testing:</strong> <a href="https://github.com/logic-star-ai/swt-bench" target="_blank">SWT-bench Verified</a> — 433 instances</li>
+                    <li><strong>Information Gathering:</strong> <a href="https://huggingface.co/gaia-benchmark" target="_blank">GAIA</a> — 165 questions (validation split)</li>
+                </ul>
+                """
+            )
+            gr.Markdown("---", elem_classes="divider-line")
 
-        # --- Section 3: Methodology ---
-        gr.HTML(
-            """
-            <h2>Methodology</h2>
-            <p><strong>Per-benchmark scores:</strong> Each benchmark reports a percentage metric (resolve rate, accuracy, or test pass rate), making scores comparable regardless of dataset size.</p>
-            <p><strong>Average score:</strong> Macro-average across all five categories with equal weighting.</p>
-            <p><strong>Cost &amp; Runtime:</strong> Average USD and seconds per task instance.</p>
-            <p>All evaluations use the <a href="https://github.com/OpenHands/software-agent-sdk" target="_blank">OpenHands Agent SDK</a> with identical configurations per model.</p>
-            """
-        )
-        gr.Markdown("---", elem_classes="divider-line")
+            # --- Section 3: Methodology ---
+            gr.HTML(
+                """
+                <h2>Methodology</h2>
+                <p><strong>Per-benchmark scores:</strong> Each benchmark reports a percentage metric (resolve rate, accuracy, or test pass rate), making scores comparable regardless of dataset size.</p>
+                <p><strong>Average score:</strong> Macro-average across all five categories with equal weighting.</p>
+                <p><strong>Cost &amp; Runtime:</strong> Average USD and seconds per task instance.</p>
+                <p>All evaluations use the <a href="https://github.com/OpenHands/software-agent-sdk" target="_blank">OpenHands Agent SDK</a> with identical configurations per model.</p>
+                """
+            )
+            gr.Markdown("---", elem_classes="divider-line")
 
-        # --- Section 4: API Access ---
-        gr.HTML(
-            """
-            <h2>API Access</h2>
-            <p>Access leaderboard data programmatically via our REST API:</p>
-            <ul class="info-list">
-                <li><a href="https://index.openhands.dev/api/docs" target="_blank">Interactive API Documentation</a> - Swagger UI with all endpoints</li>
-                <li><a href="https://index.openhands.dev/api/leaderboard" target="_blank">/api/leaderboard</a> - Full leaderboard with scores and metadata</li>
-                <li><a href="https://index.openhands.dev/api/categories" target="_blank">/api/categories</a> - List of benchmark categories</li>
-            </ul>
-            <p style="margin-top: 10px;"><strong>Example:</strong></p>
-            <pre class="citation-block" style="font-size: 0.9em;">curl "https://index.openhands.dev/api/leaderboard?limit=5"</pre>
-            """
-        )
-        gr.Markdown("---", elem_classes="divider-line")
+            # --- Section 4: API Access ---
+            gr.HTML(
+                """
+                <h2>API Access</h2>
+                <p>Access leaderboard data programmatically via our REST API:</p>
+                <ul class="info-list">
+                    <li><a href="https://index.openhands.dev/api/docs" target="_blank">Interactive API Documentation</a> - Swagger UI with all endpoints</li>
+                    <li><a href="https://index.openhands.dev/api/leaderboard" target="_blank">/api/leaderboard</a> - Full leaderboard with scores and metadata</li>
+                    <li><a href="https://index.openhands.dev/api/categories" target="_blank">/api/categories</a> - List of benchmark categories</li>
+                </ul>
+                <p style="margin-top: 10px;"><strong>Example:</strong></p>
+                <pre class="citation-block" style="font-size: 0.9em;">curl "https://index.openhands.dev/api/leaderboard?limit=5"</pre>
+                """
+            )
+            gr.Markdown("---", elem_classes="divider-line")
 
-        # --- Section 5: Resources ---
-        gr.HTML(
-            """
-            <h2>Resources</h2>
-            <ul class="info-list">
-                <li><a href="https://github.com/OpenHands/OpenHands" target="_blank">OpenHands</a> - The main OpenHands repository</li>
-                <li><a href="https://github.com/OpenHands/software-agent-sdk" target="_blank">Software Agent SDK</a> - The agent code used for evaluation</li>
-                <li><a href="https://github.com/OpenHands/benchmarks" target="_blank">Benchmarks</a> - The benchmarking code</li>
-                <li><a href="https://github.com/OpenHands/openhands-index-results" target="_blank">Results</a> - Raw evaluation results</li>
-            </ul>
-            """
-        )
-        gr.Markdown("---", elem_classes="divider-line")
+            # --- Section 5: Resources ---
+            gr.HTML(
+                """
+                <h2>Resources</h2>
+                <ul class="info-list">
+                    <li><a href="https://github.com/OpenHands/OpenHands" target="_blank">OpenHands</a> - The main OpenHands repository</li>
+                    <li><a href="https://github.com/OpenHands/software-agent-sdk" target="_blank">Software Agent SDK</a> - The agent code used for evaluation</li>
+                    <li><a href="https://github.com/OpenHands/benchmarks" target="_blank">Benchmarks</a> - The benchmarking code</li>
+                    <li><a href="https://github.com/OpenHands/openhands-index-results" target="_blank">Results</a> - Raw evaluation results</li>
+                </ul>
+                """
+            )
+            gr.Markdown("---", elem_classes="divider-line")
 
-        # --- Section 5: Contact ---
-        gr.HTML(
-            """
-            <h2>Contact</h2>
-            <p>
-                Questions or feedback? Join us on <a href="https://dub.sh/openhands" target="_blank">Slack</a>.
-            </p>
-            """
-        )
-        gr.Markdown("---", elem_classes="divider-line")
+            # --- Section 5: Contact ---
+            gr.HTML(
+                """
+                <h2>Contact</h2>
+                <p>
+                    Questions or feedback? Join us on <a href="https://dub.sh/openhands" target="_blank">Slack</a>.
+                </p>
+                """
+            )
+            gr.Markdown("---", elem_classes="divider-line")
 
-        # --- Section 6: Acknowledgements ---
-        gr.HTML(
-            """
-            <h2>Acknowledgements</h2>
-            <p>
-                The leaderboard interface is adapted from the 
-                <a href="https://huggingface.co/spaces/allenai/asta-bench-leaderboard" target="_blank">AstaBench Leaderboard</a> 
-                by Allen Institute for AI.
-            </p>
-            """
-        )
-        gr.Markdown("---", elem_classes="divider-line")
+            # --- Section 6: Acknowledgements ---
+            gr.HTML(
+                """
+                <h2>Acknowledgements</h2>
+                <p>
+                    The leaderboard interface is adapted from the
+                    <a href="https://huggingface.co/spaces/allenai/asta-bench-leaderboard" target="_blank">AstaBench Leaderboard</a>
+                    by Allen Institute for AI.
+                </p>
+                """
+            )
+            gr.Markdown("---", elem_classes="divider-line")
 
-        # --- Section 7: Citation ---
-        gr.HTML(
-            """
-            <h2>Citation</h2>
-            <pre class="citation-block">
+            # --- Section 7: Citation ---
+            gr.HTML(
+                """
+                <h2>Citation</h2>
+                <pre class="citation-block">
 @misc{openhandsindex2025,
     title={OpenHands Index: A Comprehensive Leaderboard for AI Coding Agents},
     author={OpenHands Team},
     year={2025},
     howpublished={https://index.openhands.dev}
 }</pre>
-            """
-        )
+                """
+            )

alternative_agents_page.py

@@ -76,28 +76,29 @@ def _append_openhands_shared_models(
 
 
 def build_page():
-    gr.HTML(ALTERNATIVE_AGENTS_INTRO)
+    with gr.Column(elem_id="page-content-wrapper"):
+        gr.HTML(ALTERNATIVE_AGENTS_INTRO)
 
-    gr.Markdown("---")
+        gr.Markdown("---")
 
-    test_df, test_tag_map = get_full_leaderboard_data(
-        "test",
-        agent_filter=SimpleLeaderboardViewer.AGENT_FILTER_ALTERNATIVE,
-    )
-
-    if test_df.empty:
-        gr.Markdown(
-            "No alternative agent submissions yet. New runs land in "
-            "`alternative_agents/{type}/{model}/` in "
-            "[openhands-index-results](https://github.com/OpenHands/openhands-index-results)."
+        test_df, test_tag_map = get_full_leaderboard_data(
+            "test",
+            agent_filter=SimpleLeaderboardViewer.AGENT_FILTER_ALTERNATIVE,
         )
-        return
-
-    test_df = _append_openhands_shared_models(test_df, split="test")
 
-    create_leaderboard_display(
-        full_df=test_df,
-        tag_map=test_tag_map,
-        category_name="Overall",
-        split_name="test",
-    )
+        if test_df.empty:
+            gr.Markdown(
+                "No alternative agent submissions yet. New runs land in "
+                "`alternative_agents/{type}/{model}/` in "
+                "[openhands-index-results](https://github.com/OpenHands/openhands-index-results)."
+            )
+            return
+
+        test_df = _append_openhands_shared_models(test_df, split="test")
+
+        create_leaderboard_display(
+            full_df=test_df,
+            tag_map=test_tag_map,
+            category_name="Overall",
+            split_name="test",
+        )

app.py

@@ -3,7 +3,7 @@ import logging
 import sys
 import os
 
-from constants import FONT_FAMILY_SHORT
+from constants import FONT_MONO_NAME, FONT_FAMILY_SHORT
 
 logging.basicConfig(level=logging.INFO, format='%(levelname)s: %(message)s')
 logger = logging.getLogger(__name__)
@@ -24,8 +24,9 @@ except Exception as e:
     logger.error(f"Error during data setup: {e}", exc_info=True)
     logger.warning("Continuing with app startup despite error")
 
-import gradio as gr
 import urllib.parse
+
+import gradio as gr
 from huggingface_hub import HfApi
 from config import LEADERBOARD_PATH, LOCAL_DEBUG
 from content import css
@@ -41,10 +42,16 @@ from about import build_page as build_about_page
 logger.info(f"All modules imported (LOCAL_DEBUG={LOCAL_DEBUG})")
 
 api = HfApi()
-LOGO_PATH = "assets/logo.svg"
 
 # PostHog analytics (client-side)
 POSTHOG_API_KEY = os.getenv("POSTHOG_API_KEY", "phc_ERBPfEE0gwNgkOBsxbHr1wh9mBsYcsw4zSLtvdA9RFg")
+# OpenHands-Design typography (matches OpenHands-Design/index.html)
+DESIGN_FONTS_LINK = """
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+"""
+
 posthog_script = f"""
 <script>
     !function(t,e){{var o,n,p,r;e.__SV||(window.posthog && window.posthog.__loaded)||(window.posthog=e,e._i=[],e.init=function(i,s,a){{function g(t,e){{var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){{t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){{var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e}},u.people.toString=function(){{return u.toString(1)+".people (stub)"}},o="init ss us bi os hs es ns capture Bi calculateEventProperties cs register register_once register_for_session unregister unregister_for_session getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSurveysLoaded onSessionId getSurveys getActiveMatchingSurveys renderSurvey displaySurvey cancelPendingSurvey canRenderSurvey canRenderSurveyAsync identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException startExceptionAutocapture stopExceptionAutocapture loadToolbar get_property getSessionProperty ps vs createPersonProfile gs Zr ys opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing get_explicit_consent_status is_capturing clear_opt_in_out_capturing ds debug O fs getPageViewId captureTraceFeedback captureTraceMetric Yr".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])}},e.__SV=1)}}(document,window.posthog||[]);
@@ -77,28 +84,196 @@ redirect_script = """
 </script>
 """
 
+# Gradio 5.30+ does not use .nav-holder — tag the real multipage links, then style via CSS
+# (see: OpenHands-Design index.html top nav)
+# IMPORTANT: do not strip all classes on every run — that unstyles the bar, changes layout, and
+# makes getBoundingClientRect() unstable (layout thrash / "jumping" nav).
+oh_top_nav_script = """
+<script>
+(function() {
+    const ROUTE_PATHS = new Set(['/home', '/issue-resolution', '/greenfield', '/frontend', '/testing', '/information-gathering', '/about', '/alternative-agents']);
+    var lastBar = null;
+    var lastLinks = null;
+    function pathKey(anchor) {
+        try {
+            var p = new URL(anchor.getAttribute('href') || '', window.location.origin).pathname.replace(/\\/$/, '') || '/';
+            if (p === '/' || p === '') p = '/home';
+            return p;
+        } catch (e) { return null; }
+    }
+    function routePath(anchor) {
+        var p = pathKey(anchor);
+        return p && ROUTE_PATHS.has(p) ? p : null;
+    }
+    function getTopRowRouteLinks() {
+        const g = document.querySelector('gradio-app');
+        if (!g) return [];
+        /* Only links inside the multipage <nav> — not intro/Markdown (avoids byPath picking a
+           body <a> first, and drops the #page-content-wrapper filter that could hide the bar). */
+        function routeLinksInNav(nav) {
+            if (!nav) return [];
+            return Array.from(nav.querySelectorAll('a[href]')).filter(function (a) { return routePath(a); });
+        }
+        /* Prefer the <nav> that contains the Home wordmark (avoids wrong <nav> + works if Svelte class hash changes). */
+        var bar = getRouteNav() || g.querySelector('nav.svelte-ti537g');
+        var candidates = routeLinksInNav(bar);
+        if (candidates.length < 1) {
+            const navs = g.querySelectorAll('nav');
+            for (var i = 0; i < navs.length; i++) {
+                const c = routeLinksInNav(navs[i]);
+                if (c.length > 0) { bar = navs[i]; candidates = c; break; }
+            }
+        }
+        if (candidates.length < 1) return [];
+        /* Single top-nav link: still tag nav so wordmark/oh-top-nav CSS runs (avoids “missing logo / links stuck left” until 2+ links exist) */
+        if (candidates.length === 1) {
+            const a = candidates[0];
+            const nav = a.closest("nav");
+            if (nav && g.contains(nav)) {
+                return [a];
+            }
+            return [];
+        }
+        const byPath = new Map();
+        for (const a of candidates) {
+            const p = pathKey(a);
+            if (!p || !ROUTE_PATHS.has(p)) continue;
+            if (!byPath.has(p)) {
+                byPath.set(p, a);
+            } else {
+                const cur = byPath.get(p);
+                const curP = new URL(cur.getAttribute('href') || '', window.location.origin).pathname;
+                const newP = new URL(a.getAttribute('href') || '', window.location.origin).pathname;
+                if (p === '/home' && (curP === '/' || curP === '') && newP === '/home') {
+                    byPath.set(p, a);
+                }
+            }
+        }
+        const unique = Array.from(byPath.values());
+        const tops = unique.map((x) => x.getBoundingClientRect().top);
+        const minTop = Math.min.apply(null, tops);
+        /* ~1 row; always keep /home (wordmark) even if y differs (e.g. from position:absolute layout) */
+        return unique.filter((a) => {
+            if (pathKey(a) === '/home') return true;
+            return Math.abs(a.getBoundingClientRect().top - minTop) < 22;
+        });
+    }
+    function lca(els) {
+        if (els.length < 2) return els[0] && els[0].parentElement;
+        const chain = (node) => { const a = []; for (let n = node; n; n = n.parentElement) a.push(n); return a; };
+        let c = chain(els[0]);
+        for (let i = 1; i < els.length; i++) {
+            const d = new Set(chain(els[i]));
+            c = c.filter((n) => d.has(n));
+        }
+        return c[0] || null;
+    }
+    function sameLinkSet(a, b) {
+        if (!a || !b || a.length !== b.length) return false;
+        const sb = new Set(b);
+        for (var i = 0; i < a.length; i++) { if (!sb.has(a[i])) return false; }
+        return true;
+    }
+    function isDetached(el) { return el && !document.body.contains(el); }
+    function clearBar() {
+        if (lastBar) { lastBar.classList.remove('oh-top-nav'); }
+        if (lastLinks) { lastLinks.forEach(function (a) { a.classList.remove('oh-nav-link'); }); }
+        lastBar = null;
+        lastLinks = null;
+    }
+    /**
+     * Multipage top bar: must NOT use the first <nav> in the app (there can be others).
+     * The wordmark (first /home) lives in the same <nav> as the route row — that is the bar.
+     * Svelte class hash can change, so do not rely only on nav.svelte-ti537g.
+     */
+    function getRouteNav() {
+        var g = document.querySelector('gradio-app');
+        if (!g) return null;
+        var h = g.querySelector('a[href*="/home"]');
+        if (h) {
+            var n = h.closest('nav');
+            if (n && g.contains(n)) { return n; }
+        }
+        n = g.querySelector('nav.oh-top-nav, nav.svelte-ti537g, .nav-holder nav, nav[role="navigation"]');
+        if (n) return n;
+        n = g.querySelector('nav');
+        return n || null;
+    }
+    function applyOhNav() {
+        if (lastLinks && (lastLinks.some(isDetached) || (lastBar && isDetached(lastBar)))) {
+            lastBar = null;
+            lastLinks = null;
+        }
+        const links = getTopRowRouteLinks();
+        if (links.length < 1) {
+            if (lastBar && lastLinks && !lastLinks.some(isDetached)) {
+                return;
+            }
+            if (lastBar) { clearBar(); }
+            return;
+        }
+        var row = lca(links);
+        if (!row || row === document.body || (row.tagName && row.tagName.toLowerCase() === 'gradio-app')) {
+            row = links[0].parentElement;
+        }
+        if (lastBar === row && lastLinks && sameLinkSet(lastLinks, links)) {
+            return;
+        }
+        if (lastBar && lastBar !== row) { lastBar.classList.remove('oh-top-nav'); }
+        if (lastLinks) { lastLinks.forEach(function (a) { a.classList.remove('oh-nav-link'); }); }
+        if (row) { row.classList.add('oh-top-nav'); }
+        links.forEach(function (a) {
+            a.classList.add('oh-nav-link');
+            if (pathKey(a) === '/home') {
+                a.classList.add('oh-nav-wordmark');
+                a.setAttribute('aria-label', 'OpenHands Home'); a.setAttribute('title', 'Home');
+            }
+        });
+        lastBar = row;
+        lastLinks = links.slice();
+    }
+    var deb;
+    function scheduleApply() {
+        if (deb) { clearTimeout(deb); }
+        deb = setTimeout(function () { requestAnimationFrame(applyOhNav); }, 50);
+    }
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', function () { requestAnimationFrame(applyOhNav); });
+    } else { requestAnimationFrame(applyOhNav); }
+    requestAnimationFrame(function () { requestAnimationFrame(applyOhNav); });
+    window.addEventListener('resize', scheduleApply, { passive: true });
+    var obs = new MutationObserver(scheduleApply);
+    var ga = document.querySelector('gradio-app');
+    if (ga) { obs.observe(ga, { childList: true, subtree: true }); }
+    else { document.addEventListener('DOMContentLoaded', function () { var g = document.querySelector('gradio-app'); if (g) obs.observe(g, { childList: true, subtree: true }); }); }
+    try { if (typeof queueMicrotask === 'function') { queueMicrotask(applyOhNav); } } catch (e) {}
+    setTimeout(applyOhNav, 0);
+    setTimeout(applyOhNav, 50);
+    setTimeout(applyOhNav, 500);
+    setTimeout(applyOhNav, 2000);
+})();
+</script>
+"""
+
 # JavaScript to fix navigation links to use relative paths (avoids domain mismatch when behind proxy)
 fix_nav_links_script = """
 <script>
 (function() {
     function fixNavLinks() {
-        // Find all navigation links in the nav-holder
-        const navLinks = document.querySelectorAll('.nav-holder nav a');
+        const navLinks = document.querySelectorAll('gradio-app nav.oh-top-nav a[href], gradio-app nav.svelte-ti537g a[href]');
         navLinks.forEach(link => {
             const href = link.getAttribute('href');
             if (href) {
-                // Extract the pathname from the href (works with both relative and absolute URLs)
                 try {
                     const url = new URL(href, window.location.origin);
-                    // Only update if the pathname starts with /
-                    if (url.pathname.startsWith('/')) {
+                    if (url.pathname === '/' || url.pathname === '') {
+                        link.setAttribute('href', '/home');
+                    } else if (url.pathname.startsWith('/')) {
                         link.setAttribute('href', url.pathname);
                     }
                 } catch (e) {
-                    // If URL parsing fails, leave the href as-is
                 }
             }
-            // Remove target="_blank" from nav links to prevent opening in new tab
             link.removeAttribute('target');
         });
     }
@@ -191,8 +366,8 @@ function updateChartsForDarkMode() {
                 'paper_bgcolor': isDark ? '#1f1f1f' : 'white',
                 'plot_bgcolor': isDark ? '#1f1f1f' : 'white',
                 'font.color': isDark ? '#e0e0e0' : '#333',
-                'xaxis.gridcolor': isDark ? '#444' : '#eee',
-                'yaxis.gridcolor': isDark ? '#444' : '#eee'
+                'xaxis.gridcolor': isDark ? '#242424' : '#d4d4d4',
+                'yaxis.gridcolor': isDark ? '#242424' : '#d4d4d4',
             });
         }
     });
@@ -226,133 +401,317 @@ document.addEventListener('DOMContentLoaded', () => {
 </script>
 """
 # --- Theme Definition ---
-# Color scheme aligned with OpenHands brand (from openhands-ui/tokens.css)
-# Primary: Yellow (#FFE165), Neutral: Grey scale, Accents: Green (#BCFF8C), Red (#FF684E)
+# Aligned with OpenHands-Design (see OpenHands-Design/DESIGN.md, index.html)
+# Near-black canvas, white primary CTA, neutral grey scale
+_MUTED_GREEN = gr.themes.Color(
+    c50="#f0fdf4", c100="#dcfce7", c200="#bbf7d0", c300="#86efac", c400="#4ade80",
+    c500="#22c55e", c600="#16a34a", c700="#15803d", c800="#166534", c900="#14532d", c950="#052e16",
+)
 theme = gr.themes.Base(
-    # Primary hue - Yellow (OpenHands brand color)
     primary_hue=gr.themes.Color(
-        c50="#FFFCF0", c100="#FFF3C0", c200="#FFEEAA", c300="#FFEA92", c400="#FFE57B",
-        c500="#FFE165", c600="#DCC257", c700="#BBA54A", c800="#99873D", c900="#76682F", c950="#534921"
+        c50="#fafafa", c100="#f4f4f5", c200="#e4e4e7", c300="#d4d4d8", c400="#a1a1aa",
+        c500="#ffffff", c600="#f4f4f5", c700="#e4e4e7", c800="#d4d4d8", c900="#a1a1aa", c950="#71717a"
     ),
-    # Secondary hue - Green accent (from OpenHands palette)
-    secondary_hue=gr.themes.Color(
-        c50="#F8FFF4", c100="#E4FFD0", c200="#DAFFBF", c300="#CFFFAD", c400="#C6FF9D",
-        c500="#BCFF8C", c600="#A2DC79", c700="#8ABB67", c800="#719954", c900="#577641", c950="#3D532E"
-    ),
-    # Neutral hue - Grey scale (OpenHands dark mode colors)
+    secondary_hue=_MUTED_GREEN,
     neutral_hue=gr.themes.Color(
-        c50="#F7F8FB", c100="#EBEDF3", c200="#D4D8E7", c300="#B1B9D3", c400="#82889B",
-        c500="#525662", c600="#3A3C45", c700="#2F3137", c800="#222328", c900="#18191C", c950="#0D0D0F"
+        c50="#fafafa", c100="#f4f4f4", c200="#e5e5e5", c300="#d4d4d4", c400="#a3a3a3",
+        c500="#737373", c600="#525252", c700="#404040", c800="#262626", c900="#171717", c950="#0d0d0d"
     ),
-    font=[FONT_FAMILY_SHORT, 'sans-serif'],
-    font_mono=['monospace'],
+    font=[FONT_FAMILY_SHORT, "system-ui", "sans-serif"],
+    font_mono=[FONT_MONO_NAME, "ui-monospace", "SFMono-Regular", "Menlo", "monospace"],
 ).set(
-    body_text_color='*neutral_950',
-    body_text_color_subdued='*neutral_700',
-    body_text_color_subdued_dark='*neutral_300',
-    body_text_color_dark='*neutral_50',
-    background_fill_primary='*neutral_50',
-    background_fill_primary_dark='*neutral_900',
-    background_fill_secondary='*neutral_100',
-    background_fill_secondary_dark='*neutral_800',
-    border_color_accent='*primary_500',
-    border_color_accent_subdued='*neutral_300',
-    border_color_accent_subdued_dark='*neutral_600',
-    color_accent='*primary_500',
-    color_accent_soft='*neutral_200',
-    color_accent_soft_dark='*neutral_800',
-    link_text_color='*neutral_700',
-    link_text_color_dark='*neutral_300',
-    link_text_color_active_dark='*primary_500',
-    link_text_color_hover_dark='*primary_400',
-    link_text_color_visited_dark='*neutral_400',
-    table_even_background_fill='*neutral_100',
-    table_even_background_fill_dark='*neutral_800',
-    button_primary_background_fill='*primary_500',
-    button_primary_background_fill_dark='*primary_500',
-    button_primary_background_fill_hover='*primary_400',
-    button_primary_background_fill_hover_dark='*primary_400',
-    button_secondary_background_fill='*secondary_500',
-    button_secondary_background_fill_dark='*secondary_600',
-    button_secondary_text_color='*neutral_900',
-    button_secondary_text_color_dark='*neutral_900',
-    block_title_text_color='*neutral_900',
-    button_primary_text_color='*neutral_900',
-    block_title_text_color_dark='*neutral_50',
-    button_primary_text_color_dark='*neutral_900',
-    block_border_color='*neutral_300',
-    block_border_color_dark='*neutral_700',
-    block_background_fill_dark='*neutral_900',
-    block_background_fill='*neutral_50',
-    checkbox_label_text_color='*neutral_900',
-    checkbox_label_background_fill='*neutral_200',
-    checkbox_label_background_fill_dark='*neutral_700',
-    checkbox_background_color_selected='*primary_500',
-    checkbox_background_color_selected_dark='*primary_500',
+    body_text_color="*neutral_950",
+    body_text_color_subdued="*neutral_600",
+    body_text_color_subdued_dark="*neutral_400",
+    body_text_color_dark="*neutral_50",
+    background_fill_primary="*neutral_50",
+    background_fill_primary_dark="*neutral_950",
+    background_fill_secondary="*neutral_100",
+    background_fill_secondary_dark="*neutral_900",
+    # Light: strokes match top nav (#e4e4e7); dark: DESIGN.md #242424 (--border / --input)
+    border_color_accent="#e4e4e7",
+    border_color_accent_subdued="#e4e4e7",
+    border_color_accent_subdued_dark="#242424",
+    # Primary border for inputs & dropdown chrome (maps to --border-color-primary in Gradio)
+    border_color_primary="#e4e4e7",
+    border_color_primary_dark="#242424",
+    color_accent="*primary_500",
+    color_accent_soft="*neutral_200",
+    color_accent_soft_dark="*neutral_800",
+    link_text_color="*neutral_700",
+    link_text_color_dark="*neutral_300",
+    link_text_color_active_dark="*primary_500",
+    link_text_color_hover_dark="*neutral_50",
+    link_text_color_visited_dark="*neutral_500",
+    table_even_background_fill="*neutral_100",
+    table_even_background_fill_dark="*neutral_900",
+    button_primary_background_fill="*primary_500",
+    button_primary_background_fill_dark="*primary_500",
+    button_primary_background_fill_hover="*primary_600",
+    button_primary_background_fill_hover_dark="*primary_600",
+    button_secondary_background_fill="*neutral_200",
+    button_secondary_background_fill_dark="*neutral_800",
+    button_secondary_text_color="*neutral_900",
+    button_secondary_text_color_dark="*neutral_50",
+    block_title_text_color="*neutral_950",
+    button_primary_text_color="*neutral_950",
+    block_title_text_color_dark="*neutral_50",
+    button_primary_text_color_dark="*neutral_950",
+    block_border_color="#e4e4e7",
+    block_border_color_dark="#242424",
+    block_background_fill_dark="*neutral_900",
+    block_background_fill="*neutral_50",
+    checkbox_label_text_color="*neutral_900",
+    checkbox_label_background_fill="*neutral_200",
+    checkbox_label_background_fill_dark="*neutral_700",
+    # Checkmark SVG is white; selected fill must not be white (this theme’s primary_500 = white → invisible)
+    checkbox_background_color_selected="*neutral_950",
+    checkbox_background_color_selected_dark="*neutral_600",
+    # OpenHands-Design §4 Inputs: rounded-md (4px), border-border, bg-muted/40, text-sm, focus ring #ccc + offset
+    input_radius="0.25rem",
+    input_border_width="1px",
+    input_border_color="*border_color_primary",
+    input_border_color_dark="#242424",
+    input_border_color_hover="*neutral_300",
+    input_border_color_hover_dark="#2e2e2e",
+    input_border_color_focus="#a1a1aa",
+    input_border_color_focus_dark="#525252",
+    input_background_fill="rgba(244, 244, 245, 0.75)",
+    input_background_fill_dark="rgba(31, 31, 31, 0.45)",
+    input_background_fill_hover="rgba(244, 244, 245, 0.9)",
+    input_background_fill_hover_dark="rgba(31, 31, 31, 0.55)",
+    input_background_fill_focus="rgba(229, 229, 234, 0.95)",
+    input_background_fill_focus_dark="rgba(31, 31, 31, 0.65)",
+    input_shadow="0 0 0 0 transparent",
+    input_shadow_dark="0 0 0 0 transparent",
+    input_shadow_focus="0 0 0 2px #fafafa, 0 0 0 3px #cccccc",
+    input_shadow_focus_dark="0 0 0 2px #0d0d0d, 0 0 0 3px #cccccc",
+    input_placeholder_color="*neutral_500",
+    input_placeholder_color_dark="#8c8c8c",
+    input_padding="8px 12px",
+    input_text_size="*text_sm",
+    input_text_weight="400",
+    # Form labels (BlockTitle): text-sm font-medium (colors set above)
+    block_title_text_size="*text_sm",
+    block_title_text_weight="500",
+    # Dropdown / popover elevation (§4 shadow-md)
+    shadow_drop="0 1px 2px 0 rgba(0, 0, 0, 0.12)",
+    shadow_drop_lg="0 4px 6px -1px rgba(0, 0, 0, 0.18), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
+    # Checkboxes: align border with inputs
+    checkbox_border_color="*neutral_300",
+    checkbox_border_color_dark="#242424",
+    checkbox_border_color_focus="#a1a1aa",
+    checkbox_border_color_focus_dark="#525252",
+    form_gap_width="12px",
 )
+# Top nav wordmark: on-light = black/dark ink (light bar, far left); on-dark = light ink (dark bar)
+NAV_LOGO_SVG_LIGHT = "assets/openhands-logotype-on-light.svg"
+NAV_LOGO_SVG_DARK = "assets/openhands-logotype-on-dark.svg"
 try:
-    with open(LOGO_PATH, "r") as f:
-        svg_content = f.read()
-    encoded_svg = urllib.parse.quote(svg_content)
-    home_icon_data_uri = f"data:image/svg+xml,{encoded_svg}"
-except FileNotFoundError:
-    logger.warning(f"Home icon file not found at {LOGO_PATH}")
-    home_icon_data_uri = "none"
-
-# Load dark mode logo (PNG)
-LOGO_DARK_PATH = "assets/logo-dark.png"
+    with open(NAV_LOGO_SVG_LIGHT, "r", encoding="utf-8") as _f:
+        _oh_nav_data_uri_light = f"data:image/svg+xml,{urllib.parse.quote(_f.read())}"
+except OSError:
+    _oh_nav_data_uri_light = "none"
 try:
-    import base64
-    with open(LOGO_DARK_PATH, "rb") as f:
-        dark_logo_content = f.read()
-    encoded_dark_logo = base64.b64encode(dark_logo_content).decode('utf-8')
-    home_icon_dark_data_uri = f"data:image/png;base64,{encoded_dark_logo}"
-except FileNotFoundError:
-    logger.warning(f"Dark mode logo file not found at {LOGO_DARK_PATH}")
-    home_icon_dark_data_uri = home_icon_data_uri  # Fallback to light logo
-
-# --- This is the final CSS ---
-final_css = css + f"""
-/* --- Find the "Home" button and replace its text with an icon --- */
-.nav-holder nav a[href$="/"] {{
-    display: none !important;
-}}
-.nav-holder nav a[href*="/home"] {{
-    grid-row: 1 !important;
-    grid-column: 1 !important;
-    justify-self: start !important;
-    display: flex !important;
-    align-items: center !important;
-    justify-content: center !important;
+    with open(NAV_LOGO_SVG_DARK, "r", encoding="utf-8") as _f:
+        _oh_nav_data_uri_dark = f"data:image/svg+xml,{urllib.parse.quote(_f.read())}"
+except OSError:
+    _oh_nav_data_uri_dark = "none"
+
+# Early decode to reduce first-paint logo flicker (data URI, no extra network)
+NAV_LOGO_PRELOAD = (
+    f'<span class="oh-nav-logotype-preload" aria-hidden="true" style="position:absolute;width:0;height:0;overflow:hidden;clip:rect(0,0,0,0)">'
+    f'<img src="{_oh_nav_data_uri_light}" width="160" height="40" alt="" decoding="async" fetchpriority="high"/>'
+    f'<img src="{_oh_nav_data_uri_dark}" width="160" height="40" alt="" decoding="async" fetchpriority="low"/>'
+    f"</span>"
+)
 
-    /* 2. Hide the original "Home" text */
+# --- This is the final CSS --- (appended after content.css so it wins the cascade for Home)
+final_css = (
+    css
+    + f"""
+/* Multipage: trim duplicate /, hide unstyled duplicate Gradio <a> */
+gradio-app nav a[href$="/"] {{ display: none !important; }}
+gradio-app .nav-holder nav a[href="/home"]:not(.oh-nav-link) {{ display: none !important; }}
+/* Wordmark (Gradio /home): pinned top-left; no transition (reduces paint flicker) */
+gradio-app nav.svelte-ti537g a[href*="/home"],
+gradio-app .nav-holder nav a[href*="/home"],
+gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"] {{
+    position: absolute !important;
+    left: 20px !important;
+    top: 0 !important;
+    bottom: 0 !important;
+    margin: auto 0 !important;
+    z-index: 2 !important;
+    display: inline-flex !important;
+    align-items: center !important;
     font-size: 0 !important;
+    line-height: 0 !important;
     text-indent: -9999px;
-
-    /* 3. Apply the icon as the background (light mode) */
-    background-image: url("{home_icon_data_uri}") !important;
+    color: transparent !important;
+    overflow: hidden !important;
+    width: min(133px, 42vw) !important;
+    min-width: 80px !important;
+    min-height: 22px !important;
+    max-width: 133px !important;
+    height: 22px !important;
+    max-height: 22px !important;
+    box-sizing: content-box !important;
+    padding: 6px 12px 6px 12px !important;
+    flex: 0 0 auto !important;
+    flex-shrink: 0 !important;
+    background-color: transparent !important;
+    background-image: url("{_oh_nav_data_uri_light}") !important;
     background-size: contain !important;
     background-repeat: no-repeat !important;
-    background-position: center !important;
-
-    width: 240px !important;    
-    height: 50px !important;   
-    padding: 0 !important;
+    background-position: left center !important;
     border: none !important;
-    outline: none !important;
+    box-shadow: none !important;
+    border-radius: 6px !important;
+    transition: none !important;
 }}
-
-/* Dark mode logo override */
-.dark .nav-holder nav a[href*="/home"] {{
-    background-image: url("{home_icon_dark_data_uri}") !important;
+/* Dark top bar: light-colored wordmark */
+html.dark gradio-app nav.svelte-ti537g a[href*="/home"],
+html.dark gradio-app .nav-holder nav a[href*="/home"],
+html.dark gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"],
+body.dark gradio-app nav.svelte-ti537g a[href*="/home"],
+body.dark gradio-app .nav-holder nav a[href*="/home"],
+body.dark gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"],
+html:has([class*="gradio-container-"].dark) gradio-app nav.svelte-ti537g a[href*="/home"],
+html:has([class*="gradio-container-"].dark) gradio-app .nav-holder nav a[href*="/home"],
+html:has([class*="gradio-container-"].dark) gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"],
+.gradio-container.dark gradio-app nav.svelte-ti537g a[href*="/home"],
+.gradio-container.dark gradio-app .nav-holder nav a[href*="/home"],
+.gradio-container.dark gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"],
+[class*="gradio-container-"].dark gradio-app nav.svelte-ti537g a[href*="/home"],
+[class*="gradio-container-"].dark gradio-app .nav-holder nav a[href*="/home"],
+[class*="gradio-container-"].dark gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"] {{
+    background-image: url("{_oh_nav_data_uri_dark}") !important;
+}}
+/* Home wordmark: no grey hover/focus chip */
+gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"]:hover,
+gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"]:focus-visible,
+gradio-app nav.svelte-ti537g a[href*="/home"]:hover,
+html.dark gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"]:hover,
+html.dark gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"]:focus-visible,
+html.dark gradio-app nav.svelte-ti537g a[href*="/home"]:hover,
+body.dark gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"]:hover,
+body.dark gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"]:focus-visible,
+body.dark gradio-app nav.svelte-ti537g a[href*="/home"]:hover,
+html:has([class*="gradio-container-"].dark) gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"]:hover,
+html:has([class*="gradio-container-"].dark) gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"]:focus-visible,
+html:has([class*="gradio-container-"].dark) gradio-app nav.svelte-ti537g a[href*="/home"]:hover,
+.gradio-container.dark gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"]:hover,
+.gradio-container.dark gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"]:focus-visible,
+.gradio-container.dark gradio-app nav.svelte-ti537g a[href*="/home"]:hover,
+[class*="gradio-container-"].dark gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"]:hover,
+[class*="gradio-container-"].dark gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"]:focus-visible,
+[class*="gradio-container-"].dark gradio-app nav.svelte-ti537g a[href*="/home"]:hover {{
+    background-color: transparent !important;
+}}
+@media (max-width: 768px) {{
+  gradio-app nav.svelte-ti537g a[href*="/home"],
+  gradio-app .nav-holder nav a[href*="/home"],
+  gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"] {{
+    left: 20px !important;
+  }}
+  gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"]:hover,
+  gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"]:focus-visible,
+  gradio-app nav.svelte-ti537g a[href*="/home"]:hover {{
+    left: 20px !important;
+  }}
+}}
+/* Active Home (wordmark — route .active) */
+gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"].active,
+gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"].svelte-ti537g.active {{
+    color: transparent !important;
+    left: 20px !important;
+    top: 0 !important;
+    bottom: 0 !important;
+    margin: auto 0 !important;
+    background-color: #e4e4e7 !important;
+    background-image: url("{_oh_nav_data_uri_light}") !important;
+    background-size: contain !important;
+    background-repeat: no-repeat !important;
+    background-position: left center !important;
+    border-color: transparent !important;
+    box-shadow: none !important;
+}}
+html.dark gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"].active,
+html.dark gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"].svelte-ti537g.active,
+body.dark gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"].active,
+body.dark gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"].svelte-ti537g.active,
+html:has([class*="gradio-container-"].dark) gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"].active,
+html:has([class*="gradio-container-"].dark) gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"].svelte-ti537g.active,
+.gradio-container.dark gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"].active,
+.gradio-container.dark gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"].svelte-ti537g.active,
+[class*="gradio-container-"].dark gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"].active,
+[class*="gradio-container-"].dark gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"].svelte-ti537g.active {{
+    background-color: hsl(0 0% 12% / 0.95) !important;
+    background-image: url("{_oh_nav_data_uri_dark}") !important;
+}}
+@media (max-width: 768px) {{
+  gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"].active,
+  gradio-app nav.oh-top-nav a.oh-nav-link[href*="/home"].svelte-ti537g.active {{
+    left: 20px !important;
+  }}
+}}
+/* Markdown `---` → <hr>. var(--oh-border) = light #e4e4e7 / dark #242424 (content.py). */
+gradio-app hr, .gradio-container hr, [class*="gradio-container-"] hr {{
+    box-sizing: border-box !important;
+    border: 0 !important;
+    border-top: 1px solid var(--oh-border) !important;
+    color: var(--oh-border) !important;
+    background: transparent !important;
+    background-color: transparent !important;
+    height: 0 !important;
+    opacity: 1 !important;
+}}
+/* Multipage route chips: Gradio 5.30 index bundle sets
+   a.active.svelte-ti537g {{ color: var(--body-text-color); background: var(--block-background-fill) }}.
+   This block is last in final_css; typography matches route chip rules in content.py (13px) for every tab including active. */
+gradio-app nav a.svelte-ti537g.active:not([href*="/home"]) {{
+    color: #fafafa !important;
+    background-color: #18181b !important;
+    border-color: transparent !important;
+    box-shadow: none !important;
+    transition: none !important;
+    font-size: 13px !important;
+    line-height: 1.4 !important;
+    font-weight: 400 !important;
+    font-family: var(--oh-font-sans) !important;
+}}
+html.dark gradio-app nav a.svelte-ti537g.active:not([href*="/home"]),
+body.dark gradio-app nav a.svelte-ti537g.active:not([href*="/home"]),
+html:has([class*="gradio-container-"].dark) gradio-app nav a.svelte-ti537g.active:not([href*="/home"]),
+.gradio-container.dark gradio-app nav a.svelte-ti537g.active:not([href*="/home"]),
+[class*="gradio-container-"].dark gradio-app nav a.svelte-ti537g.active:not([href*="/home"]) {{
+    color: #ffffff !important;
+    background-color: hsl(0 0% 12% / 0.95) !important;
+    border-color: transparent !important;
+    box-shadow: none !important;
+    transition: none !important;
+    font-size: 13px !important;
+    line-height: 1.4 !important;
+    font-weight: 400 !important;
+    font-family: var(--oh-font-sans) !important;
 }}
 """
+)
 # --- Gradio App Definition ---
 logger.info("Creating Gradio application")
 demo = gr.Blocks(
     theme=theme,
     css=final_css,
-    head=posthog_script + scroll_script + redirect_script + fix_nav_links_script + tooltip_script + dark_mode_script,
+    head=DESIGN_FONTS_LINK
+    + NAV_LOGO_PRELOAD
+    + posthog_script
+    + scroll_script
+    + redirect_script
+    + oh_top_nav_script
+    + fix_nav_links_script
+    + tooltip_script
+    + dark_mode_script,
     title="OpenHands Index",
 )
 
@@ -424,7 +783,16 @@ if __name__ == "__main__":
     # Respect platform port/host if provided (e.g., OpenHands runtime)
     port = int(os.environ.get("PORT", os.environ.get("GRADIO_SERVER_PORT", 7860)))
     host = os.environ.get("HOST", os.environ.get("GRADIO_SERVER_NAME", "0.0.0.0"))
-    logger.info(f"Launching app on {host}:{port}")
-    uvicorn.run(app, host=host, port=port)
+    # Auto-reload: set RELOAD=1 or UVICORN_RELOAD=1 to restart on .py changes (CSS in content.py, etc.)
+    _reload = os.environ.get("UVICORN_RELOAD", os.environ.get("RELOAD", "")).lower() in (
+        "1",
+        "true",
+        "yes",
+    )
+    logger.info(f"Launching app on {host}:{port}" + (" (auto-reload on .py changes)" if _reload else ""))
+    if _reload:
+        uvicorn.run("app:app", host=host, port=port, reload=True)
+    else:
+        uvicorn.run(app, host=host, port=port)
     logger.info("App launched successfully")
 

constants.py

@@ -1,8 +1,11 @@
 # Single source of truth for styling constants
+# Aligned with OpenHands-Design (Inter + JetBrains Mono)
 
 # Font settings
-FONT_FAMILY = "Arial, sans-serif"
-FONT_FAMILY_SHORT = "Arial"  # For places that don't accept fallbacks
+FONT_FAMILY = "'Inter', system-ui, sans-serif"
+FONT_FAMILY_MONO = "'JetBrains Mono', ui-monospace, monospace"
+FONT_MONO_NAME = "JetBrains Mono"  # First font for gr.themes.Base(font_mono=...)
+FONT_FAMILY_SHORT = "Inter"  # Gradio theme / primary stack name
 
 # Marker options for plot icons
 MARK_BY_COMPANY = "Company"

content.py

@@ -17,16 +17,13 @@ def create_gradio_anchor_id(text: str, validation) -> str:
 TITLE = """<h1 align="left" id="space-title">OpenHands Index</h1>"""
 
 INTRO_PARAGRAPH = """
+<h1 class="intro-page-title">The OpenHands Index</h1>
 <p>
-    The <strong>OpenHands Index</strong> is a comprehensive benchmark for evaluating AI coding agents across real-world software engineering tasks. As agents become more capable, we need ways to measure their performance across diverse challenges, from fixing bugs to building applications.
+    This is a comprehensive benchmark for evaluating AI coding agents across real-world software engineering tasks. As agents become more capable, we need ways to measure their performance across diverse challenges, from fixing bugs to building applications.
 </p>
-
-
 <p>
-    The OpenHands Index assesses models across five categories: <strong>Issue Resolution</strong> (fixing bugs), <strong>Greenfield</strong> (building new apps), <strong>Frontend</strong> (UI development), <strong>Testing</strong> (test generation), and <strong>Information Gathering</strong>. All models are currently evaluated using the <a href="https://github.com/OpenHands/software-agent-sdk">OpenHands Software Agent SDK</a>. This provides a single view of both <strong>performance</strong> and <strong>cost efficiency</strong>, enabling fair comparisons between agents.
+    The index assesses models across five categories: <strong>Issue Resolution</strong> (fixing bugs), <strong>Greenfield</strong> (building new apps), <strong>Frontend</strong> (UI development), <strong>Testing</strong> (test generation), and <strong>Information Gathering</strong>. All models are currently evaluated using the <a href="https://github.com/OpenHands/software-agent-sdk">OpenHands Software Agent SDK</a>. This provides a single view of both <strong>performance</strong> and <strong>cost efficiency</strong>, enabling fair comparisons between agents.
 </p>
-
-
 <p>
     For methodology details, see the <a href="/about" class="intro-link">About</a> page.
 </p>
@@ -235,45 +232,234 @@ def hf_uri_to_web_url(uri: str) -> str:
 
 
 css = """
-/* CSS Color Variables aligned with OpenHands brand (openhands-ui/tokens.css) */
+/* OpenHands-Design tokens (OpenHands-Design/index.html, DESIGN.md) */
 :root {
-    /* Primary - Yellow */
-    --color-primary-accent: #FFE165;
-    --color-primary-light: #FFF3C0;
-    --color-primary-dark: #BBA54A;
-    
-    /* Secondary - Green */
-    --color-secondary-accent: #BCFF8C;
-    --color-secondary-dark: #577641;
-    
-    /* Neutral - Grey scale */
-    --color-neutral-50: #F7F8FB;
-    --color-neutral-100: #EBEDF3;
-    --color-neutral-200: #D4D8E7;
-    --color-neutral-300: #B1B9D3;
-    --color-neutral-700: #2F3137;
-    --color-neutral-800: #222328;
-    --color-neutral-900: #18191C;
-    --color-neutral-950: #0D0D0F;
-    
-    /* Semantic colors */
-    --color-primary-link: #2F3137;
-    --color-primary-link-dark: #B1B9D3;
-    --color-background-light: #F7F8FB;
-    --color-background-dark: #18191C;
-    --color-text-dark: #0D0D0F;
-    --color-text-light: #F7F8FB;
-    --color-button-hover: #222328;
-    
-    /* Danger/Error - Red */
-    --color-danger: #FF684E;
+  --oh-bg: hsl(0 0% 5%);
+  --oh-card: hsl(0 0% 7%);
+  --oh-secondary: hsl(0 0% 8%);
+  --oh-muted: hsl(0 0% 12%);
+  /* Light mode: 1px strokes / dividers — same grey as top nav bar (#e4e4e7 zinc-200) */
+  --oh-border: #e4e4e7;
+  /* Slightly stronger on interactive hover (zinc-300) */
+  --oh-border-hover: #d4d4d8;
+  --oh-muted-hover: hsl(0 0% 18%);
+  --oh-fg: hsl(0 0% 98%);
+  --oh-fg-muted: hsl(0 0% 55%);
+  --oh-primary: hsl(0 0% 100%);
+  --oh-primary-fg: hsl(0 0% 0%);
+  --oh-success: #22c55e;
+  --oh-success-fg: #86efac;
+  --oh-warning: #f59e0b;
+  --oh-info: #3b82f6;
+  --oh-destructive: #dc2626;
+  --oh-ring: #cccccc;
+  --oh-shadow-card: 0 1px 2px 0 hsl(0 0% 0% / 0.3);
+  --oh-font-sans: 'Inter', system-ui, sans-serif;
+  --oh-font-mono: 'JetBrains Mono', ui-monospace, monospace;
+  /* DESIGN.md §5: spacing (4px scale) — index.html / section rhythm */
+  --oh-pad-x-page: 24px;
+  /* DESIGN.md: container max 1400px — page column + #page-content-wrapper */
+  --oh-content-max: 87.5rem;
+  /* DESIGN.md §4: dropdown item hover (light / dark) */
+  --oh-form-hover-light: #f4f4f5;
+  --oh-form-active-dark: hsl(0 0% 12% / 0.6);
+  --oh-pad-y-section: 4rem;              /* 64px — .section in index.html */
+  --oh-gap-prose-paragraph: 1rem;         /* 16px — gap-4 */
+  --oh-gap-prose-tight: 0.5rem;           /* 8px — gap-2 */
+  --oh-prose-size: 0.875rem;              /* 14px — text-sm, primary body */
+  --oh-prose-leading: 1.5rem;            /* 24px — leading-6 w/ text-sm */
+  /* DESIGN.md: inline links use --info; focus ring = --oh-ring */
+  --oh-link-visited: hsl(217 60% 48%);
+  --oh-link-hover: hsl(217 85% 62%);
+  /* Legacy var names (charts, tables) — mapped to design surfaces */
+  --color-primary-accent: #e8e8e5;
+  --color-primary-light: #f5f5f4;
+  --color-primary-dark: #a1a1aa;
+  --color-secondary-accent: #22c55e;
+  --color-secondary-dark: #16a34a;
+  --color-neutral-50: #fafafa;
+  --color-neutral-100: #f4f4f4;
+  --color-neutral-200: #e5e5e5;
+  --color-neutral-300: #d4d4d4;
+  --color-neutral-700: #404040;
+  --color-neutral-800: #262626;
+  --color-neutral-900: #171717;
+  --color-neutral-950: #0d0d0d;
+  --color-primary-link: #404040;
+  --color-primary-link-dark: #a3a3a3;
+  --color-background-light: #fafafa;
+  --color-background-dark: #0d0d0d;
+  --color-text-dark: #0d0d0d;
+  --color-text-light: #fafafa;
+  --color-button-hover: #404040;
+  --color-danger: #dc2626;
+}
+
+/* Dark theme: near-black strokes (DESIGN.md --border / #242424) */
+html.dark,
+body.dark,
+html:has([class*="gradio-container-"].dark),
+.gradio-container.dark,
+[class*="gradio-container-"].dark {
+  --oh-border: hsl(0 0% 14%);
+  --oh-border-hover: hsl(0 0% 24%);
+}
+
+body, .gradio-container {
+  font-family: var(--oh-font-sans) !important;
+  -webkit-font-smoothing: antialiased;
+}
+code, kbd, pre, .cell-wrap.svelte-v1pjjd {
+  font-family: var(--oh-font-mono) !important;
+}
+
+/* Markdown `---` → <hr>. Gradio preflight uses color:inherit on hr, which tracks body text, not the border line. */
+/* Section divider: 1px solid var(--oh-border) — light #e4e4e7 (top nav), dark #242424 */
+gradio-app hr,
+.gradio-container hr,
+#about-page-content-wrapper hr,
+#page-content-wrapper hr,
+.prose hr,
+div[class*="markdown"] hr,
+.divider-line hr,
+[class~="divider-line"] hr {
+    box-sizing: border-box;
+    display: block;
+    height: 0 !important;
+    margin: 0.75rem 0 1.5rem 0;
+    padding: 0 !important;
+    border: 0 !important;
+    border-top: 1px solid var(--oh-border) !important;
+    background: transparent !important;
+    background-color: transparent !important;
+    /* Some UAs use `color` for the default <hr> border; lock to the border token (not --body-text-color) */
+    color: var(--oh-border) !important;
+    opacity: 1 !important;
 }
 
-/* This makes space for the huggingface header bar which must shown on HF spaces. */
-/* FIXME Media queries don't seem to survive rendering. */
-/* @media (min-width: 768px) { ... } */
+/* No top padding on gradio-app (control_page_title is a prop on this element) */
 gradio-app {
-    padding-top: 65px;
+    padding-top: 0;
+    overflow: visible !important;
+    display: block;
+}
+/* In-flow strip so the fixed <nav> does not sit on top of the first line of main content */
+gradio-app::before {
+    content: "" !important;
+    display: block !important;
+    width: 100% !important;
+    height: 56px !important;
+    flex-shrink: 0 !important;
+    pointer-events: none !important;
+}
+html {
+    scroll-padding-top: 56px;
+    min-height: 100%;
+    /* Full-viewport canvas; match body/gradio so gutter + Gradio block fills never show a wrong tone (About’s lighter DOM hides this) */
+    background-color: var(--color-background-light, #fafafa);
+}
+html.dark,
+html:has([class*="gradio-container-"].dark) {
+    background-color: var(--color-background-dark, #0d0d0d);
+}
+/* Main column: cap width to match DESIGN.md; nav stays full-bleed (sibling, not inside .main) */
+gradio-app .main,
+gradio-app .main.fillable {
+    max-width: var(--oh-content-max) !important;
+    margin-left: auto !important;
+    margin-right: auto !important;
+    width: 100% !important;
+    box-sizing: border-box !important;
+}
+/*
+ * OpenHands-Design §4: Dropdown — menu z-index, min-w, border bg-popover, shadow-md, p-1
+ * + menu item: text-sm, rounded-md, px-2 py-1.5, data-[highlighted]:bg-muted/60
+ * Gradio uses ul.options / li.item; active row uses bg-gray-100 / dark:bg-gray-600 — override to tokens.
+ */
+gradio-app ul.options {
+    border: 1px solid var(--border-color-primary) !important;
+    border-radius: 0.25rem !important;
+    padding: 0.25rem !important;
+    background: var(--background-fill-primary) !important;
+    box-shadow: var(--shadow-drop-lg) !important;
+    scrollbar-width: thin;
+    scrollbar-color: hsl(0 0% 55% / 0.45) transparent;
+}
+gradio-app ul.options li.item {
+    font-size: 0.875rem !important;
+    line-height: 1.25rem;
+    border-radius: 0.25rem;
+    padding: 0.375rem 0.5rem !important;
+    margin: 0 0.125rem;
+    transition: color 0.2s ease, background-color 0.2s ease;
+}
+/* Light: hover / keyboard highlight — neutral chip */
+gradio-app ul.options li.item:hover,
+gradio-app ul.options li.item.active {
+    background-color: var(--oh-form-hover-light) !important;
+}
+/* Dark: canonical hover:bg-muted/60 (DESIGN.md §2) */
+html.dark gradio-app ul.options li.item:hover,
+html.dark gradio-app ul.options li.item.active,
+body.dark gradio-app ul.options li.item:hover,
+body.dark gradio-app ul.options li.item.active,
+html:has([class*="gradio-container-"].dark) gradio-app ul.options li.item:hover,
+html:has([class*="gradio-container-"].dark) gradio-app ul.options li.item.active,
+.gradio-container.dark gradio-app ul.options li.item:hover,
+.gradio-container.dark gradio-app ul.options li.item.active,
+[class*="gradio-container-"].dark gradio-app ul.options li.item:hover,
+[class*="gradio-container-"].dark gradio-app ul.options li.item.active {
+    background-color: var(--oh-form-active-dark) !important;
+    color: var(--body-text-color) !important;
+}
+/* Touch target: min h-10 (40px) for dropdown / text field wrap (DESIGN.md §8) */
+gradio-app .container > .wrap > .wrap-inner {
+    min-height: 2.5rem;
+    box-sizing: border-box;
+    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+}
+/* Leaderboard filter column: form stacks checkboxes with no gap (Gradio form uses --form-gap-width) */
+gradio-app .column.oh-leaderboard-filter-col .form {
+    gap: 0 !important;
+}
+/* Gradio root: overflow: hidden; — keep visible; sticky still fails if scroll is on an inner .main, so nav uses position: fixed */
+body > [class*="gradio-container-"],
+body > div.gradio-container,
+body > [class^="gradio-container"] {
+    overflow: visible !important;
+}
+/* Multipage top <nav> — fixed + opaque background + single bottom edge (see .nav-holder: border removed) */
+gradio-app nav.svelte-ti537g {
+    position: fixed !important;
+    top: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    width: 100% !important;
+    z-index: 200 !important;
+    min-height: 56px !important;
+    height: 56px !important;
+    max-height: 56px !important;
+    box-sizing: border-box !important;
+    display: flex !important;
+    align-items: center !important;
+    flex-wrap: nowrap !important;
+    /* Default = light top bar (Gradio / :root use dark design tokens, so we don’t use --oh-bg here) */
+    background: #fafafa !important;
+    background-color: #fafafa !important;
+    border-bottom: 1px solid #e4e4e7 !important;
+    box-shadow: none !important;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+}
+/* Dark theme: restore near-black bar (html/body, or any [class*=gradio-container-] with .dark) */
+html.dark gradio-app nav.svelte-ti537g,
+body.dark gradio-app nav.svelte-ti537g,
+html:has([class*="gradio-container-"].dark) gradio-app nav.svelte-ti537g,
+.gradio-container.dark gradio-app nav.svelte-ti537g,
+[class*="gradio-container-"].dark gradio-app nav.svelte-ti537g {
+    background: var(--oh-bg) !important;
+    background-color: var(--oh-bg) !important;
+    border-bottom: 1px solid var(--oh-border) !important;
 }
 
 /* Global Styles */
@@ -281,42 +467,117 @@ h2 {
     overflow: hidden;
 }
 
-/* Global link color styles */
-.dark a {
-    color: var(--color-primary-link-dark);
-}
-.dark a:hover {
-    color: #dddddd;
-}
-.dark a:visited {
-    color: #bbbbbb;
+/* In-content links (DESIGN.md — semantic info for links; top nav is outside #page-content-wrapper) */
+#page-content-wrapper a[href],
+#about-page-content-wrapper a[href],
+#about-content a[href],
+#category-intro a[href],
+#intro-paragraph a[href],
+#intro-category-paragraph a[href],
+.prose a[href],
+table.gr-table a[href] {
+    color: var(--oh-info) !important;
+    text-decoration: none;
+    transition: color 0.2s ease;
+}
+#page-content-wrapper a[href]:hover,
+#about-page-content-wrapper a[href]:hover,
+#about-content a[href]:hover,
+#category-intro a[href]:hover,
+#intro-paragraph a[href]:hover,
+#intro-category-paragraph a[href]:hover,
+.prose a[href]:hover,
+table.gr-table a[href]:hover {
+    color: var(--oh-link-hover) !important;
+}
+#page-content-wrapper a[href]:visited,
+#about-page-content-wrapper a[href]:visited,
+#about-content a[href]:visited,
+#category-intro a[href]:visited,
+#intro-paragraph a[href]:visited,
+#intro-category-paragraph a[href]:visited,
+.prose a[href]:visited,
+table.gr-table a[href]:visited {
+    color: var(--oh-link-visited) !important;
+}
+#page-content-wrapper a[href]:focus-visible,
+#about-page-content-wrapper a[href]:focus-visible,
+#about-content a[href]:focus-visible,
+#category-intro a[href]:focus-visible,
+#intro-paragraph a[href]:focus-visible,
+#intro-category-paragraph a[href]:focus-visible,
+.prose a[href]:focus-visible,
+table.gr-table a[href]:focus-visible {
+    outline: 2px solid var(--oh-ring);
+    outline-offset: 2px;
+    border-radius: 2px;
 }
 
 #intro-paragraph {
-    font-size: 18px;
-    max-width: 90%;
-    padding-left: 35px;
-    margin-top: 20px;
+    font-size: var(--oh-prose-size);
+    max-width: min(100%, 52rem);
+    padding-left: 0;
+    padding-right: 0;
+    margin-top: 0;
+    margin-bottom: var(--oh-gap-prose-paragraph);
+}
+/* Theme-aware: Gradio’s --body-text-color (matches light/dark theme); prose overrides need same specificity */
+#intro-paragraph h1.intro-page-title,
+#intro-paragraph .prose h1.intro-page-title {
+    font-size: clamp(2rem, 2.5rem + 1.2vw, 2.75rem) !important;
+    font-weight: 600 !important;
+    line-height: 1.1 !important;
+    letter-spacing: -0.03em !important;
+    margin: 0 0 1.25rem 0 !important;
+    color: var(--body-text-color, var(--color-neutral-950)) !important;
+    text-align: left;
+}
+html.dark #intro-paragraph h1.intro-page-title,
+html.dark #intro-paragraph .prose h1.intro-page-title,
+body.dark #intro-paragraph h1.intro-page-title,
+body.dark #intro-paragraph .prose h1.intro-page-title,
+.gradio-container.dark #intro-paragraph h1.intro-page-title,
+.gradio-container.dark #intro-paragraph .prose h1.intro-page-title,
+[class*="gradio-container-"].dark #intro-paragraph h1.intro-page-title,
+[class*="gradio-container-"].dark #intro-paragraph .prose h1.intro-page-title {
+    color: var(--body-text-color, var(--oh-fg)) !important;
+}
+#intro-paragraph .html-container,
+#intro-paragraph .prose {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+    margin-left: 0 !important;
 }
 
 #intro-paragraph p,
 #intro-paragraph li {
-    font-size: 16px; 
-    line-height: 1.8; 
+    font-size: var(--oh-prose-size);
+    line-height: var(--oh-prose-leading);
+}
+#intro-paragraph p,
+#intro-paragraph .prose p {
+    margin: 0 0 var(--oh-gap-prose-paragraph) 0;
+}
+#intro-paragraph p:last-child {
+    margin-bottom: 0;
 }
 
-/* Links in intro paragraph */
+/* DESIGN.md: Label pattern — same link token, medium weight for explicit intro-link */
 .intro-link {
-    color: var(--color-primary-link);
-    text-decoration: underline;
+    color: var(--oh-info) !important;
+    text-decoration: none;
+    font-weight: 500;
 }
-.dark .intro-link {
-    color: var(--color-primary-link-dark);
+.intro-link:hover {
+    color: var(--oh-link-hover) !important;
 }
 
 #intro-paragraph ul {
-    margin-top: 20px;
-    margin-bottom: 20px;
+    margin: var(--oh-gap-prose-paragraph) 0;
+    padding-left: 1.25rem;
+}
+#intro-paragraph ul li + li {
+    margin-top: 0.35em;
 }
 
 #diagram-image {
@@ -329,40 +590,82 @@ h2 {
     object-fit: cover; 
 }
 #intro-category-paragraph {
-    font-size: 18px;
-    max-width: 90%;
-    margin-top: 20px;
+    font-size: var(--oh-prose-size);
+    max-width: min(100%, 52rem);
+    margin-top: 1.5rem;
+    margin-bottom: var(--oh-gap-prose-paragraph);
 }
 
 #intro-category-paragraph p,
 #intro-category-paragraph li {
-    font-size: 16px; 
-    line-height: 1.8; 
+    font-size: var(--oh-prose-size);
+    line-height: var(--oh-prose-leading);
+}
+#intro-category-paragraph p {
+    margin: 0 0 var(--oh-gap-prose-paragraph) 0;
+}
+#intro-category-paragraph p:last-child {
+    margin-bottom: 0;
 }
 
 #intro-category-paragraph ul {
-    margin-top: 20px;
-    margin-bottom: 20px;
+    margin: var(--oh-gap-prose-paragraph) 0;
+    padding-left: 1.25rem;
+}
+#intro-category-paragraph ul li + li {
+    margin-top: 0.35em;
 }
 
 #about-content {
-    font-size: 18px;
-    max-width: 60%;
-    padding-left: 25px;
+    font-size: var(--oh-prose-size);
+    line-height: var(--oh-prose-leading);
+    max-width: min(100%, 42rem);
+    padding-left: 0;
+    margin-bottom: var(--oh-pad-y-section);
+}
+#about-content p {
+    margin: 0 0 var(--oh-gap-prose-paragraph) 0;
+}
+#about-content p:last-child {
+    margin-bottom: 0;
 }
 #category-intro {
-    font-size: 18px;
-    max-width: 60%;
+    font-size: var(--oh-prose-size);
+    line-height: var(--oh-prose-leading);
+    max-width: min(100%, 42rem);
+    margin-bottom: var(--oh-gap-prose-paragraph);
+}
+#category-intro p {
+    margin: 0 0 var(--oh-gap-prose-paragraph) 0;
+}
+#category-intro p:last-child {
+    margin-bottom: 0;
 }
 #logo-image { 
     margin: 0;
-    margin-bottom: 30px; 
+    margin-bottom: 2rem; 
     justify-content: flex-start;        
-    max-width: 250px;       
+    max-width: 250px;           
     height: auto;           
 }
-#page-content-wrapper{
-    padding-left: 25px;
+/* index.html hero/section: comfortable row gap for intro + diagram */
+#intro-row {
+    gap: 1.5rem;
+    align-items: flex-start;
+    width: 100%;
+}
+/* DESIGN.md: container max 1400px, horizontal padding 24px (index .section) */
+#page-content-wrapper {
+    box-sizing: border-box;
+    width: 100%;
+    max-width: min(100%, var(--oh-content-max));
+    margin-left: auto;
+    margin-right: auto;
+    /* Match home: gradio-app::before (56px nav) + intro-paragraph’s former margin-top */
+    padding: 1.5rem var(--oh-pad-x-page) 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem; /* gap-6 between major blocks */
 }
 .table-component{
     height: auto !important;
@@ -383,7 +686,7 @@ table.svelte-1e98i6s td {
     vertical-align: top !important;
 }
 table.gr-table {
-    font-size: 15px !important;
+    font-size: 14px !important;
 }
 .html-container {
     padding-top: 0 !important;
@@ -392,22 +695,152 @@ table.gr-table {
         overflow: visible !important;
 }
 #pareto-disclaimer {
-    color: var(--color-primary-accent) !important;
+    color: var(--oh-success) !important;
 }
 thead.svelte-1e98i6s th {
-    background: white !important;
+    background: var(--color-neutral-50) !important;
 }
 .dark thead.svelte-1e98i6s th {
-    background: var(--color-background-dark) !important;
+    background: var(--color-neutral-900) !important;
 }
 .cell-wrap.svelte-v1pjjd {
-    font-family: Arial, sans-serif;
-    }
+    font-family: var(--oh-font-mono) !important;
+}
+/* Gradio 5.30: top route row — right-align; left padding reserves zone for wordmark (app.py) */
+gradio-app .nav-holder > nav.svelte-ti537g,
+gradio-app .nav-holder nav.svelte-ti537g,
+gradio-app nav.svelte-ti537g {
+    margin: 0 !important;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+    width: 100% !important;
+    max-width: none !important;
+    box-sizing: border-box !important;
+    justify-content: flex-end !important;
+    padding: 0 20px 0 164px !important;
+}
 nav.svelte-ti537g.svelte-ti537g {
-    justify-content: flex-start;
+    justify-content: flex-end !important;
+}
+/* First paint: default route chip text only — not .active (Gradio gives .active the block fill; we override in app.py last) */
+gradio-app nav.svelte-ti537g > a[href]:not([href*="/home"]):not(.active) {
+    font-size: 13px !important;
+    font-weight: 400 !important;
+    line-height: 1.4 !important;
+    color: #71717a !important;
+    padding: 6px 12px !important;
+    border-radius: 6px !important;
+    white-space: nowrap !important;
+}
+html.dark gradio-app nav.svelte-ti537g > a[href]:not([href*="/home"]):not(.active),
+body.dark gradio-app nav.svelte-ti537g > a[href]:not([href*="/home"]):not(.active),
+html:has([class*="gradio-container-"].dark) gradio-app nav.svelte-ti537g > a[href]:not([href*="/home"]):not(.active),
+.gradio-container.dark gradio-app nav.svelte-ti537g > a[href]:not([href*="/home"]):not(.active),
+[class*="gradio-container-"].dark gradio-app nav.svelte-ti537g > a[href]:not([href*="/home"]):not(.active) {
+    color: var(--oh-fg-muted) !important;
+}
+/* Dedupe & trim root link before/after .oh-top-nav (mirrors app.py) */
+gradio-app nav.svelte-ti537g a[href$="/"] {
+    display: none !important;
+}
+gradio-app .nav-holder nav a[href="/home"]:not(.oh-nav-link) {
+    display: none !important;
+}
+/* Gradio: .nav-holder had border-bottom in flow while <nav> is position:fixed — that border scrolled (moving line). No border/background on holder; edge lives on <nav> only. */
+gradio-app .nav-holder,
+.nav-holder.svelte-ti537g.svelte-ti537g {
+    padding: 0 !important;
+    border: none !important;
+    border-bottom: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    width: 100% !important;
+    max-width: none !important;
+    text-align: left !important;
+}
+/* Gradio 5.30: default nav has horizontal margin/padding; keep bar tight */
+nav.oh-top-nav.svelte-ti537g.svelte-ti537g {
+    margin: 0 !important;
+}
+/* .oh-top-nav is applied by oh_top_nav_script — Gradio 5.30+ has no .nav-holder */
+.oh-top-nav {
+    position: fixed !important;
+    top: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    z-index: 200 !important;
+    flex: 0 0 auto !important;
+    display: flex !important;
+    flex-direction: row !important;
+    flex-flow: row nowrap !important;
+    flex-wrap: nowrap !important;
+    align-items: center !important;
+    align-content: center !important;
+    justify-content: flex-end !important;
+    gap: 4px !important;
+    height: 56px !important;
+    min-height: 56px !important;
+    max-height: 56px !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    box-sizing: border-box !important;
+    padding: 0 20px 0 164px !important;
+    margin: 0 !important;
+    /* Opaque bar — default light; dark overrides follow */
+    background: #fafafa !important;
+    background-color: #fafafa !important;
+    backdrop-filter: none !important;
+    -webkit-backdrop-filter: none !important;
+    border-bottom: 1px solid #e4e4e7 !important;
+    box-shadow: none !important;
+    overflow: visible !important;
+    list-style: none !important;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+}
+/* Gradio .fillable limits max-width at breakpoints; keep route bar edge-to-edge (nav can be .fillable.svelte-ti537g) */
+nav.oh-top-nav.fillable,
+.oh-top-nav.fillable,
+nav.fillable.oh-top-nav,
+nav.oh-top-nav.svelte-ti537g.fillable {
+    max-width: none !important;
+    width: 100% !important;
 }
-.nav-holder {
-    padding-left: 20px !important;
+/* Dark top bar: document and/or .dark on Gradio container (including :has when only container is .dark) */
+html.dark .oh-top-nav,
+body.dark .oh-top-nav,
+html:has([class*="gradio-container-"].dark) .oh-top-nav,
+.gradio-container.dark .oh-top-nav,
+[class*="gradio-container-"].dark .oh-top-nav {
+    background: var(--oh-bg) !important;
+    background-color: var(--oh-bg) !important;
+    border-bottom: 1px solid var(--oh-border) !important;
+    backdrop-filter: none !important;
+    -webkit-backdrop-filter: none !important;
+}
+/* Active route chip visuals: see app.py final_css (appended after this file; must beat Gradio a.active.svelte-ti537g) */
+/* Avoid double line: nav border-bottom + first block border-top */
+.oh-top-nav + * {
+    border-top: none !important;
+    box-shadow: none !important;
+}
+.oh-top-nav::-webkit-scrollbar { display: none !important; }
+/* Gradio 5.30: every route <a> uses .svelte-ti537g; some (e.g. duplicate Home) lack .oh-nav-link — clear underline/visited */
+.oh-top-nav a.svelte-ti537g,
+.oh-top-nav a.svelte-ti537g:hover,
+.oh-top-nav a.svelte-ti537g:focus,
+.oh-top-nav a.svelte-ti537g:active,
+.oh-top-nav a.svelte-ti537g:visited,
+.oh-top-nav a.svelte-ti537g.active {
+    text-decoration: none !important;
+    text-decoration-line: none !important;
+}
+/* Gradio can set column layout on parents; keep links in one row */
+.oh-top-nav > a.oh-nav-link,
+.oh-top-nav a.oh-nav-link {
+    flex: 0 0 auto !important;
+    display: inline-flex !important;
+    align-items: center !important;
 }
 #legend-markdown span {
     margin-right: 15px !important; 
@@ -418,7 +851,7 @@ nav.svelte-ti537g.svelte-ti537g {
     position: relative !important;
 }
 .dark #leaderboard-accordion .label-wrap {
-    color: var(--color-primary-accent) !important; 
+    color: var(--oh-fg) !important;
 }
 .dark block.svelte-1svsvh2 {
     background: var(--color-background-dark) !important;
@@ -430,40 +863,48 @@ nav.svelte-ti537g.svelte-ti537g {
     display: flex !important;
     flex-wrap: wrap !important; 
     align-items: center !important; 
-    gap: 10px !important;
-}
-.dark .primary-link-button {
-    color: var(--color-primary-link-dark);
+    gap: 0.5rem !important; /* gap-2 */
 }
+.dark .primary-link-button,
 .primary-link-button {
     background: none;
     border: none;
     padding: 0;
     margin: 0;
     font-family: inherit;
-    font-size: 16px;
-    color: var(--color-primary-link);
+    font-size: var(--oh-prose-size);
+    font-weight: 500;
+    color: var(--oh-info);
     text-decoration: none;
     cursor: pointer;
     white-space: nowrap;
+    transition: color 0.2s ease;
 }
 .primary-link-button:hover {
-    text-decoration: underline;
+    color: var(--oh-link-hover);
+    text-decoration: none;
+}
+.primary-link-button:focus-visible {
+    color: var(--oh-link-hover);
+    text-decoration: none;
+    outline: 2px solid var(--oh-ring);
+    outline-offset: 2px;
+    border-radius: 2px;
 }
 .sub-nav-label {
-    font-weight: bold;
-    font-size: 16px;
+    font-weight: 600;
+    font-size: var(--oh-prose-size);
     display: flex;
     align-items: center;
 }
-.wrap-header-df th span{
+.wrap-header-df th span {
     white-space: normal !important;
     word-break: normal !important;
     overflow-wrap: break-word !important;
     line-height: 1.2 !important;
     vertical-align: top !important;
     font-size: 12px !important;
-    font-family: Arial, sans-serif;
+    font-family: var(--oh-font-sans) !important;
 }
 .wrap-header-df th {
     height: auto !important;
@@ -537,110 +978,149 @@ span.wrap[tabindex="0"][role="button"][data-editable="false"] {
 /* --- inside table tooltips --- */
 .native-tooltip-icon {
     cursor: help;
-    text-decoration: underline dotted 1px;
-}
-/* Main Nav bar styling */
-.nav-holder nav {
-    display: grid !important;
-    grid-template-columns: auto auto auto auto auto 1fr auto auto !important;
-    gap: 10px 20px !important; /* Vertical and horizontal spacing */
-    width: 100% !important;
-    align-items: center;
-}
-.nav-holder nav a[href*="about"] {
-    grid-row: 1 !important;
-    grid-column: 7 !important;
+    text-decoration: none;
 }
-.nav-holder nav a[href*="submit"] {
-    grid-row: 1 !important;
-    grid-column: 8 !important;
+/* Route chips: do not require .oh-nav-link (JS adds it async — without it, .dark a and Gradio nav rules used to break hover/active) */
+gradio-app nav.oh-top-nav a.svelte-ti537g:not([href*="/home"]):not(.active),
+gradio-app nav.svelte-ti537g a.svelte-ti537g:not([href*="/home"]):not(.active),
+.oh-top-nav a.oh-nav-link:not([href*="/home"]):not(.active) {
+    font-family: var(--oh-font-sans) !important;
+    font-size: 13px !important;
+    font-weight: 400 !important;
+    line-height: 1.4 !important;
+    color: #71717a !important;
+    text-decoration: none !important;
+    padding: 6px 12px !important;
+    border-radius: 6px !important;
+    border: 1px solid transparent !important;
+    transition: color 0.2s, background-color 0.2s, border-color 0.2s !important;
     white-space: nowrap !important;
-}
-/* Hide the Alternative Agents page from the top-level nav for now. */
-.nav-holder nav a[href*="alternative-agents"] {
-    display: none !important;
-}
-
-/* Divider line between header and category nav */
-.nav-holder nav::after {
-    content: ''; /* Required for pseudo-elements to appear */
-    background-color: #C9C9C3;
-    height: 1px; 
-    grid-row: 2 !important;
-    grid-column: 1 / -1 !important;
-}
-
-/* Horizontal scrolling for navigation */
-.nav-holder nav {
-    overflow-x: auto;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-}
-.nav-holder nav::-webkit-scrollbar {
-    display: none;
-}
-
-/* Category navigation buttons in row 3 */
-.nav-holder nav a[href*="literature-understanding"],
-.nav-holder nav a[href*="code-execution"],
-.nav-holder nav a[href*="data-analysis"],
-.nav-holder nav a[href*="discovery"] {
-    grid-row: 3 !important;
-    justify-self: center !important;
-    width: fit-content !important;
-    white-space: nowrap;
-    flex-shrink: 0;
-}
-
-.nav-holder nav a[href*="literature-understanding"] { grid-column: 1 !important; }
-.nav-holder nav a[href*="code-execution"] { grid-column: 2 !important; }
-.nav-holder nav a[href*="data-analysis"] { grid-column: 3 !important; }
-.nav-holder nav a[href*="discovery"] { grid-column: 4 !important; }
-
-/* Navigation hover styles */
-.nav-holder nav a[href*="about"]:hover,
-.nav-holder nav a[href*="submit"]:hover,
-.nav-holder nav a[href*="literature-understanding"]:hover,
-.nav-holder nav a[href*="code-execution"]:hover,
-.nav-holder nav a[href*="data-analysis"]:hover,
-.nav-holder nav a[href*="discovery"]:hover {
-    background-color: #FDF9F4;
-}
-
-.dark .nav-holder nav a[href*="about"]:hover,
-.dark .nav-holder nav a[href*="submit"]:hover,
-.dark .nav-holder nav a[href*="literature-understanding"]:hover,
-.dark .nav-holder nav a[href*="code-execution"]:hover,
-.dark .nav-holder nav a[href*="data-analysis"]:hover,
-.dark .nav-holder nav a[href*="discovery"]:hover {
-    background-color: #1C3A3C;
-}
-.benchmark-main-subtitle{
-    color: var(--color-primary-link);
+    box-shadow: none !important;
+    cursor: pointer !important;
+    pointer-events: auto !important;
+    position: relative !important;
+    z-index: 1 !important;
+}
+gradio-app nav.oh-top-nav a.svelte-ti537g:not([href*="/home"]):not(.active):hover,
+gradio-app nav.oh-top-nav a.svelte-ti537g:not([href*="/home"]):not(.active):focus-visible,
+gradio-app nav.svelte-ti537g a.svelte-ti537g:not([href*="/home"]):not(.active):hover,
+gradio-app nav.svelte-ti537g a.svelte-ti537g:not([href*="/home"]):not(.active):focus-visible,
+.oh-top-nav a.oh-nav-link:not([href*="/home"]):not(.active):hover,
+.oh-top-nav a.oh-nav-link:not([href*="/home"]):not(.active):focus-visible {
+    color: #fafafa !important;
+    background-color: #18181b !important;
+    border-color: transparent !important;
+}
+/* Dark: muted links on dark bar */
+html.dark gradio-app nav.oh-top-nav a.svelte-ti537g:not([href*="/home"]):not(.active),
+html.dark gradio-app nav.svelte-ti537g a.svelte-ti537g:not([href*="/home"]):not(.active),
+html.dark .oh-top-nav a.oh-nav-link:not([href*="/home"]):not(.active),
+body.dark gradio-app nav.oh-top-nav a.svelte-ti537g:not([href*="/home"]):not(.active),
+body.dark gradio-app nav.svelte-ti537g a.svelte-ti537g:not([href*="/home"]):not(.active),
+body.dark .oh-top-nav a.oh-nav-link:not([href*="/home"]):not(.active),
+html:has([class*="gradio-container-"].dark) gradio-app nav.oh-top-nav a.svelte-ti537g:not([href*="/home"]):not(.active),
+html:has([class*="gradio-container-"].dark) gradio-app nav.svelte-ti537g a.svelte-ti537g:not([href*="/home"]):not(.active),
+html:has([class*="gradio-container-"].dark) .oh-top-nav a.oh-nav-link:not([href*="/home"]):not(.active),
+.gradio-container.dark gradio-app nav.oh-top-nav a.svelte-ti537g:not([href*="/home"]):not(.active),
+.gradio-container.dark gradio-app nav.svelte-ti537g a.svelte-ti537g:not([href*="/home"]):not(.active),
+.gradio-container.dark .oh-top-nav a.oh-nav-link:not([href*="/home"]):not(.active),
+[class*="gradio-container-"].dark gradio-app nav.oh-top-nav a.svelte-ti537g:not([href*="/home"]):not(.active),
+[class*="gradio-container-"].dark gradio-app nav.svelte-ti537g a.svelte-ti537g:not([href*="/home"]):not(.active),
+[class*="gradio-container-"].dark .oh-top-nav a.oh-nav-link:not([href*="/home"]):not(.active) {
+    color: var(--oh-fg-muted) !important;
+}
+html.dark gradio-app nav.oh-top-nav a.svelte-ti537g:not([href*="/home"]):not(.active):hover,
+html.dark gradio-app nav.oh-top-nav a.svelte-ti537g:not([href*="/home"]):not(.active):focus-visible,
+html.dark gradio-app nav.svelte-ti537g a.svelte-ti537g:not([href*="/home"]):not(.active):hover,
+html.dark gradio-app nav.svelte-ti537g a.svelte-ti537g:not([href*="/home"]):not(.active):focus-visible,
+html.dark .oh-top-nav a.oh-nav-link:not([href*="/home"]):not(.active):hover,
+html.dark .oh-top-nav a.oh-nav-link:not([href*="/home"]):not(.active):focus-visible,
+body.dark gradio-app nav.oh-top-nav a.svelte-ti537g:not([href*="/home"]):not(.active):hover,
+body.dark gradio-app nav.oh-top-nav a.svelte-ti537g:not([href*="/home"]):not(.active):focus-visible,
+body.dark gradio-app nav.svelte-ti537g a.svelte-ti537g:not([href*="/home"]):not(.active):hover,
+body.dark gradio-app nav.svelte-ti537g a.svelte-ti537g:not([href*="/home"]):not(.active):focus-visible,
+body.dark .oh-top-nav a.oh-nav-link:not([href*="/home"]):not(.active):hover,
+body.dark .oh-top-nav a.oh-nav-link:not([href*="/home"]):not(.active):focus-visible,
+html:has([class*="gradio-container-"].dark) gradio-app nav.oh-top-nav a.svelte-ti537g:not([href*="/home"]):not(.active):hover,
+html:has([class*="gradio-container-"].dark) gradio-app nav.oh-top-nav a.svelte-ti537g:not([href*="/home"]):not(.active):focus-visible,
+html:has([class*="gradio-container-"].dark) gradio-app nav.svelte-ti537g a.svelte-ti537g:not([href*="/home"]):not(.active):hover,
+html:has([class*="gradio-container-"].dark) gradio-app nav.svelte-ti537g a.svelte-ti537g:not([href*="/home"]):not(.active):focus-visible,
+html:has([class*="gradio-container-"].dark) .oh-top-nav a.oh-nav-link:not([href*="/home"]):not(.active):hover,
+html:has([class*="gradio-container-"].dark) .oh-top-nav a.oh-nav-link:not([href*="/home"]):not(.active):focus-visible,
+.gradio-container.dark gradio-app nav.oh-top-nav a.svelte-ti537g:not([href*="/home"]):not(.active):hover,
+.gradio-container.dark gradio-app nav.oh-top-nav a.svelte-ti537g:not([href*="/home"]):not(.active):focus-visible,
+.gradio-container.dark gradio-app nav.svelte-ti537g a.svelte-ti537g:not([href*="/home"]):not(.active):hover,
+.gradio-container.dark gradio-app nav.svelte-ti537g a.svelte-ti537g:not([href*="/home"]):not(.active):focus-visible,
+.gradio-container.dark .oh-top-nav a.oh-nav-link:not([href*="/home"]):not(.active):hover,
+.gradio-container.dark .oh-top-nav a.oh-nav-link:not([href*="/home"]):not(.active):focus-visible,
+[class*="gradio-container-"].dark gradio-app nav.oh-top-nav a.svelte-ti537g:not([href*="/home"]):not(.active):hover,
+[class*="gradio-container-"].dark gradio-app nav.oh-top-nav a.svelte-ti537g:not([href*="/home"]):not(.active):focus-visible,
+[class*="gradio-container-"].dark gradio-app nav.svelte-ti537g a.svelte-ti537g:not([href*="/home"]):not(.active):hover,
+[class*="gradio-container-"].dark gradio-app nav.svelte-ti537g a.svelte-ti537g:not([href*="/home"]):not(.active):focus-visible,
+[class*="gradio-container-"].dark .oh-top-nav a.oh-nav-link:not([href*="/home"]):not(.active):hover,
+[class*="gradio-container-"].dark .oh-top-nav a.oh-nav-link:not([href*="/home"]):not(.active):focus-visible {
+    color: #ffffff !important;
+    background-color: var(--oh-muted) !important;
+}
+/* Dark app shell (OpenHands-Design near-black) */
+body.dark, .gradio-container.dark {
+    --body-background-fill: #0d0d0d !important;
+    /* Must match body: #121212 vs #0d0d0d on nested Gradio blocks reads as a full-height left band on leaderboard/row layouts; About is unaffected visually */
+    --block-background-fill: #0d0d0d !important;
+}
+body.dark, .gradio-container.dark,
+.gradio-container.dark .contain,
+.gradio-container.dark .wrap,
+.gradio-container.dark .main,
+.gradio-container.dark {
+    background-color: #0d0d0d !important;
+    color: #fafafa !important;
+}
+.benchmark-main-subtitle {
+    color: var(--oh-fg-muted);
     overflow: hidden;
     padding-top: 120px;
+    font-size: var(--oh-prose-size);
+    font-weight: 500;
+    line-height: var(--oh-prose-leading);
 }
-.dark .benchmark-main-subtitle{
-    color: var(--color-primary-link-dark);
+.benchmark-title {
+    color: var(--color-text-dark);
+    margin-top: 2.5rem;
+    /* DESIGN.md: section heading — text-lg / font-semibold */
+    font-size: 1.125rem;
+    font-weight: 600;
+    line-height: 1.3;
+    letter-spacing: -0.02em;
 }
-.benchmark-title{
-    color: var(--color-primary-link);
-    margin-top: 50px;
-        font-size: 20px;
-}
-.dark .benchmark-title{
-    color: var(--color-primary-accent);
+.dark .benchmark-title {
+    color: var(--oh-fg);
 }
 .benchmark-description {
-    margin: 20px 0;
-    max-width: 800px;
+    margin: var(--oh-gap-prose-paragraph) 0 1.5rem;
+    max-width: 52rem;
+    font-size: var(--oh-prose-size);
+    line-height: var(--oh-prose-leading);
 }
-
-.dark #main-header h2 {
-    color: var(--color-primary-accent); 
+.benchmark-description p {
+    margin: 0 0 var(--oh-gap-prose-paragraph) 0;
+}
+.benchmark-description p:last-child {
+    margin-bottom: 0;
 }
+
+/* DESIGN.md: page heading — text-2xl / font-semibold */
+.dark #main-header h2,
 #main-header h2 {
-    color: var(--color-primary-link);
+    color: #fafafa !important;
+    font-size: 1.5rem;
+    line-height: 1.2;
+    font-weight: 600;
+    letter-spacing: -0.02em;
+    margin: 0 0 var(--oh-gap-prose-paragraph) 0;
+}
+.gradio-container:not(.dark) #main-header h2 {
+    color: #0d0d0d !important;
 }
 
 /* --- New HTML-Based Tooltip Styles --- */
@@ -726,18 +1206,66 @@ span.wrap[tabindex="0"][role="button"][data-editable="false"] {
     flex-wrap: wrap;
 }
 
-/* About Page CSS */
+/* About Page CSS — nested in #page-content-wrapper for same horizontal + top padding as Home */
 #about-page-content-wrapper {
     margin-left: auto;
     margin-right: auto;
-    max-width: 800px; 
-    padding: 0 24px;
+    max-width: 50rem; /* 800px — readable line length */
+    padding: 0;
     display: flex;
     flex-direction: column; 
-    gap: 40px; 
-    margin-top: 40px;
-    opacity: 85%; 
-    margin-bottom: 60px;
+    gap: 2.5rem; /* 40px — matches index .section-title margin rhythm */
+    margin-top: 0;
+    opacity: 0.85; 
+    margin-bottom: 3.75rem; /* 60px */
+    box-sizing: border-box;
+}
+
+/* Alternative Agents intro — align with Home / category hero width and heading scale */
+#alternative-agents-intro {
+    font-size: var(--oh-prose-size);
+    line-height: var(--oh-prose-leading);
+    max-width: min(100%, 52rem);
+}
+#alternative-agents-intro h2 {
+    font-size: 1.5rem;
+    font-weight: 600;
+    line-height: 1.2;
+    letter-spacing: -0.02em;
+    margin: 0 0 var(--oh-gap-prose-paragraph) 0;
+    color: var(--body-text-color, var(--oh-fg)) !important;
+}
+#alternative-agents-intro p {
+    margin: 0 0 var(--oh-gap-prose-paragraph) 0;
+}
+#alternative-agents-intro p:last-child {
+    margin-bottom: 0;
+}
+#about-page-content-wrapper h2 {
+    font-size: 1.5rem;
+    font-weight: 600;
+    line-height: 1.2;
+    letter-spacing: -0.02em;
+    margin: 0 0 0.75rem 0;
+    color: var(--body-text-color, var(--oh-fg)) !important;
+}
+#about-page-content-wrapper p,
+#about-page-content-wrapper li {
+    font-size: var(--oh-prose-size);
+    line-height: var(--oh-prose-leading);
+}
+#about-page-content-wrapper p {
+    margin: 0 0 var(--oh-gap-prose-paragraph) 0;
+}
+#about-page-content-wrapper p:last-child {
+    margin-bottom: 0;
+}
+#about-page-content-wrapper .info-list {
+    margin: var(--oh-gap-prose-paragraph) 0;
+    padding-left: 1.25rem;
+}
+#about-page-content-wrapper .info-list li + li {
+    margin-top: 0.35em;
 }
 .link-buttons-container {
     display: flex;
@@ -804,13 +1332,13 @@ html {
     min-height: 572px;
     background-color: #fff;
     padding: 24px 32px;
-    border: 1px solid var(--color-neutral-300);
+    border: 1px solid var(--oh-border);
     border-radius: 4px;
 }
 
 .dark .plot-legend-container {
     background: rgba(247, 248, 251, 0.1);
-    border-color: var(--color-neutral-700);
+    border-color: var(--oh-border);
 }
 
 #plot-legend-logo {
@@ -872,6 +1400,38 @@ h3 .header-link-icon {
 .winners-by-category-container {
     margin: 20px 0;
     overflow-x: auto;
+    scrollbar-gutter: stable;
+    /* Horizontal scrollbar: thin thumb, no visible track (OpenHands-Design) */
+    scrollbar-width: thin;
+    scrollbar-color: hsl(0 0% 40% / 0.5) transparent;
+}
+html.dark .winners-by-category-container,
+body.dark .winners-by-category-container,
+.gradio-container.dark .winners-by-category-container {
+    scrollbar-color: hsl(0 0% 55% / 0.45) transparent;
+}
+.winners-by-category-container::-webkit-scrollbar {
+    height: 6px;
+}
+.winners-by-category-container::-webkit-scrollbar-track {
+    background: transparent;
+}
+.winners-by-category-container::-webkit-scrollbar-thumb {
+    background: hsl(0 0% 40% / 0.5);
+    border-radius: 9999px;
+}
+.winners-by-category-container::-webkit-scrollbar-thumb:hover {
+    background: hsl(0 0% 35% / 0.7);
+}
+html.dark .winners-by-category-container::-webkit-scrollbar-thumb,
+body.dark .winners-by-category-container::-webkit-scrollbar-thumb,
+.gradio-container.dark .winners-by-category-container::-webkit-scrollbar-thumb {
+    background: hsl(0 0% 55% / 0.5);
+}
+html.dark .winners-by-category-container::-webkit-scrollbar-thumb:hover,
+body.dark .winners-by-category-container::-webkit-scrollbar-thumb:hover,
+.gradio-container.dark .winners-by-category-container::-webkit-scrollbar-thumb:hover {
+    background: hsl(0 0% 60% / 0.65);
 }
 
 .winners-unified-table {
@@ -879,22 +1439,23 @@ h3 .header-link-icon {
     border-collapse: collapse;
     font-size: 13px;
     background: #fff;
-    border: 1px solid var(--color-neutral-300);
+    border: 1px solid var(--oh-border);
     border-radius: 12px;
     overflow: hidden;
 }
 
 .dark .winners-unified-table {
     background: rgba(247, 248, 251, 0.05);
-    border-color: var(--color-neutral-700);
+    border-color: var(--oh-border);
 }
 
+/* Category header bar: flat neutral grey */
 .winners-unified-table thead tr {
-    background: linear-gradient(to right, rgba(255, 225, 101, 0.15), rgba(220, 194, 87, 0.25));
+    background: hsl(0 0% 92%);
 }
 
 .dark .winners-unified-table thead tr {
-    background: linear-gradient(to right, rgba(255, 225, 101, 0.2), rgba(220, 194, 87, 0.3));
+    background: hsl(0 0% 12%);
 }
 
 .winners-unified-table .category-header {
@@ -903,15 +1464,15 @@ h3 .header-link-icon {
     font-weight: 700;
     font-size: 13px;
     color: var(--color-text-dark);
-    border-bottom: 2px solid var(--color-primary-accent) !important;
-    border-right: 2px solid #999 !important;
+    border-bottom: 1px solid var(--oh-border) !important;
+    border-right: 1px solid var(--oh-border) !important;
     white-space: nowrap;
 }
 
 .dark .winners-unified-table .category-header {
     color: #fff;
-    border-bottom-color: var(--color-primary-accent) !important;
-    border-right-color: var(--color-neutral-500) !important;
+    border-bottom-color: var(--oh-border) !important;
+    border-right-color: var(--oh-border) !important;
 }
 
 .winners-unified-table .category-header:last-child {
@@ -928,23 +1489,24 @@ h3 .header-link-icon {
 .winners-unified-table td {
     padding: 8px 6px;
     vertical-align: middle;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid var(--oh-border);
 }
 
 .dark .winners-unified-table td {
-    border-bottom-color: #2a3a3a;
+    border-bottom-color: var(--oh-border);
 }
 
 .winners-unified-table tbody tr:last-child td {
     border-bottom: none;
 }
 
+/* Row hover: muted/60 style (DESIGN.md), not yellow */
 .winners-unified-table tbody tr:hover {
-    background: rgba(255, 225, 101, 0.1);
+    background: hsl(0 0% 0% / 0.04);
 }
 
 .dark .winners-unified-table tbody tr:hover {
-    background: rgba(255, 225, 101, 0.15);
+    background: hsl(0 0% 12% / 0.5);
 }
 
 .winners-unified-table .score-cell {
@@ -953,12 +1515,12 @@ h3 .header-link-icon {
     color: var(--color-primary-dark);
     padding-left: 12px;
     min-width: 50px;
-    border-right: 1px solid #eee;
+    border-right: 1px solid var(--oh-border);
 }
 
 .dark .winners-unified-table .score-cell {
     color: var(--color-primary-accent);
-    border-right-color: var(--color-neutral-700);
+    border-right-color: var(--oh-border);
 }
 
 .winners-unified-table .model-cell {
@@ -966,12 +1528,12 @@ h3 .header-link-icon {
     color: var(--color-text-dark);
     font-weight: 500;
     padding-right: 12px;
-    border-right: 2px solid #999;
+    border-right: 1px solid var(--oh-border);
 }
 
 .dark .winners-unified-table .model-cell {
     color: #fff;
-    border-right-color: var(--color-neutral-500);
+    border-right-color: var(--oh-border);
 }
 
 .winners-unified-table td:nth-last-child(1) {
@@ -1061,10 +1623,9 @@ h3 .header-link-icon {
         padding-right: 8px !important;
     }
     
-    /* Reduce padding on intro paragraph */
     #intro-paragraph {
-        padding-left: 8px !important;
-        padding-right: 8px !important;
+        padding-left: 0 !important;
+        padding-right: 0 !important;
         max-width: 100% !important;
     }
     
@@ -1075,9 +1636,10 @@ h3 .header-link-icon {
         max-width: 100% !important;
     }
     
-    /* Reduce navigation holder padding */
-    .nav-holder {
-        padding-left: 8px !important;
+    /* Nav: keep left gutter for wordmark; tighten sides on small viewports */
+    .oh-top-nav,
+    gradio-app nav.svelte-ti537g {
+        padding-left: 116px !important;
         padding-right: 8px !important;
     }
     
@@ -1088,10 +1650,10 @@ h3 .header-link-icon {
         max-width: 100% !important;
     }
     
-    /* Reduce about page wrapper padding */
+    /* About is inside #page-content-wrapper — outer handles horizontal padding */
     #about-page-content-wrapper {
-        padding-left: 12px !important;
-        padding-right: 12px !important;
+        padding-left: 0 !important;
+        padding-right: 0 !important;
     }
     
     /* Reduce gradio container padding */

main_page.py

@@ -54,107 +54,114 @@ def filter_complete_entries(df: pd.DataFrame) -> pd.DataFrame:
 
 
 def build_page():
-    with gr.Row(elem_id="intro-row"):
-        with gr.Column(scale=1):
-            gr.HTML(INTRO_PARAGRAPH, elem_id="intro-paragraph")
-
-    # --- Leaderboard Display Section ---
-    gr.Markdown("---")
-    CATEGORY_NAME = "Overall"
-    gr.HTML(f'<h2>OpenHands Index {CATEGORY_NAME} Leaderboard <span style="font-weight: normal; color: inherit;">(Aggregate)</span></h2>', elem_id="main-header")
-
-    test_df, test_tag_map = get_full_leaderboard_data("test")
-    if not test_df.empty:
-        show_incomplete_checkbox, show_open_only_checkbox, mark_by_dropdown = create_leaderboard_display(
-            full_df=test_df,
-            tag_map=test_tag_map,
-            category_name=CATEGORY_NAME,
-            split_name="test"
+    with gr.Column(elem_id="page-content-wrapper"):
+        with gr.Row(elem_id="intro-row"):
+            with gr.Column(scale=1):
+                gr.HTML(INTRO_PARAGRAPH, elem_id="intro-paragraph")
+
+        # --- Leaderboard Display Section ---
+        CATEGORY_NAME = "Overall"
+        gr.HTML(
+            f'<h2>OpenHands Index {CATEGORY_NAME} Leaderboard <span style="font-weight: normal; color: inherit;">(Aggregate)</span></h2>',
+            elem_id="main-header",
         )
 
-        test_df_complete = filter_complete_entries(test_df)
-        has_complete_entries = len(test_df_complete) > 0
+        test_df, test_tag_map = get_full_leaderboard_data("test")
+        if not test_df.empty:
+            show_incomplete_checkbox, show_open_only_checkbox, mark_by_dropdown = create_leaderboard_display(
+                full_df=test_df,
+                tag_map=test_tag_map,
+                category_name=CATEGORY_NAME,
+                split_name="test",
+            )
 
-        if 'Openness' in test_df.columns:
-            test_df_open = test_df[test_df['Openness'].str.lower() == 'open'].copy()
-        else:
-            test_df_open = test_df.copy()
-        test_df_complete_open = filter_complete_entries(test_df_open)
+            test_df_complete = filter_complete_entries(test_df)
+            has_complete_entries = len(test_df_complete) > 0
 
-        initial_df = test_df_complete if has_complete_entries else test_df
+            if "Openness" in test_df.columns:
+                test_df_open = test_df[test_df["Openness"].str.lower() == "open"].copy()
+            else:
+                test_df_open = test_df.copy()
+            test_df_complete_open = filter_complete_entries(test_df_open)
 
-        # --- Winners by Category Section ---
-        gr.Markdown("---")
-        gr.HTML('<h2>Winners by Category</h2>', elem_id="winners-header")
-        gr.Markdown("Top 5 performing systems in each benchmark category.")
+            initial_df = test_df_complete if has_complete_entries else test_df
 
-        winners_component = gr.HTML(
-            create_winners_by_category_html(initial_df, top_n=5),
-            elem_id="winners-by-category",
-        )
+            # --- Winners by Category Section ---
+            gr.Markdown("---")
+            gr.HTML('<h2>Winners by Category</h2>', elem_id="winners-header")
+            gr.Markdown("Top 5 performing systems in each benchmark category.")
 
-        # --- New Visualization Sections ---
-        gr.Markdown("---")
+            winners_component = gr.HTML(
+                create_winners_by_category_html(initial_df, top_n=5),
+                elem_id="winners-by-category",
+            )
 
-        # Evolution Over Time Section
-        gr.HTML('<h2>Evolution Over Time</h2>', elem_id="evolution-header")
-        gr.Markdown("Track how model performance has improved over time based on release dates.")
+            # --- New Visualization Sections ---
+            gr.Markdown("---")
 
-        evolution_component = gr.Plot(
-            value=create_evolution_over_time_chart(initial_df, MARK_BY_DEFAULT),
-            elem_id="evolution-chart",
-        )
+            # Evolution Over Time Section
+            gr.HTML('<h2>Evolution Over Time</h2>', elem_id="evolution-header")
+            gr.Markdown("Track how model performance has improved over time based on release dates.")
 
-        gr.Markdown("---")
+            evolution_component = gr.Plot(
+                value=create_evolution_over_time_chart(initial_df, MARK_BY_DEFAULT),
+                elem_id="evolution-chart",
+            )
 
-        # Open Model Accuracy by Size Section (always shows open models only by design)
-        gr.HTML('<h2>Open Model Accuracy by Size</h2>', elem_id="size-accuracy-header")
-        gr.Markdown("Compare open-weights model performance against their parameter count.")
+            gr.Markdown("---")
 
-        size_component = gr.Plot(
-            value=create_accuracy_by_size_chart(initial_df, MARK_BY_DEFAULT),
-            elem_id="size-accuracy-chart",
-        )
+            # Open Model Accuracy by Size Section (always shows open models only by design)
+            gr.HTML('<h2>Open Model Accuracy by Size</h2>', elem_id="size-accuracy-header")
+            gr.Markdown("Compare open-weights model performance against their parameter count.")
 
-        def update_extra_sections(show_incomplete, show_open_only, mark_by):
-            include_incomplete = show_incomplete or not has_complete_entries
-            base_df = test_df if include_incomplete else test_df_complete
-            base_df_open = test_df_open if include_incomplete else test_df_complete_open
-            winners_df = base_df_open if show_open_only else base_df
+            size_component = gr.Plot(
+                value=create_accuracy_by_size_chart(initial_df, MARK_BY_DEFAULT),
+                elem_id="size-accuracy-chart",
+            )
 
-            winners_html = create_winners_by_category_html(winners_df, top_n=5)
-            evolution_fig = create_evolution_over_time_chart(winners_df, mark_by)
-            size_fig = create_accuracy_by_size_chart(base_df, mark_by)
+            def update_extra_sections(show_incomplete, show_open_only, mark_by):
+                include_incomplete = show_incomplete or not has_complete_entries
+                base_df = test_df if include_incomplete else test_df_complete
+                base_df_open = test_df_open if include_incomplete else test_df_complete_open
+                winners_df = base_df_open if show_open_only else base_df
 
-            return winners_html, evolution_fig, size_fig
+                winners_html = create_winners_by_category_html(winners_df, top_n=5)
+                evolution_fig = create_evolution_over_time_chart(winners_df, mark_by)
+                size_fig = create_accuracy_by_size_chart(base_df, mark_by)
 
-        show_incomplete_input = show_incomplete_checkbox if show_incomplete_checkbox is not None else gr.State(value=True)
-        show_open_only_input = show_open_only_checkbox if show_open_only_checkbox is not None else gr.State(value=False)
-        extra_section_inputs = [show_incomplete_input, show_open_only_input, mark_by_dropdown]
+                return winners_html, evolution_fig, size_fig
 
-        if show_incomplete_checkbox is not None:
-            show_incomplete_checkbox.change(
-                fn=update_extra_sections,
-                inputs=extra_section_inputs,
-                outputs=[winners_component, evolution_component, size_component]
+            show_incomplete_input = (
+                show_incomplete_checkbox if show_incomplete_checkbox is not None else gr.State(value=True)
             )
-
-        if show_open_only_checkbox is not None:
-            show_open_only_checkbox.change(
-                fn=update_extra_sections,
-                inputs=extra_section_inputs,
-                outputs=[winners_component, evolution_component, size_component]
+            show_open_only_input = (
+                show_open_only_checkbox if show_open_only_checkbox is not None else gr.State(value=False)
             )
+            extra_section_inputs = [show_incomplete_input, show_open_only_input, mark_by_dropdown]
+
+            if show_incomplete_checkbox is not None:
+                show_incomplete_checkbox.change(
+                    fn=update_extra_sections,
+                    inputs=extra_section_inputs,
+                    outputs=[winners_component, evolution_component, size_component],
+                )
+
+            if show_open_only_checkbox is not None:
+                show_open_only_checkbox.change(
+                    fn=update_extra_sections,
+                    inputs=extra_section_inputs,
+                    outputs=[winners_component, evolution_component, size_component],
+                )
+
+            if mark_by_dropdown is not None:
+                mark_by_dropdown.change(
+                    fn=update_extra_sections,
+                    inputs=extra_section_inputs,
+                    outputs=[winners_component, evolution_component, size_component],
+                )
 
-        if mark_by_dropdown is not None:
-            mark_by_dropdown.change(
-                fn=update_extra_sections,
-                inputs=extra_section_inputs,
-                outputs=[winners_component, evolution_component, size_component]
-            )
-        
-    else:
-        gr.Markdown("No data available.")
+        else:
+            gr.Markdown("No data available.")
 
 if __name__ == "__main__":
     demo.launch()

ui_components.py

@@ -705,7 +705,7 @@ def create_leaderboard_display(
         primary_runtime_col = f"{category_name} Runtime"
     
     # Function to create cost/performance scatter plot from data
-    def create_cost_scatter_plot(df_data, mark_by=MARK_BY_DEFAULT, show_all_labels=False):
+    def create_cost_scatter_plot(df_data, mark_by=MARK_BY_DEFAULT):
         return _plot_scatter_plotly(
             data=df_data,
             x=primary_cost_col if primary_cost_col in df_data.columns else None,
@@ -713,12 +713,11 @@ def create_leaderboard_display(
             agent_col="SDK Version",
             name=category_name,
             plot_type='cost',
-            mark_by=mark_by,
-            show_all_labels=show_all_labels
+            mark_by=mark_by
         )
     
     # Function to create runtime/performance scatter plot from data
-    def create_runtime_scatter_plot(df_data, mark_by=MARK_BY_DEFAULT, show_all_labels=False):
+    def create_runtime_scatter_plot(df_data, mark_by=MARK_BY_DEFAULT):
         return _plot_scatter_plotly(
             data=df_data,
             x=primary_runtime_col if primary_runtime_col in df_data.columns else None,
@@ -726,8 +725,7 @@ def create_leaderboard_display(
             agent_col="SDK Version",
             name=category_name,
             plot_type='runtime',
-            mark_by=mark_by,
-            show_all_labels=show_all_labels
+            mark_by=mark_by
         )
     
     # Create initial cost scatter plots for all filter combinations
@@ -774,7 +772,7 @@ def create_leaderboard_display(
     
     # Add toggle checkboxes and dropdown ABOVE the plot
     with gr.Row():
-        with gr.Column(scale=3):
+        with gr.Column(scale=3, elem_classes=["oh-leaderboard-filter-col"]):
             if has_complete_entries:
                 show_incomplete_checkbox = gr.Checkbox(
                     label=f"Show incomplete entries ({num_incomplete} entries with fewer than 5 categories)",
@@ -794,7 +792,6 @@ def create_leaderboard_display(
                 )
             else:
                 show_open_only_checkbox = None
-            
             # Add checkbox for showing all labels on scatter plot
             show_all_labels_checkbox = gr.Checkbox(
                 label="Show all labels on scatter plots",
@@ -853,7 +850,7 @@ def create_leaderboard_display(
                     df_to_show = df_display_all if show_incomplete else df_display_complete
                     view_df = df_view_full if show_incomplete else df_view_complete
                 
-                # Regenerate plots with current mark_by and show_all_labels settings
+                # Regenerate plots with current mark_by setting
                 cost_plot = create_cost_scatter_plot(view_df, mark_by, show_all_labels)
                 runtime_plot = create_runtime_scatter_plot(view_df, mark_by, show_all_labels)
                 return df_to_show, cost_plot, runtime_plot
@@ -884,11 +881,6 @@ def create_leaderboard_display(
                 inputs=filter_inputs,
                 outputs=[dataframe_component, cost_plot_component, runtime_plot_component]
             )
-            show_all_labels_checkbox.change(
-                fn=update_display,
-                inputs=filter_inputs,
-                outputs=[dataframe_component, cost_plot_component, runtime_plot_component]
-            )
         else:
             dataframe_component = gr.DataFrame(
                 headers=df_headers,
@@ -933,11 +925,6 @@ def create_leaderboard_display(
                 inputs=filter_inputs_no_complete,
                 outputs=[dataframe_component, cost_plot_component, runtime_plot_component]
             )
-            show_all_labels_checkbox.change(
-                fn=update_display_no_complete,
-                inputs=filter_inputs_no_complete,
-                outputs=[dataframe_component, cost_plot_component, runtime_plot_component]
-            )
         
         legend_markdown = create_legend_markdown(category_name)
         gr.HTML(value=legend_markdown, elem_id="legend-markdown")
@@ -974,16 +961,16 @@ def create_leaderboard_display(
                 new_df_display_open = prepare_df_for_display(new_df_view_open)
                 new_df_display_complete_open = prepare_df_for_display(new_df_view_complete_open)
                 
-                # Create new scatter plots for all combinations (with current mark_by and show_all_labels)
-                new_cost_scatter_complete = create_cost_scatter_plot(new_df_view_complete, mark_by, show_all_labels) if len(new_df_display_complete) > 0 else go.Figure()
-                new_cost_scatter_all = create_cost_scatter_plot(new_df_view_full, mark_by, show_all_labels)
-                new_cost_scatter_open = create_cost_scatter_plot(new_df_view_open, mark_by, show_all_labels) if len(new_df_view_open) > 0 else go.Figure()
-                new_cost_scatter_complete_open = create_cost_scatter_plot(new_df_view_complete_open, mark_by, show_all_labels) if len(new_df_view_complete_open) > 0 else go.Figure()
+                # Create new scatter plots for all combinations (with current mark_by)
+                new_cost_scatter_complete = create_cost_scatter_plot(new_df_view_complete, mark_by) if len(new_df_display_complete) > 0 else go.Figure()
+                new_cost_scatter_all = create_cost_scatter_plot(new_df_view_full, mark_by)
+                new_cost_scatter_open = create_cost_scatter_plot(new_df_view_open, mark_by) if len(new_df_view_open) > 0 else go.Figure()
+                new_cost_scatter_complete_open = create_cost_scatter_plot(new_df_view_complete_open, mark_by) if len(new_df_view_complete_open) > 0 else go.Figure()
                 
-                new_runtime_scatter_complete = create_runtime_scatter_plot(new_df_view_complete, mark_by, show_all_labels) if len(new_df_display_complete) > 0 else go.Figure()
-                new_runtime_scatter_all = create_runtime_scatter_plot(new_df_view_full, mark_by, show_all_labels)
-                new_runtime_scatter_open = create_runtime_scatter_plot(new_df_view_open, mark_by, show_all_labels) if len(new_df_view_open) > 0 else go.Figure()
-                new_runtime_scatter_complete_open = create_runtime_scatter_plot(new_df_view_complete_open, mark_by, show_all_labels) if len(new_df_view_complete_open) > 0 else go.Figure()
+                new_runtime_scatter_complete = create_runtime_scatter_plot(new_df_view_complete, mark_by) if len(new_df_display_complete) > 0 else go.Figure()
+                new_runtime_scatter_all = create_runtime_scatter_plot(new_df_view_full, mark_by)
+                new_runtime_scatter_open = create_runtime_scatter_plot(new_df_view_open, mark_by) if len(new_df_view_open) > 0 else go.Figure()
+                new_runtime_scatter_complete_open = create_runtime_scatter_plot(new_df_view_complete_open, mark_by) if len(new_df_view_complete_open) > 0 else go.Figure()
                 
                 # Return the appropriate data based on checkbox states
                 if show_open_only:
@@ -1018,7 +1005,6 @@ def create_leaderboard_display(
         if show_open_only_checkbox is not None:
             timer_inputs.append(show_open_only_checkbox)
         timer_inputs.append(mark_by_dropdown)  # Always include mark_by
-        timer_inputs.append(show_all_labels_checkbox)
         refresh_timer.tick(
             fn=check_and_refresh_data,
             inputs=timer_inputs,
@@ -1039,8 +1025,8 @@ def create_leaderboard_display(
                         new_df_view_full = new_df_view_full[new_df_view_full['Openness'].str.lower() == 'open'].copy()
                     
                     new_df_display_all = prepare_df_for_display(new_df_view_full)
-                    new_cost_scatter_all = create_cost_scatter_plot(new_df_view_full, mark_by, show_all_labels)
-                    new_runtime_scatter_all = create_runtime_scatter_plot(new_df_view_full, mark_by, show_all_labels)
+                    new_cost_scatter_all = create_cost_scatter_plot(new_df_view_full, mark_by)
+                    new_runtime_scatter_all = create_runtime_scatter_plot(new_df_view_full, mark_by)
                     return new_df_display_all, new_cost_scatter_all, new_runtime_scatter_all
             
             if show_open_only:
@@ -1050,15 +1036,15 @@ def create_leaderboard_display(
         if show_open_only_checkbox is not None:
             refresh_timer.tick(
                 fn=check_and_refresh_all,
-                inputs=[show_open_only_checkbox, mark_by_dropdown, show_all_labels_checkbox],
+                inputs=[show_open_only_checkbox, mark_by_dropdown],
                 outputs=[dataframe_component, cost_plot_component, runtime_plot_component]
             )
         else:
-            def check_and_refresh_simple(mark_by=MARK_BY_DEFAULT, show_all_labels=False):
-                return check_and_refresh_all(False, mark_by, show_all_labels)
+            def check_and_refresh_simple(mark_by=MARK_BY_DEFAULT):
+                return check_and_refresh_all(False, mark_by)
             refresh_timer.tick(
                 fn=check_and_refresh_simple,
-                inputs=[mark_by_dropdown, show_all_labels_checkbox],
+                inputs=[mark_by_dropdown],
                 outputs=[dataframe_component, cost_plot_component, runtime_plot_component]
             )
 

visualizations.py

@@ -9,7 +9,7 @@ import plotly.graph_objects as go
 import aliases
 
 # Import the generic scatter chart function - single source of truth
-from leaderboard_transformer import create_scatter_chart, STANDARD_LAYOUT, STANDARD_FONT
+from leaderboard_transformer import apply_neutral_chart_gridlines, create_scatter_chart, STANDARD_LAYOUT, STANDARD_FONT
 
 
 def _find_column(df: pd.DataFrame, candidates: list, default: str = None) -> str:
@@ -43,6 +43,7 @@ def create_evolution_over_time_chart(df: pd.DataFrame, mark_by: str = None) -> g
             font=STANDARD_FONT
         )
         fig.update_layout(**STANDARD_LAYOUT, title="Model Performance Evolution Over Time")
+        apply_neutral_chart_gridlines(fig)
         return fig
     
     # Find score column
@@ -63,6 +64,7 @@ def create_evolution_over_time_chart(df: pd.DataFrame, mark_by: str = None) -> g
             font=STANDARD_FONT
         )
         fig.update_layout(**STANDARD_LAYOUT, title="Model Performance Evolution Over Time")
+        apply_neutral_chart_gridlines(fig)
         return fig
     
     # Use the generic scatter chart
@@ -102,6 +104,7 @@ def create_accuracy_by_size_chart(df: pd.DataFrame, mark_by: str = None) -> go.F
             font=STANDARD_FONT
         )
         fig.update_layout(**STANDARD_LAYOUT, title="Open Model Accuracy by Size")
+        apply_neutral_chart_gridlines(fig)
         return fig
     
     # Filter to only open-weights models
@@ -124,6 +127,7 @@ def create_accuracy_by_size_chart(df: pd.DataFrame, mark_by: str = None) -> go.F
             font=STANDARD_FONT
         )
         fig.update_layout(**STANDARD_LAYOUT, title="Open Model Accuracy by Size")
+        apply_neutral_chart_gridlines(fig)
         return fig
     
     # Find score column
@@ -143,6 +147,7 @@ def create_accuracy_by_size_chart(df: pd.DataFrame, mark_by: str = None) -> go.F
             font=STANDARD_FONT
         )
         fig.update_layout(**STANDARD_LAYOUT, title="Open Model Accuracy by Size")
+        apply_neutral_chart_gridlines(fig)
         return fig
     
     # Use the generic scatter chart