Backtest Lab v1.0.0

src/ui/components.py

@@ -112,7 +112,7 @@ def loading_stages(active: int = 0) -> str:
         mark = "✓" if i < active else ("▸" if i == active else "·")
         color = ("var(--accent-moss-strong)" if i < active else
                  "var(--text-primary)" if i == active else "var(--text-tertiary)")
-        rows.append(f'<div style="color:{color};font-size:11px">{mark} {esc(label)}</div>')
+        rows.append(f'<div class="bit-stage" style="color:{color}">{mark} {esc(label)}</div>')
     return f'<div class="bit-panel">{"".join(rows)}</div>'
 
 

src/ui/theme.py

@@ -1,12 +1,28 @@
-"""Gradio theme and CSS built from the Bit design system tokens.
-
-`assets/tokens/*.css` is vendored verbatim from the design system and imported
-here rather than retyped, so token values cannot drift. This module adds only
-the app-shell layout the design specifies (three zones, panels, chips, stat
-band) on top of those tokens.
-
-Fonts are served as static files. If they fail to load the page degrades to the
-system sans / mono stack rather than breaking.
+"""Gradio theme and CSS built from the Bit design system.
+
+The design system ships six global stylesheets, listed in its own manifest as
+`globalCssPaths`, and they are loaded here **in that order**:
+
+    tokens/fonts.css  tokens/colors.css  tokens/typography.css
+    tokens/spacing.css  base.css  styles.css
+
+`base.css` is the important one and was previously vendored but never loaded.
+It carries the design's global reset: square corners everywhere
+(`border-radius:0 !important`), zeroed body margins, heading defaults, link and
+focus treatment, the 8px pixel-font rule, and the scrollbar styling. Without it
+the app inherited Gradio's rounded, roomy defaults and only *approximated* the
+design.
+
+Three things fight the design if left alone, and all three are handled here:
+
+1. **Gradio's spacing scale.** Its defaults are `layout_gap: *spacing_xxl` and
+   `block_padding: *spacing_xl` — far looser than the design, which uses 12px
+   panel padding and 6–10px gaps. These are configured on the theme rather than
+   fought selector-by-selector.
+2. **Gradio's type scale.** Its `body_text_size` is `*text_md` (16px). The
+   design's workhorse size is `--text-xs` (10px) with `--text-2xs` (8px) for
+   micro labels; `--text-base` (12px) appears exactly once in the whole design.
+3. **Rounded corners.** Gradio rounds everything; the design is square.
 """
 
 from __future__ import annotations
@@ -17,11 +33,17 @@ import gradio as gr
 
 ASSETS = Path(__file__).resolve().parent.parent.parent / "assets"
 FONT_DIR = ASSETS / "fonts"
+TOKENS = ASSETS / "tokens"
+
+# The design system's own manifest order. styles.css is only @import glue for
+# the others, so it is resolved here rather than fetched.
+GLOBAL_CSS = ("colors.css", "typography.css", "spacing.css", "base.css")
 
 
 def _font_face_css() -> str:
     """@font-face rules pointing at Gradio's static file route."""
     faces = [
+        ("Styrene A", "StyreneA-Thin.otf", 100, "normal"),
         ("Styrene A", "StyreneA-Light.otf", 300, "normal"),
         ("Styrene A", "StyreneA-Regular.otf", 400, "normal"),
         ("Styrene A", "StyreneA-Medium.otf", 500, "normal"),
@@ -41,27 +63,69 @@ def _font_face_css() -> str:
     return "\n".join(out)
 
 
-def _tokens_css() -> str:
-    """Inline the vendored token files so there is one source of truth."""
+def _global_css() -> str:
+    """Inline the design system's global stylesheets, verbatim and in order."""
     parts = []
-    for name in ("colors.css", "typography.css", "spacing.css"):
-        p = ASSETS / "tokens" / name
+    for name in GLOBAL_CSS:
+        p = TOKENS / name
         if p.exists():
-            parts.append(p.read_text())
+            parts.append(f"/* ---- design system: {name} ---- */\n{p.read_text()}")
     return "\n".join(parts)
 
 
+# base.css sets `user-select:none` on everything and re-enables it only for
+# inputs, code and `.bit-selectable`. That suits a trading dashboard but not a
+# data tool: people need to select numbers out of the tables. This is the one
+# deliberate departure from base.css, scoped to data surfaces only.
+SELECTION_FIX = """
+table, table *, .bit-table, .bit-table *, .prose, .prose *,
+.bit-stat-value, .bit-stat-sub, .bit-sig-row, .bit-sig-row *,
+.bit-podium, .bit-podium *, .bit-note, .bit-note *,
+.markdown, .markdown * { user-select: text; }
+"""
+
+# --------------------------------------------------------------------------
+# Gradio neutralisation: strip its layout spacing back to the design's scale.
+# --------------------------------------------------------------------------
+
+GRADIO_RESET = """
+/* Gradio wraps every component in padded, gapped containers. Collapse them so
+   the design's own spacing is the only spacing on the page. */
+.gradio-container{ max-width:100% !important; padding:0 !important; }
+.gradio-container .block,
+.gradio-container .form,
+.gradio-container .styler,
+.gradio-container .container,
+.gradio-container .panel{
+  background:transparent !important; border:none !important;
+  box-shadow:none !important; padding:0 !important;
+}
+.gradio-container .gap{ gap:8px !important; }
+.gradio-container .form > *{ margin:0 !important; }
+.gradio-container .block > .wrap{ padding:0 !important; }
+.gradio-container .tabitem{ padding:10px 0 0 !important; border:none !important; }
+.gradio-container .column, .gradio-container .row{ gap:8px !important; }
+.gradio-container .hide-container{ margin:0 !important; padding:0 !important; }
+.gradio-container span.svelte-1gfkn6j, .gradio-container .block-title{ margin:0 !important; }
+.gradio-container .wrap.svelte-1sk0pyu{ padding:0 !important; }
+.gradio-container .icon-button-wrapper{ display:none !important; }
+.gradio-container .block > label{ margin-bottom:2px !important; }
+.gradio-container .prose :is(h1,h2,h3,h4){ margin:6px 0 4px !important; }
+.gradio-container .prose p, .gradio-container .prose li{
+  margin:2px 0 !important; font-size:var(--text-xs) !important;
+}
+.gradio-container .prose ul{ margin:2px 0 !important; padding-left:16px !important; }
+footer, .gradio-container footer{ display:none !important; }
+"""
+
 SHELL_CSS = """
-/* ================= app shell ================= */
+/* ================= shell ================= */
 .gradio-container{
-  max-width:100% !important; padding:0 !important;
   background:var(--bg-canvas) !important;
   font-family:var(--font-body); font-weight:var(--weight-body);
-  color:var(--text-primary); font-size:var(--text-base);
+  color:var(--text-primary); font-size:var(--text-xs);
+  line-height:var(--leading-normal);
 }
-.gradio-container *{ border-radius:var(--radius-sm) !important; }
-footer{ display:none !important; }
-.gap.svelte-vt1mxs, .gradio-container .gap{ gap:var(--space-2) !important; }
 
 /* ================= typography ================= */
 .bit-h1,.bit-h2,.bit-h3{
@@ -71,26 +135,25 @@ footer{ display:none !important; }
 }
 .bit-h1{ font-size:var(--text-md); }
 .bit-h2{ font-size:var(--text-md); }
-.bit-h3{ font-size:var(--text-base); }
+.bit-h3{ font-size:var(--text-sm); }
 .bit-micro{
-  font-family:var(--font-tiny); font-size:var(--text-xs);
+  font-family:var(--font-tiny); font-size:var(--text-2xs);
   letter-spacing:var(--tracking-wider); text-transform:uppercase;
-  color:var(--text-tertiary); line-height:1.6;
+  color:var(--text-tertiary); line-height:1.7;
 }
 .bit-spacer{ flex:1; }
 
 /* ================= top bar ================= */
 .bit-topbar{
-  display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap;
+  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
   background:var(--bg-panel);
-  border-bottom:var(--border-width) solid var(--border-default);
-  padding:var(--space-3) var(--space-4);
-  position:sticky; top:0; z-index:var(--z-header);
+  border-bottom:1px solid var(--border-default);
+  padding:8px 12px; position:sticky; top:0; z-index:var(--z-header);
 }
 .bit-mark{
-  width:20px; height:20px; background:var(--accent-amber);
-  display:inline-block; flex:0 0 20px;
-  box-shadow:inset 0 0 0 3px var(--bg-panel), inset 0 0 0 6px var(--accent-amber);
+  width:18px; height:18px; background:var(--accent-amber);
+  display:inline-block; flex:0 0 18px;
+  box-shadow:inset 0 0 0 3px var(--bg-panel), inset 0 0 0 5px var(--accent-amber);
 }
 .bit-wordmark{
   font-family:var(--font-heading); font-size:var(--text-md); font-weight:500;
@@ -99,9 +162,9 @@ footer{ display:none !important; }
 .bit-slash{ color:var(--text-tertiary); }
 .bit-chip{
   display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
-  font-family:var(--font-mono); font-size:var(--text-sm);
-  border:var(--border-width) solid var(--border-default);
-  padding:3px var(--space-2); color:var(--text-secondary); background:transparent;
+  font-family:var(--font-mono); font-size:var(--text-2xs);
+  border:1px solid var(--border-default);
+  padding:3px 8px; color:var(--text-secondary); background:transparent;
 }
 .bit-chip-ok{ color:var(--accent-moss-strong); border-color:var(--accent-moss-dim); }
 .bit-chip-run{ color:var(--accent-amber-strong); border-color:var(--accent-amber-dim); }
@@ -109,199 +172,201 @@ footer{ display:none !important; }
 .bit-chip-accent{ color:var(--stone-950); background:var(--accent-amber);
   border-color:var(--accent-amber); }
 .bit-chip-ctx{ color:var(--text-tertiary); }
-a.bit-link{ text-decoration:none; }
-a.bit-link:hover{ color:var(--accent-amber-strong);
-  border-color:var(--accent-amber-dim); }
+a.bit-link{ text-decoration:none; color:var(--text-secondary); }
+a.bit-link:hover{
+  background:var(--accent-amber); color:var(--stone-950);
+  border-color:var(--accent-amber); text-decoration:none;
+}
 
 /* ================= panels ================= */
 .bit-panel{
-  background:var(--bg-panel);
-  border:var(--border-width) solid var(--border-default);
-  padding:var(--space-4); margin-bottom:var(--space-3);
+  background:var(--bg-panel); border:1px solid var(--border-default);
+  padding:12px; margin-bottom:8px;
 }
 .bit-panel-head{
-  display:flex; align-items:baseline; gap:var(--space-3);
-  border-bottom:var(--border-width) solid var(--border-subtle);
-  padding-bottom:var(--space-2); margin-bottom:var(--space-3);
+  display:flex; align-items:baseline; gap:10px;
+  border-bottom:1px solid var(--border-subtle);
+  padding-bottom:6px; margin-bottom:8px;
 }
 .bit-zone-title{
   font-family:var(--font-heading); text-transform:uppercase;
   letter-spacing:var(--tracking-wide); font-size:var(--text-md);
-  color:var(--text-primary); padding:var(--space-3) var(--space-1) var(--space-2);
-  display:flex; align-items:baseline; gap:var(--space-2);
+  color:var(--text-primary); padding:10px 2px 6px;
+  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
 }
 .bit-zone-title .bit-micro{ margin-left:auto; }
 
 /* ================= stat band ================= */
 .bit-statband{
-  display:flex; flex-wrap:wrap;
-  border:var(--border-width) solid var(--border-default);
-  background:var(--bg-panel); margin-bottom:var(--space-3);
+  display:flex; flex-wrap:wrap; border:1px solid var(--border-default);
+  background:var(--bg-panel); margin-bottom:8px;
 }
 .bit-stat{
-  flex:1 1 132px; padding:var(--space-3) var(--space-4);
-  border-right:var(--border-width) solid var(--border-subtle);
-  border-bottom:var(--border-width) solid var(--border-subtle);
+  flex:1 1 124px; padding:8px 12px;
+  border-right:1px solid var(--border-subtle);
+  border-bottom:1px solid var(--border-subtle);
 }
 .bit-stat-label{
-  font-family:var(--font-tiny); font-size:var(--text-xs);
+  font-family:var(--font-tiny); font-size:var(--text-2xs);
   letter-spacing:var(--tracking-wider); text-transform:uppercase;
   color:var(--text-tertiary);
 }
 .bit-stat-value{
-  font-family:var(--font-mono); font-size:var(--text-xl);
+  font-family:var(--font-mono); font-size:var(--text-lg);
   line-height:var(--leading-tight); color:var(--text-primary);
-  margin:3px 0 2px; letter-spacing:var(--tracking-tight);
+  margin:2px 0 1px; letter-spacing:var(--tracking-tight);
+  font-variant-numeric:tabular-nums;
 }
 .bit-stat-sub{
-  font-family:var(--font-mono); font-size:var(--text-xs);
+  font-family:var(--font-mono); font-size:var(--text-2xs);
   color:var(--text-tertiary);
 }
 .bit-up{ color:var(--fin-up-strong); } .bit-down{ color:var(--fin-down-strong); }
 
 /* ================= notes ================= */
 .bit-note{
-  font-family:var(--font-mono); font-size:var(--text-sm); line-height:1.5;
-  border-left:var(--border-width-strong) solid var(--accent-amber);
-  background:var(--bg-raised); padding:var(--space-2) var(--space-3);
-  color:var(--text-secondary); margin-bottom:var(--space-2);
+  font-family:var(--font-mono); font-size:var(--text-2xs); line-height:1.6;
+  border-left:2px solid var(--accent-amber);
+  background:var(--bg-raised); padding:6px 10px;
+  color:var(--text-secondary); margin-bottom:6px;
 }
 .bit-note-danger{ border-left-color:var(--fin-down); }
 .bit-tag{
   font-family:var(--font-tiny); font-size:var(--text-2xs);
   letter-spacing:var(--tracking-wider); border:1px solid var(--border-default);
-  padding:1px 4px; color:var(--text-tertiary); margin-left:4px;
+  padding:1px 5px; color:var(--text-tertiary); margin-left:4px;
 }
 
 /* ================= empty state ================= */
 .bit-empty{
   display:flex; flex-direction:column; align-items:center; justify-content:center;
-  gap:var(--space-3); padding:var(--space-8) var(--space-4); text-align:center;
-  border:var(--border-width) dashed var(--border-default); background:var(--bg-panel);
+  gap:10px; padding:60px 20px; text-align:center;
+  border:1px solid var(--border-default); background:var(--bg-panel);
 }
-.bit-empty-glyph{ font-size:34px; color:var(--accent-amber-dim); line-height:1; }
-.bit-empty-copy{ color:var(--text-secondary); max-width:46ch; font-size:var(--text-base); }
-.bit-kbd-row{ display:flex; gap:var(--space-2); flex-wrap:wrap; justify-content:center; }
+.bit-empty-glyph{ font-size:30px; color:var(--accent-amber-dim); line-height:1; }
+.bit-empty-copy{ color:var(--text-secondary); max-width:46ch; font-size:var(--text-xs); }
+.bit-kbd-row{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
 .bit-kbd{
-  font-family:var(--font-tiny); font-size:var(--text-xs);
+  font-family:var(--font-tiny); font-size:var(--text-2xs);
   letter-spacing:var(--tracking-wider); color:var(--text-tertiary);
-  border:var(--border-width) solid var(--border-default); padding:3px 7px;
+  border:1px solid var(--border-default); padding:3px 7px;
 }
 
 /* ================= run manager ================= */
 .bit-run-card{
-  border:var(--border-width) solid var(--border-subtle);
-  padding:var(--space-2); margin-bottom:var(--space-1); background:var(--bg-panel);
+  border:1px solid var(--border-subtle);
+  padding:6px 8px; margin-bottom:4px; background:var(--bg-panel);
 }
 .bit-run-card-sel{ border-color:var(--accent-amber-dim); }
-.bit-run-top{ display:flex; align-items:center; gap:var(--space-2); }
-.bit-run-name{ font-size:var(--text-sm); color:var(--text-primary);
+.bit-run-top{ display:flex; align-items:center; gap:6px; }
+.bit-run-name{ font-size:var(--text-xs); color:var(--text-primary);
   overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
-.bit-run-mark{ margin-left:auto; color:var(--accent-amber-strong); font-size:11px; }
-.bit-run-sharpe{ font-family:var(--font-mono); font-size:var(--text-base);
-  display:flex; gap:var(--space-2); }
+.bit-run-mark{ margin-left:auto; color:var(--accent-amber-strong); font-size:var(--text-2xs); }
+.bit-run-sharpe{ font-family:var(--font-mono); font-size:var(--text-xs);
+  display:flex; gap:6px; }
 .bit-run-ret{ margin-left:auto; color:var(--text-tertiary); }
-.bit-gloss{ margin-bottom:var(--space-2); }
-.bit-gloss-def{ font-size:var(--text-sm); color:var(--text-secondary); line-height:1.45; }
+.bit-gloss{ margin-bottom:6px; }
+.bit-stage{ font-size:var(--text-xs); font-family:var(--font-mono); line-height:1.7; }
+.bit-gloss-def{ font-size:var(--text-2xs); color:var(--text-secondary); line-height:1.6; }
 
 /* ================= KPI row ================= */
-.bit-kpi-row{ display:flex; flex-wrap:wrap; gap:var(--space-4); }
-.bit-kpi{ min-width:78px; }
-.bit-kpi-value{ font-family:var(--font-mono); font-size:var(--text-lg);
+.bit-kpi-row{ display:flex; flex-wrap:wrap; gap:12px; }
+.bit-kpi{ min-width:72px; }
+.bit-kpi-value{ font-family:var(--font-mono); font-size:var(--text-md);
   line-height:1.1; color:var(--text-primary); }
 
 /* ================= podium ================= */
-.bit-podium-row{ display:flex; gap:var(--space-3); flex-wrap:wrap;
-  margin-bottom:var(--space-3); }
+.bit-podium-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
 .bit-podium{
-  flex:1 1 200px; border:var(--border-width) solid var(--border-default);
-  background:var(--bg-panel); padding:var(--space-3);
-  border-top:var(--border-width-strong) solid var(--border-strong);
+  flex:1 1 210px; border:1px solid var(--border-default);
+  background:var(--bg-panel); padding:10px 12px;
+  border-top:2px solid var(--border-strong);
 }
 .bit-podium-1{ border-top-color:var(--accent-amber); }
 .bit-podium-2{ border-top-color:var(--accent-moss-strong); }
 .bit-podium-3{ border-top-color:var(--mute-teal); }
-.bit-podium-rank{ font-family:var(--font-tiny); font-size:var(--text-xs);
+.bit-podium-rank{ font-family:var(--font-tiny); font-size:var(--text-2xs);
   color:var(--text-tertiary); letter-spacing:var(--tracking-wider); }
 .bit-podium-name{ font-size:var(--text-md); color:var(--text-primary);
-  font-family:var(--font-heading); letter-spacing:var(--tracking-tight); }
-.bit-podium-value{ font-family:var(--font-mono); font-size:var(--text-2xl);
-  line-height:1.1; margin-top:var(--space-2); display:flex;
-  align-items:baseline; gap:var(--space-2); }
-.bit-podium-unit{ font-family:var(--font-tiny); font-size:var(--text-xs);
+  font-family:var(--font-heading); letter-spacing:var(--tracking-tight);
+  text-transform:none; }
+.bit-podium-value{ font-family:var(--font-mono); font-size:var(--text-xl);
+  line-height:1.1; margin-top:6px; display:flex; align-items:baseline; gap:6px;
+  font-variant-numeric:tabular-nums; }
+.bit-podium-unit{ font-family:var(--font-tiny); font-size:var(--text-2xs);
   letter-spacing:var(--tracking-wider); color:var(--text-tertiary); }
 
 /* ================= signal aggregator ================= */
-.bit-sig-grid{ display:flex; gap:var(--space-4); flex-wrap:wrap; align-items:flex-start; }
-.bit-sig-list{ flex:1 1 340px; min-width:0; }
+.bit-sig-grid{ display:flex; gap:12px; flex-wrap:wrap; align-items:flex-start; }
+.bit-sig-list{ flex:1 1 330px; min-width:0; }
 .bit-sig-row{
-  display:flex; align-items:center; gap:var(--space-3);
-  border:var(--border-width) solid var(--border-subtle);
-  padding:5px var(--space-2); margin-bottom:3px;
-  font-family:var(--font-mono); font-size:var(--text-sm);
+  display:flex; align-items:center; gap:10px;
+  border:1px solid var(--border-subtle);
+  padding:5px 10px; margin-bottom:3px;
+  font-family:var(--font-mono); font-size:var(--text-xs);
 }
 .bit-sig-name{ flex:1 1 auto; color:var(--text-secondary);
   overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
-.bit-sig-dir{ width:74px; text-align:right; }
-.bit-sig-edge{ width:64px; text-align:right; }
-.bit-sig-acc,.bit-sig-w{ width:64px; text-align:right; color:var(--text-tertiary); }
+.bit-sig-dir{ width:70px; text-align:right; }
+.bit-sig-edge{ width:60px; text-align:right; }
+.bit-sig-acc,.bit-sig-w{ width:58px; text-align:right; color:var(--text-tertiary); }
 .bit-consensus{
-  flex:0 0 210px; border:var(--border-width) solid var(--accent-moss-dim);
-  background:var(--bg-raised); padding:var(--space-3);
+  flex:0 0 200px; border:1px solid var(--accent-moss-dim);
+  background:var(--bg-raised); padding:10px 12px;
 }
-.bit-consensus-dir{ font-family:var(--font-heading); font-size:var(--text-2xl);
-  line-height:1.1; margin:var(--space-1) 0; letter-spacing:var(--tracking-tight); }
-.bit-conf-track{ height:4px; background:var(--bg-sunken); margin:var(--space-2) 0 4px; }
+.bit-consensus-dir{ font-family:var(--font-heading); font-size:var(--text-xl);
+  line-height:1.1; margin:2px 0; letter-spacing:var(--tracking-tight); }
+.bit-conf-track{ height:4px; background:var(--bg-sunken); margin:6px 0 4px; }
 .bit-conf-fill{ height:100%; }
 
-/* ================= gradio overrides ================= */
+/* ================= gradio controls, restyled ================= */
 .gradio-container .tabs > .tab-nav{
-  border-bottom:var(--border-width) solid var(--border-default) !important;
+  border-bottom:1px solid var(--border-default) !important;
   background:transparent !important; gap:0 !important; flex-wrap:wrap;
+  margin-bottom:0 !important;
 }
 .gradio-container .tabs > .tab-nav > button{
   font-family:var(--font-heading) !important; text-transform:uppercase;
-  letter-spacing:var(--tracking-wide); font-size:var(--text-base) !important;
+  letter-spacing:var(--tracking-wide); font-size:var(--text-xs) !important;
   color:var(--text-tertiary) !important; background:transparent !important;
   border:none !important; border-bottom:2px solid transparent !important;
-  padding:var(--space-2) var(--space-4) !important;
+  padding:7px 12px !important; margin:0 !important;
 }
 .gradio-container .tabs > .tab-nav > button:hover{ color:var(--text-secondary) !important; }
 .gradio-container .tabs > .tab-nav > button.selected{
   color:var(--text-primary) !important;
   border-bottom-color:var(--accent-amber) !important;
 }
-.gradio-container .form, .gradio-container .block{
-  background:transparent !important; border:none !important;
-}
-/* Field captions only -- scoped so it never swallows option text. */
+
+/* Field captions */
 .block > label > span, .block > .form > label > span{
-  font-family:var(--font-tiny) !important; font-size:var(--text-xs) !important;
+  font-family:var(--font-tiny) !important; font-size:var(--text-2xs) !important;
   letter-spacing:var(--tracking-wider) !important; text-transform:uppercase;
   color:var(--text-tertiary) !important;
 }
 input, select, textarea{
-  font-family:var(--font-mono) !important; font-size:var(--text-base) !important;
+  font-family:var(--font-mono) !important; font-size:var(--text-xs) !important;
   background:var(--bg-sunken) !important; color:var(--text-primary) !important;
-  border:var(--border-width) solid var(--border-default) !important;
+  border:1px solid var(--border-default) !important;
+  padding:5px 8px !important;
 }
 input:focus, select:focus, textarea:focus{
-  outline:1px solid var(--focus-ring) !important; outline-offset:-1px;
+  outline:2px solid var(--focus-ring) !important; outline-offset:-1px;
 }
 
-/* Radio / checkbox options read as segmented chips. */
+/* Radio / checkbox options as segmented chips */
 .gradio-container fieldset label,
 .gradio-container .wrap label:has(input[type="radio"]),
 .gradio-container .wrap label:has(input[type="checkbox"]){
   background:transparent !important;
-  border:var(--border-width) solid var(--border-default) !important;
+  border:1px solid var(--border-default) !important;
   color:var(--text-secondary) !important;
-  padding:4px 10px !important; margin:2px !important;
+  padding:3px 8px !important; margin:2px !important;
 }
 .gradio-container fieldset label span,
 .gradio-container .wrap label:has(input[type="radio"]) span,
 .gradio-container .wrap label:has(input[type="checkbox"]) span{
-  font-family:var(--font-mono) !important; font-size:var(--text-base) !important;
+  font-family:var(--font-mono) !important; font-size:var(--text-2xs) !important;
   letter-spacing:var(--tracking-normal) !important; text-transform:none !important;
   color:var(--text-secondary) !important; opacity:1 !important;
 }
@@ -319,52 +384,66 @@ input:focus, select:focus, textarea:focus{
   accent-color:var(--accent-amber);
 }
 
-/* Accordions read as the design's numbered sections. */
-.gradio-container .label-wrap, .bit-accordion > .label-wrap{
+/* Accordions as the design's numbered sections */
+.gradio-container .label-wrap{
   font-family:var(--font-heading) !important; text-transform:uppercase;
-  letter-spacing:var(--tracking-wide); font-size:var(--text-base) !important;
+  letter-spacing:var(--tracking-wide); font-size:var(--text-xs) !important;
   color:var(--text-primary) !important;
-  border-bottom:var(--border-width) solid var(--border-subtle) !important;
-  padding:var(--space-2) 0 !important;
+  border-bottom:1px solid var(--border-subtle) !important;
+  padding:7px 0 !important; margin:0 !important;
 }
 .bit-accordion{
   border:none !important;
-  border-top:var(--border-width) solid var(--border-subtle) !important;
-  padding:0 !important; margin-bottom:var(--space-1) !important;
+  border-top:1px solid var(--border-subtle) !important;
+  padding:0 !important; margin:0 0 2px !important;
 }
 
-/* Buttons */
+/* Buttons -- base.css supplies the inverted hover treatment */
 .bit-run-btn{
   background:var(--accent-amber) !important; color:var(--stone-950) !important;
   font-family:var(--font-heading) !important; text-transform:uppercase;
-  letter-spacing:var(--tracking-wide); border:none !important; font-weight:500 !important;
+  letter-spacing:var(--tracking-wide); border:1px solid var(--accent-amber) !important;
+  font-weight:500 !important; font-size:var(--text-xs) !important;
+  padding:7px 12px !important;
+}
+.bit-run-btn:hover{
+  background:var(--stone-950) !important; color:var(--accent-amber) !important;
 }
-.bit-run-btn:hover{ background:var(--accent-amber-strong) !important; }
 .bit-ghost-btn{
   background:transparent !important; color:var(--text-secondary) !important;
-  border:var(--border-width) solid var(--border-default) !important;
-  font-family:var(--font-mono) !important; font-size:var(--text-sm) !important;
+  border:1px solid var(--border-default) !important;
+  font-family:var(--font-mono) !important; font-size:var(--text-2xs) !important;
+  padding:5px 10px !important;
+}
+.bit-ghost-btn:hover{
+  background:var(--accent-amber) !important; color:var(--stone-950) !important;
+  border-color:var(--accent-amber) !important;
 }
-.bit-ghost-btn:hover{ border-color:var(--border-strong) !important;
-  color:var(--text-primary) !important; }
 
 /* Tables */
-.bit-table table{ font-family:var(--font-mono) !important; font-size:var(--text-sm) !important; }
+.bit-table table{
+  font-family:var(--font-mono) !important; font-size:var(--text-2xs) !important;
+  font-variant-numeric:tabular-nums;
+}
 .bit-table thead th{
-  font-family:var(--font-tiny) !important; font-size:var(--text-xs) !important;
+  font-family:var(--font-tiny) !important; font-size:var(--text-2xs) !important;
   letter-spacing:var(--tracking-wider); text-transform:uppercase;
   color:var(--text-tertiary) !important; background:var(--bg-raised) !important;
-  border-bottom:var(--border-width) solid var(--border-default) !important;
+  border-bottom:1px solid var(--border-default) !important;
+  padding:5px 8px !important;
+}
+.bit-table tbody td{
+  border-color:var(--border-subtle) !important; padding:4px 8px !important;
+  color:var(--text-secondary) !important;
 }
-.bit-table tbody td{ border-color:var(--border-subtle) !important; }
 
 /* Footer */
 .bit-footer{
   position:sticky; bottom:0; z-index:var(--z-header);
-  display:flex; justify-content:space-between; gap:var(--space-4);
-  background:var(--bg-panel); border-top:var(--border-width) solid var(--border-default);
-  padding:var(--space-2) var(--space-4);
-  font-family:var(--font-mono); font-size:var(--text-sm); color:var(--text-tertiary);
+  display:flex; justify-content:space-between; gap:12px;
+  background:var(--bg-panel); border-top:1px solid var(--border-default);
+  padding:6px 12px;
+  font-family:var(--font-mono); font-size:var(--text-2xs); color:var(--text-tertiary);
 }
 .bit-footer-right{ white-space:nowrap; }
 
@@ -378,28 +457,37 @@ input:focus, select:focus, textarea:focus{
 
 
 def full_css() -> str:
-    return "\n".join([_font_face_css(), _tokens_css(), SHELL_CSS])
+    """Fonts, the design system's globals, the Gradio reset, then the shell."""
+    return "\n".join([_font_face_css(), _global_css(), SELECTION_FIX,
+                      GRADIO_RESET, SHELL_CSS])
 
 
 def bit_theme() -> gr.Theme:
-    """Gradio theme aligned to the token palette.
+    """Gradio theme configured to the design's scale.
 
-    The CSS above does the detailed work; this makes Gradio's own generated
-    chrome start from the right colors instead of fighting it everywhere.
+    Setting Gradio's own spacing/radius/text variables is what stops its
+    defaults from injecting padding and gaps the design never asked for. Doing
+    it here rather than with `!important` overrides means the generated CSS is
+    already right instead of being corrected afterwards.
     """
     return gr.themes.Base(
         primary_hue=gr.themes.colors.yellow,
         secondary_hue=gr.themes.colors.lime,
         neutral_hue=gr.themes.colors.stone,
-        font=[gr.themes.GoogleFont("Inter"), "system-ui", "sans-serif"],
+        font=["Styrene A", "system-ui", "sans-serif"],
         font_mono=[gr.themes.GoogleFont("JetBrains Mono"), "ui-monospace", "monospace"],
+        spacing_size=gr.themes.sizes.spacing_sm,
+        radius_size=gr.themes.sizes.radius_none,
+        text_size=gr.themes.sizes.text_sm,
     ).set(
+        # Palette
         body_background_fill="#161512",
         body_text_color="#f7f4ec",
         background_fill_primary="#1d1c18",
         background_fill_secondary="#24221d",
-        block_background_fill="#1d1c18",
+        block_background_fill="transparent",
         block_border_color="#3d3a32",
+        block_border_width="0px",
         block_label_text_color="#6f6a56",
         border_color_primary="#3d3a32",
         button_primary_background_fill="#af9209",
@@ -407,12 +495,37 @@ def bit_theme() -> gr.Theme:
         button_secondary_background_fill="transparent",
         button_secondary_text_color="#b6b09a",
         input_background_fill="#000000",
-        block_radius="4px",
-        button_large_radius="4px",
-        button_small_radius="4px",
+        input_border_color="#3d3a32",
+        # Spacing -- the design uses 12px panel padding and 6-10px gaps.
+        layout_gap="8px",
+        block_padding="0px",
+        form_gap_width="0px",
+        block_label_margin="0px",
+        block_title_padding="0px",
+        input_padding="5px 8px",
+        checkbox_label_padding="3px 8px",
+        checkbox_label_gap="6px",
+        button_small_padding="5px 10px",
+        button_large_padding="7px 12px",
+        # Type -- 10px workhorse, matching the design's dominant size.
+        body_text_size="10px",
+        input_text_size="10px",
+        block_label_text_size="8px",
+        block_title_text_size="10px",
+        button_small_text_size="8px",
+        button_large_text_size="10px",
+        checkbox_label_text_size="8px",
+        prose_text_size="10px",
+        # Square, everywhere.
+        block_radius="0px",
+        input_radius="0px",
+        button_large_radius="0px",
+        button_small_radius="0px",
+        checkbox_border_radius="0px",
+        container_radius="0px",
     )
 
 
 def static_paths() -> list[str]:
-    """Directories Gradio may serve (fonts, mark)."""
+    """Directories Gradio may serve (fonts, tokens, mark)."""
     return [str(ASSETS)]

tests/test_ui.py

@@ -298,3 +298,121 @@ def test_default_three_year_daily_run_is_under_two_seconds():
     t0 = time.perf_counter()
     runtime.execute(req)
     assert time.perf_counter() - t0 < 2.0
+
+
+# --------------------------------------------------------------------------
+# Design-system fidelity
+#
+# The original bug this guards: base.css was vendored into assets/ but never
+# loaded, so the app silently inherited Gradio's rounded, roomy defaults and
+# only approximated the design.
+# --------------------------------------------------------------------------
+
+
+def test_every_global_stylesheet_the_design_system_declares_is_loaded():
+    """The DS manifest lists six globalCssPaths; all of them must reach the page."""
+    from src.ui import theme
+
+    css = theme.full_css()
+    # colors / typography / spacing / base, each identified by a rule only it has
+    markers = {
+        "colors.css": "--accent-amber:#af9209",
+        "typography.css": "--text-2xs:8px",
+        "spacing.css": "--space-4:16px",
+        "base.css": "border-radius:0 !important",
+    }
+    for name, marker in markers.items():
+        assert marker in css, f"{name} is not loaded into the page"
+
+
+def test_base_css_square_corner_reset_is_present():
+    from src.ui import theme
+
+    assert "border-radius:0 !important" in theme.full_css()
+    # The app's own shell must not reintroduce a rounded default on top of the
+    # reset. base.css legitimately defines opt-in `.bit-rounded*` utilities, so
+    # only our shell layer is checked here.
+    assert "border-radius" not in theme.SHELL_CSS
+    assert "border-radius" not in theme.GRADIO_RESET
+
+
+def test_base_css_scrollbar_and_selection_rules_survive():
+    from src.ui import theme
+
+    css = theme.full_css()
+    assert "::-webkit-scrollbar" in css
+    assert "::selection" in css
+
+
+def test_data_surfaces_stay_selectable_despite_base_css():
+    """base.css sets user-select:none globally; tables must opt back in."""
+    from src.ui import theme
+
+    css = theme.full_css()
+    assert "user-select: text" in css
+    assert ".bit-table" in css.split("user-select: text")[0][-400:] or \
+           "table, table *" in css
+
+
+def test_gradio_layout_spacing_is_configured_not_left_default():
+    """Gradio defaults to layout_gap *spacing_xxl and block_padding *spacing_xl."""
+    from src.ui import theme
+
+    t = theme.bit_theme()
+    assert t.layout_gap == "8px"
+    assert t.block_padding == "0px"
+    assert t.form_gap_width == "0px"
+
+
+def test_gradio_radius_is_squared_off():
+    from src.ui import theme
+
+    t = theme.bit_theme()
+    for attr in ("block_radius", "input_radius", "button_large_radius",
+                 "button_small_radius", "container_radius"):
+        assert getattr(t, attr) == "0px", f"{attr} is not square"
+
+
+def test_type_scale_matches_the_designs_dominant_sizes():
+    """The design's workhorse is --text-xs (10px) with --text-2xs (8px) micro."""
+    from src.ui import theme
+
+    t = theme.bit_theme()
+    assert t.body_text_size == "10px"
+    assert t.block_label_text_size == "8px"
+
+
+def test_no_hardcoded_pixel_font_sizes_outside_the_theme():
+    """Component markup must size through tokens, never literal px."""
+    import re
+    from pathlib import Path
+
+    root = Path(__file__).resolve().parent.parent
+    for rel in ("src/ui/components.py", "src/ui/compare_tab.py", "app.py"):
+        text = (root / rel).read_text()
+        assert not re.search(r"font-size:\s*\d", text), \
+            f"{rel} hardcodes a pixel font-size instead of using a token"
+
+
+def test_every_bit_class_used_in_markup_has_a_css_rule():
+    """A class with no rule renders unstyled and silently breaks the design."""
+    import re
+    from pathlib import Path
+
+    from src.ui import theme
+
+    root = Path(__file__).resolve().parent.parent
+    used = set()
+    for rel in ("src/ui/components.py", "src/ui/compare_tab.py", "app.py"):
+        used |= set(re.findall(r"bit-[a-z0-9-]+", (root / rel).read_text()))
+    defined = set(re.findall(r"\.(bit-[a-z0-9-]+)", theme.full_css()))
+    missing = sorted(c for c in used if c not in defined and not c.endswith("-"))
+    assert not missing, f"classes used in markup but never styled: {missing}"
+
+
+def test_fonts_are_served_for_every_weight_the_design_uses():
+    from src.ui import theme
+
+    css = theme.full_css()
+    assert css.count("@font-face") >= 5
+    assert "Styrene A" in css and "Mac Minecraft" in css