Improve Space typography readability

app.py

@@ -16,6 +16,32 @@ DATASET = DATA / "dataset_bundle"
 MANIFEST = json.loads((DATA / "public_release_manifest.json").read_text(encoding="utf-8"))
 CLAIM_BOUNDARY = json.loads((AUDIT / "claim_boundary.json").read_text(encoding="utf-8"))
 SOURCE_GAPS = json.loads((AUDIT / "source_gap_report.json").read_text(encoding="utf-8"))
+FONT_FAMILY = "Inter, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif"
+
+
+def style_figure(fig):
+    fig.update_layout(
+        template="plotly_white",
+        font=dict(family=FONT_FAMILY, size=14, color="#1f2933"),
+        title_font=dict(family=FONT_FAMILY, size=18, color="#0f172a"),
+        legend=dict(font=dict(family=FONT_FAMILY, size=13, color="#334155")),
+        hoverlabel=dict(font_size=13, font_family=FONT_FAMILY),
+        paper_bgcolor="#ffffff",
+        plot_bgcolor="#ffffff",
+    )
+    fig.update_xaxes(
+        title_font=dict(family=FONT_FAMILY, size=14, color="#334155"),
+        tickfont=dict(family=FONT_FAMILY, size=13, color="#334155"),
+        gridcolor="#e7edf5",
+        linecolor="#cbd5e1",
+    )
+    fig.update_yaxes(
+        title_font=dict(family=FONT_FAMILY, size=14, color="#334155"),
+        tickfont=dict(family=FONT_FAMILY, size=13, color="#334155"),
+        gridcolor="#e7edf5",
+        linecolor="#cbd5e1",
+    )
+    return fig
 
 
 def read_jsonl_gz(name: str, limit: int | None = None) -> pd.DataFrame:
@@ -103,7 +129,7 @@ def return_chart():
         margin=dict(l=40, r=20, t=60, b=50),
         legend_title_text="Date basis",
     )
-    return fig
+    return style_figure(fig)
 
 
 def filing_delay_chart():
@@ -122,7 +148,7 @@ def filing_delay_chart():
         showlegend=False,
         margin=dict(l=40, r=20, t=60, b=50),
     )
-    return fig
+    return style_figure(fig)
 
 
 def trade_type_chart():
@@ -137,7 +163,7 @@ def trade_type_chart():
         yaxis_title="Rows",
         margin=dict(l=40, r=20, t=60, b=50),
     )
-    return fig
+    return style_figure(fig)
 
 
 def top_ticker_chart():
@@ -152,7 +178,7 @@ def top_ticker_chart():
         margin=dict(l=80, r=20, t=60, b=50),
         coloraxis_showscale=False,
     )
-    return fig
+    return style_figure(fig)
 
 
 def wealth_senators() -> list[str]:
@@ -163,7 +189,7 @@ def wealth_senators() -> list[str]:
 def wealth_chart(senator_id: str):
     frame = WEALTH[WEALTH["senator_id"] == senator_id].sort_values("report_year_num")
     if frame.empty:
-        return go.Figure()
+        return style_figure(go.Figure())
     fig = go.Figure()
     fig.add_trace(
         go.Scatter(
@@ -203,7 +229,7 @@ def wealth_chart(senator_id: str):
         yaxis_title="Net-worth interval dollars",
         margin=dict(l=70, r=20, t=60, b=50),
     )
-    return fig
+    return style_figure(fig)
 
 
 def wealth_table(senator_id: str) -> pd.DataFrame:
@@ -265,14 +291,99 @@ def file_inventory() -> pd.DataFrame:
 
 
 CSS = """
-:root { --accent: #1b6b63; --ink: #1f2933; --muted: #637083; --warn: #9a5a00; }
-.gradio-container { max-width: 1180px !important; margin: auto; color: var(--ink); }
-.metrics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin: 12px 0 16px; }
-.metric { border: 1px solid #d8dee8; border-radius: 8px; padding: 12px; background: #ffffff; }
-.metric-value { font-size: 1.35rem; font-weight: 750; color: var(--accent); line-height: 1.2; overflow-wrap: anywhere; }
-.metric-label { font-size: .82rem; color: var(--muted); margin-top: 4px; }
-.boundary { border-left: 5px solid var(--warn); background: #fff7e8; padding: 12px 14px; border-radius: 6px; margin: 12px 0 18px; }
-.small-note { color: var(--muted); font-size: .94rem; }
+:root {
+  --accent: #1b6b63;
+  --ink: #172033;
+  --muted: #475569;
+  --warn: #8a4b00;
+  --line: #cbd5e1;
+  --soft: #f8fafc;
+  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+.gradio-container,
+.gradio-container * {
+  font-family: var(--font) !important;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  letter-spacing: 0;
+}
+.gradio-container {
+  max-width: 1180px !important;
+  margin: auto;
+  color: var(--ink);
+  font-size: 16px;
+  line-height: 1.48;
+}
+.gradio-container h1,
+.gradio-container .prose h1,
+.gradio-container .markdown h1 {
+  color: #0f172a !important;
+  font-size: 2rem !important;
+  line-height: 1.15 !important;
+  font-weight: 800 !important;
+  margin: 10px 0 8px !important;
+}
+.gradio-container p,
+.gradio-container li,
+.gradio-container .prose {
+  color: #334155 !important;
+  font-size: 1rem !important;
+  line-height: 1.58 !important;
+}
+.gradio-container label,
+.gradio-container .label-wrap,
+.gradio-container .label-wrap span,
+.gradio-container button[role="tab"] {
+  color: #0f172a !important;
+  font-size: 1rem !important;
+  font-weight: 650 !important;
+}
+.gradio-container button[role="tab"][aria-selected="true"] {
+  color: var(--accent) !important;
+  font-weight: 800 !important;
+}
+.gradio-container input,
+.gradio-container textarea,
+.gradio-container select {
+  color: #111827 !important;
+  font-size: 1rem !important;
+}
+.metrics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 14px 0 18px; }
+.metric { border: 1px solid var(--line); border-radius: 8px; padding: 13px 14px; background: #ffffff; }
+.metric-value { font-size: 1.45rem; font-weight: 800; color: var(--accent); line-height: 1.18; overflow-wrap: anywhere; }
+.metric-label { font-size: .92rem; color: var(--muted); font-weight: 650; margin-top: 5px; }
+.boundary {
+  border-left: 5px solid var(--warn);
+  background: #fff7e8;
+  color: #3f2a00;
+  padding: 13px 15px;
+  border-radius: 6px;
+  margin: 12px 0 20px;
+  font-size: 1rem;
+  line-height: 1.55;
+}
+.boundary strong { color: #2f1d00; font-weight: 800; }
+.small-note { color: var(--muted); font-size: .98rem; }
+.gradio-container table,
+.gradio-container th,
+.gradio-container td {
+  color: #111827 !important;
+  font-size: .94rem !important;
+  line-height: 1.45 !important;
+}
+.gradio-container th {
+  background: #eef4f8 !important;
+  color: #0f172a !important;
+  font-weight: 750 !important;
+}
+.gradio-container td {
+  background: #ffffff !important;
+}
+.gradio-container .dataframe,
+.gradio-container .table-wrap {
+  border-color: var(--line) !important;
+}
 @media (max-width: 900px) { .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
 """
 

space_bundle_manifest.json

@@ -8,8 +8,8 @@
   "files": [
     {
       "path": "app.py",
-      "sha256": "5f735e68eb1b110bd6eee57f64778b345973fd0ed68d190ee234d59b2488fa51",
-      "byte_count": 14069
+      "sha256": "95b3e4f476a8708cbf5892ab0b788b176224373631492978b9bf9f72a5adac20",
+      "byte_count": 17143
     },
     {
       "path": "data/audit/claim_boundary.json",
@@ -107,5 +107,5 @@
       "byte_count": 47
     }
   ],
-  "manifest_hash": "6c62dc74250b237008975bbf783f728ccb266c8d1001e0e31ec63defb9b0244e"
+  "manifest_hash": "0b3c002cb32fe8dfd5f891d084ad18701d28ebb250e71b4f5606f85ce2172660"
 }