redesign: clean header banner + consistent sentence-case About text

app.py

@@ -132,7 +132,7 @@ CUSTOM_CSS = """
 .dark .tabs { background: #ffffff !important; }
 .dark .tab-nav button { color: #2d3748 !important; }
 .dark .tab-nav button.selected {
-  color: #1a365d !important;
+  color: #0f172a !important;
   border-color: #3182ce !important;
 }
 .dark .block { background: #ffffff !important; }
@@ -184,35 +184,46 @@ def _base_layout(**overrides) -> dict:
 
 
 def build_header(last_updated: str, n_entries: int) -> str:
+    btn = (
+        "display:inline-block;padding:0.45rem 1.1rem;border-radius:8px;"
+        "text-decoration:none;font-size:0.82rem;font-weight:600;"
+        "transition:opacity 0.15s"
+    )
     return f"""
-    <div style="background:linear-gradient(135deg,#1a365d 0%,#2b6cb0 100%);
-                color:white;padding:2rem;text-align:center;border-radius:12px;
-                margin-bottom:0.5rem">
-      <h1 style="font-size:2rem;margin:0;font-weight:700">
-        \U0001f9ec BioDesignBench Leaderboard</h1>
-      <p style="opacity:0.85;margin:0.3rem 0 0;font-size:1rem">
-        Evaluating LLM Agents on Protein Design via MCP Tools</p>
-      <div style="margin-top:0.6rem;display:flex;justify-content:center;
-                  gap:0.8rem;flex-wrap:wrap">
+    <div style="background:#ffffff;border:1px solid #e2e8f0;
+                padding:2.2rem 2rem 1.8rem;text-align:center;
+                border-radius:16px;margin-bottom:0.8rem;
+                box-shadow:0 1px 4px rgba(0,0,0,0.04)">
+      <p style="margin:0 0 0.3rem;font-size:0.75rem;font-weight:700;
+                letter-spacing:0.12em;text-transform:uppercase;
+                color:#3182ce">Romero Lab &middot; Duke University</p>
+      <h1 style="font-size:2rem;margin:0;font-weight:800;color:#0f172a;
+                  letter-spacing:-0.02em">
+        \U0001f9ec BioDesignBench</h1>
+      <p style="color:#64748b;margin:0.4rem 0 0;font-size:1rem;
+                font-weight:400">
+        Evaluating LLM agents on protein design via MCP tools</p>
+      <div style="margin-top:1rem;display:flex;justify-content:center;
+                  gap:0.6rem;flex-wrap:wrap">
         <a href="{PAPER_URL}" target="_blank"
-           style="background:rgba(255,255,255,0.2);color:white;
-                  padding:0.3rem 0.8rem;border-radius:5px;
-                  text-decoration:none;font-size:0.85rem;
-                  font-weight:600">\U0001f4c4 Paper</a>
+           style="{btn};background:#0f172a;color:#ffffff">
+           \U0001f4c4 Paper</a>
         <a href="{GITHUB_URL}" target="_blank"
-           style="background:rgba(255,255,255,0.2);color:white;
-                  padding:0.3rem 0.8rem;border-radius:5px;
-                  text-decoration:none;font-size:0.85rem;
-                  font-weight:600">\U0001f4bb GitHub</a>
+           style="{btn};background:#f1f5f9;color:#334155">
+           \U0001f4bb GitHub</a>
         <a href="{HF_URL}" target="_blank"
-           style="background:rgba(255,255,255,0.2);color:white;
-                  padding:0.3rem 0.8rem;border-radius:5px;
-                  text-decoration:none;font-size:0.85rem;
-                  font-weight:600">\U0001f917 HuggingFace</a>
+           style="{btn};background:#f1f5f9;color:#334155">
+           \U0001f917 HuggingFace</a>
+      </div>
+      <div style="margin-top:1rem;display:flex;justify-content:center;
+                  gap:1.5rem;flex-wrap:wrap">
+        <span style="font-size:0.78rem;color:#94a3b8">
+          76 tasks</span>
+        <span style="font-size:0.78rem;color:#94a3b8">
+          {n_entries} agents</span>
+        <span style="font-size:0.78rem;color:#94a3b8">
+          Updated {last_updated}</span>
       </div>
-      <div style="font-size:0.8rem;opacity:0.6;margin-top:0.5rem">
-        Romero Lab, Duke University &middot; Last updated: {last_updated}
-        &middot; 76 tasks &middot; {n_entries} conditions</div>
     </div>"""
 
 
@@ -278,9 +289,9 @@ def build_leaderboard_table(
         "font-size:0.9rem"
     )
     TH = (
-        "background:#1a365d;color:white;padding:0.75rem 1rem;"
-        "text-align:left;font-size:0.8rem;text-transform:uppercase;"
-        "letter-spacing:0.5px"
+        "background:#0f172a;color:white;padding:0.75rem 1rem;"
+        "text-align:left;font-size:0.75rem;text-transform:uppercase;"
+        "letter-spacing:0.05em;font-weight:600"
     )
 
     rows = []
@@ -300,7 +311,7 @@ def build_leaderboard_table(
         else:
             llm_rank += 1
             rcolor = {1: "#d69e2e", 2: "#a0aec0", 3: "#c17832"}.get(
-                llm_rank, "#1a365d"
+                llm_rank, "#0f172a"
             )
             rsize = (
                 "1.1rem"
@@ -407,8 +418,8 @@ def build_heatmap(entry: dict) -> str:
     """HTML heatmap table for one agent across 17 taxonomy cells."""
     ts = entry.get("taxonomy_scores", {})
     TH = (
-        "background:#1a365d;color:white;padding:0.6rem 0.8rem;"
-        "text-align:center;font-size:0.75rem"
+        "background:#0f172a;color:white;padding:0.6rem 0.8rem;"
+        "text-align:center;font-size:0.75rem;font-weight:600"
     )
     TD = (
         "text-align:center;padding:0.5rem;font-size:0.85rem;"
@@ -520,7 +531,7 @@ def build_mode_cards(entries: list) -> str:
         cards.append(
             '<div style="background:white;border-radius:10px;padding:1.2rem;'
             'box-shadow:0 1px 3px rgba(0,0,0,0.08)">'
-            f'<h4 style="font-size:0.95rem;color:#1a365d;'
+            f'<h4 style="font-size:0.95rem;color:#0f172a;'
             f'margin:0 0 0.8rem">{name}</h4>'
             f'{"".join(lines)}</div>'
         )
@@ -536,148 +547,152 @@ def build_mode_cards(entries: list) -> str:
 
 
 def build_about() -> str:
-    return """
+    h2 = (
+        'style="color:#0f172a;margin:0 0 0.8rem;font-size:1.25rem;'
+        'font-weight:700"'
+    )
+    h3 = (
+        'style="color:#334155;margin:1.2rem 0 0.5rem;font-size:1rem;'
+        'font-weight:600"'
+    )
+    p = 'style="margin-bottom:0.8rem;color:#475569;line-height:1.6"'
+    card = (
+        'style="background:#ffffff;border:1px solid #e2e8f0;'
+        'border-radius:12px;padding:2rem;margin-bottom:1.2rem"'
+    )
+    stat_box = (
+        'style="background:#f8fafc;border:1px solid #e2e8f0;'
+        'border-radius:10px;padding:1rem;text-align:center"'
+    )
+    return f"""
     <div style="max-width:900px;margin:0 auto">
 
-      <div style="background:white;border-radius:10px;padding:2rem;
-                  box-shadow:0 1px 3px rgba(0,0,0,0.08);margin-bottom:1.5rem">
-        <h2 style="color:#1a365d;margin:0 0 0.8rem;font-size:1.3rem">
-          What is BioDesignBench?</h2>
-        <p style="margin-bottom:0.8rem;color:#2d3748;line-height:1.6">
+      <div {card}>
+        <h2 {h2}>What is BioDesignBench?</h2>
+        <p {p}>
           BioDesignBench is the first comprehensive benchmark for evaluating
           LLM agents on protein design tasks via MCP (Model Context Protocol)
           tool use. Unlike existing benchmarks that focus on model-only
-          evaluation, BioDesignBench tests the full design loop:
-          <strong>Natural language &rarr; Design &rarr; Evaluate &rarr;
-          Iterate</strong>.</p>
+          metrics, BioDesignBench tests the full agentic design loop:
+          <strong>prompt &rarr; design &rarr; validate &rarr;
+          iterate</strong>.</p>
         <div style="display:grid;grid-template-columns:
-                    repeat(auto-fit,minmax(140px,1fr));gap:1rem;margin:1rem 0">
-          <div style="background:#f7fafc;border-radius:8px;padding:1rem;
-                      text-align:center">
-            <div style="font-size:1.8rem;font-weight:700;color:#3182ce">
+                    repeat(auto-fit,minmax(140px,1fr));gap:0.8rem;
+                    margin:1rem 0">
+          <div {stat_box}>
+            <div style="font-size:1.8rem;font-weight:800;color:#0f172a">
               76</div>
-            <div style="font-size:0.8rem;color:#718096">Design Tasks</div>
+            <div style="font-size:0.78rem;color:#64748b">design tasks</div>
           </div>
-          <div style="background:#f7fafc;border-radius:8px;padding:1rem;
-                      text-align:center">
-            <div style="font-size:1.8rem;font-weight:700;color:#3182ce">
+          <div {stat_box}>
+            <div style="font-size:1.8rem;font-weight:800;color:#0f172a">
               17</div>
-            <div style="font-size:0.8rem;color:#718096">Taxonomy Cells</div>
+            <div style="font-size:0.78rem;color:#64748b">taxonomy cells</div>
           </div>
-          <div style="background:#f7fafc;border-radius:8px;padding:1rem;
-                      text-align:center">
-            <div style="font-size:1.8rem;font-weight:700;color:#3182ce">
+          <div {stat_box}>
+            <div style="font-size:1.8rem;font-weight:800;color:#0f172a">
               17</div>
-            <div style="font-size:0.8rem;color:#718096">MCP Tools</div>
+            <div style="font-size:0.78rem;color:#64748b">MCP tools</div>
           </div>
-          <div style="background:#f7fafc;border-radius:8px;padding:1rem;
-                      text-align:center">
-            <div style="font-size:1.8rem;font-weight:700;color:#3182ce">
+          <div {stat_box}>
+            <div style="font-size:1.8rem;font-weight:800;color:#0f172a">
               100</div>
-            <div style="font-size:0.8rem;color:#718096">Point Rubric</div>
+            <div style="font-size:0.78rem;color:#64748b">point rubric</div>
           </div>
         </div>
       </div>
 
-      <div style="background:white;border-radius:10px;padding:2rem;
-                  box-shadow:0 1px 3px rgba(0,0,0,0.08);margin-bottom:1.5rem">
-        <h2 style="color:#1a365d;margin:0 0 0.8rem;font-size:1.3rem">
-          How to Submit</h2>
-        <h3 style="color:#2b6cb0;margin:1.2rem 0 0.5rem;font-size:1.05rem">
-          1. Build Your Agent</h3>
-        <p style="margin-bottom:0.8rem;color:#2d3748">
-          Create a protein design agent that accepts tasks via our API spec.
-          You may use our 17 reference MCP tools as-is, modify them, or build
-          entirely custom tools.</p>
-        <h3 style="color:#2b6cb0;margin:1.2rem 0 0.5rem;font-size:1.05rem">
-          2. Host as API Endpoint</h3>
-        <p style="margin-bottom:0.8rem;color:#2d3748">
-          Your agent must be accessible as a POST endpoint that accepts task
-          descriptions and returns designed sequences.</p>
-        <h3 style="color:#2b6cb0;margin:1.2rem 0 0.5rem;font-size:1.05rem">
-          API Specification</h3>
-        <pre style="background:#1a202c;color:#e2e8f0;padding:1rem;
-                    border-radius:8px;font-size:0.8rem;overflow-x:auto;
-                    line-height:1.5">POST /evaluate
-
-Input:
-{
-  "task_id": "dnb_sig_001",
+      <div {card}>
+        <h2 {h2}>How to submit</h2>
+        <h3 {h3}>1. Build your agent</h3>
+        <p {p}>
+          Create a protein design agent that accepts tasks via our API.
+          You can use our 17 reference MCP tools as-is, extend them, or
+          build entirely custom tools.</p>
+        <h3 {h3}>2. Host an API endpoint</h3>
+        <p {p}>
+          Your agent must be accessible as a POST endpoint that accepts
+          task payloads and returns designed protein sequences.</p>
+        <h3 {h3}>API specification</h3>
+        <pre style="background:#0f172a;color:#e2e8f0;padding:1.2rem;
+                    border-radius:10px;font-size:0.8rem;overflow-x:auto;
+                    line-height:1.6">POST /api/run
+
+Request:
+{{
+  "task_id": "dnb_ab_001",
   "task_description": "Design a de novo binder for...",
   "available_tools": [...],
   "max_steps": 50,
   "timeout_sec": 300
-}
+}}
 
-Output:
-{
+Response:
+{{
   "sequences": ["MKKL..."],
   "run_log": [...],
   "total_steps": 12,
   "total_time_sec": 142.5
-}</pre>
-        <h3 style="color:#2b6cb0;margin:1.2rem 0 0.5rem;font-size:1.05rem">
-          3. Submit &amp; Evaluate</h3>
-        <p style="margin-bottom:0.8rem;color:#2d3748">
-          We run 73 hidden tasks against your endpoint. Results are
-          independently verified with AlphaFold2.
-          Maximum <strong>2 submissions per month</strong>.</p>
-        <p style="color:#2d3748">
+}}</pre>
+        <h3 {h3}>3. Submit and wait</h3>
+        <p {p}>
+          We dispatch 73 hidden tasks to your endpoint and verify results
+          with Boltz structure prediction.
+          Maximum <strong>2 submissions per month</strong> per organization.</p>
+        <p {p}>
           3 example tasks are publicly available for development and
           testing.</p>
 
-        <h3 style="color:#2b6cb0;margin:1.2rem 0 0.5rem;font-size:1.05rem">
-          MCP Reference Tools</h3>
-        <p style="margin-bottom:0.8rem;color:#2d3748">
-          We provide 17 reference MCP tools for protein design. You may use
-          them as-is, modify them, or build entirely custom tools.
-          <a href="#" style="color:#3182ce">GitHub repository &rarr;</a></p>
-
-        <h3 style="color:#2b6cb0;margin:1.2rem 0 0.5rem;font-size:1.05rem">
-          Submission Limits</h3>
-        <ul style="color:#2d3748;padding-left:1.5rem;margin-bottom:0.8rem">
-          <li>Maximum 2 submissions per month</li>
-          <li>Hidden test set (73 tasks) is used for ranking</li>
-          <li>3 example tasks are publicly available for development</li>
+        <h3 {h3}>Reference MCP tools</h3>
+        <p {p}>
+          We provide 17 reference MCP tools for protein design. You can use
+          them as-is, extend them, or build entirely custom tools.
+          <a href="#" style="color:#2563eb;font-weight:500">
+          GitHub repository &rarr;</a></p>
+
+        <h3 {h3}>Limits</h3>
+        <ul style="color:#475569;padding-left:1.5rem;margin-bottom:0.8rem;
+                   line-height:1.7">
+          <li>Maximum 2 submissions per calendar month per organization</li>
+          <li>73 hidden tasks are used for ranking</li>
+          <li>3 public example tasks are available for development</li>
         </ul>
       </div>
 
-      <div style="background:white;border-radius:10px;padding:2rem;
-                  box-shadow:0 1px 3px rgba(0,0,0,0.08);margin-bottom:1.5rem">
-        <h2 style="color:#1a365d;margin:0 0 0.8rem;font-size:1.3rem">
-          Scoring Rubric (100 points)</h2>
-        <p style="margin-bottom:0.5rem;color:#2d3748">
-          <strong>Approach (20 pts)</strong> &mdash; Function-based design
-          methodology evaluation across 10 DesignFunctions</p>
-        <p style="margin-bottom:0.5rem;color:#2d3748">
-          <strong>Orchestration (15 pts)</strong> &mdash; Pipeline ordering
-          and intermediate validation</p>
-        <p style="margin-bottom:0.5rem;color:#2d3748">
-          <strong>Quality (35 pts)</strong> &mdash; 3-tier graduated scoring:
-          structure confidence, interface confidence, interface physics</p>
-        <p style="margin-bottom:0.5rem;color:#2d3748">
-          <strong>Feasibility (15 pts)</strong> &mdash; Valid amino acids,
-          length, composition, biophysical checks</p>
-        <p style="margin-bottom:0.5rem;color:#2d3748">
-          <strong>Novelty (5 pts)</strong> &mdash; Sequence identity to
-          reference (lower = more novel = better)</p>
-        <p style="margin-bottom:0.5rem;color:#2d3748">
-          <strong>Diversity (10 pts)</strong> &mdash; Number and diversity
-          of generated designs</p>
+      <div {card}>
+        <h2 {h2}>Scoring rubric (100 points)</h2>
+        <p {p}>
+          <strong>Approach (20 pts)</strong> &mdash; design methodology
+          coverage across 10 functional categories
+          (backbone generation, sequence design, structure prediction, etc.)</p>
+        <p {p}>
+          <strong>Orchestration (15 pts)</strong> &mdash; pipeline ordering,
+          intermediate validation, and iteration quality</p>
+        <p {p}>
+          <strong>Quality (35 pts)</strong> &mdash; three-tier graduated
+          scoring based on structure confidence (pLDDT, pTM), interface
+          metrics (ipTM, i_pAE), and interface physics</p>
+        <p {p}>
+          <strong>Feasibility (15 pts)</strong> &mdash; valid amino acids,
+          length constraints, composition, and biophysical plausibility</p>
+        <p {p}>
+          <strong>Novelty (5 pts)</strong> &mdash; sequence identity to
+          reference (lower identity = more novel = higher score)</p>
+        <p {p}>
+          <strong>Diversity (10 pts)</strong> &mdash; number and pairwise
+          diversity of generated designs</p>
       </div>
 
-      <div style="background:white;border-radius:10px;padding:2rem;
-                  box-shadow:0 1px 3px rgba(0,0,0,0.08);margin-bottom:1.5rem">
-        <h2 style="color:#1a365d;margin:0 0 0.8rem;font-size:1.3rem">
-          Citation</h2>
-        <pre style="background:#1a202c;color:#e2e8f0;padding:1rem;
-                    border-radius:8px;font-size:0.8rem;
-                    line-height:1.5">@article{biodesignbench2026,
-  title={BioDesignBench: Evaluating LLM Agents on
-         Protein Design via MCP Tools},
-  author={Kim, Jason et al.},
-  year={2026}
-}</pre>
+      <div {card}>
+        <h2 {h2}>Citation</h2>
+        <pre style="background:#0f172a;color:#e2e8f0;padding:1.2rem;
+                    border-radius:10px;font-size:0.8rem;
+                    line-height:1.6">@article{{biodesignbench2026,
+  title={{BioDesignBench: Evaluating LLM Agents on
+         Protein Design via MCP Tools}},
+  author={{Kim, Jason et al.}},
+  year={{2026}}
+}}</pre>
       </div>
 
     </div>"""
@@ -981,17 +996,18 @@ def create_app() -> gr.Blocks:
             with gr.Tab("\U0001f4e4 Submit"):
                 gr.HTML("""
                 <div style="max-width:700px;margin:0 auto;padding:1rem">
-                  <h2 style="color:#1a365d;margin:0 0 0.5rem">
-                    Submit Your Agent</h2>
-                  <p style="color:#4a5568;margin-bottom:1rem;line-height:1.5">
+                  <h2 style="color:#0f172a;margin:0 0 0.5rem;
+                             font-weight:700;font-size:1.25rem">
+                    Submit your agent</h2>
+                  <p style="color:#475569;margin-bottom:1rem;line-height:1.6">
                     Submit your protein design agent for benchmarking.
                     Your agent must be hosted as a POST endpoint that accepts
-                    task descriptions and returns designed sequences.
-                    <strong>You bear all LLM and MCP tool costs</strong>;
-                    we only run Boltz structure prediction on our end.</p>
-                  <div style="background:#fefcbf;border-left:4px solid #d69e2e;
-                              padding:0.8rem;border-radius:4px;margin-bottom:1rem;
-                              font-size:0.85rem;color:#744210">
+                    task payloads and returns designed sequences.
+                    <strong>You bear all LLM and tool costs</strong> &mdash;
+                    we only run Boltz structure prediction on our side.</p>
+                  <div style="background:#fefce8;border-left:3px solid #ca8a04;
+                              padding:0.8rem 1rem;border-radius:6px;
+                              margin-bottom:1rem;font-size:0.85rem;color:#713f12">
                     <strong>Rate limit:</strong> 2 submissions per calendar
                     month per organization.</div>
                 </div>""")
@@ -1065,9 +1081,10 @@ def create_app() -> gr.Blocks:
             with gr.Tab("\U0001f6e0 Status"):
                 gr.HTML("""
                 <div style="max-width:800px;margin:0 auto;padding:1rem">
-                  <h2 style="color:#1a365d;margin:0 0 0.5rem">
-                    Submission Status & Admin</h2>
-                  <p style="color:#4a5568;margin-bottom:0.5rem">
+                  <h2 style="color:#0f172a;margin:0 0 0.5rem;
+                             font-weight:700;font-size:1.25rem">
+                    Submission status</h2>
+                  <p style="color:#475569;margin-bottom:0.5rem;line-height:1.6">
                     Check your submission status or manage the pipeline
                     (admin only).</p>
                 </div>""")
@@ -1100,7 +1117,7 @@ def create_app() -> gr.Blocks:
                             if sub.get("overall_score") is not None:
                                 score_html = (
                                     f'<div style="font-size:1.2rem;'
-                                    f'font-weight:700;color:#1a365d;'
+                                    f'font-weight:700;color:#0f172a;'
                                     f'margin-top:0.5rem">'
                                     f'Score: {sub["overall_score"]:.1f}/100'
                                     f'</div>'
@@ -1132,7 +1149,7 @@ def create_app() -> gr.Blocks:
                     admin_msg = gr.HTML()
 
                     with admin_panel:
-                        gr.HTML('<h3 style="color:#1a365d">'
+                        gr.HTML('<h3 style="color:#0f172a">'
                                 'Pending Submissions</h3>')
                         pending_html = gr.HTML()
                         refresh_btn = gr.Button("Refresh List")
@@ -1150,7 +1167,7 @@ def create_app() -> gr.Blocks:
                             )
                         approve_msg = gr.HTML()
 
-                        gr.HTML('<h3 style="color:#1a365d;margin-top:1rem">'
+                        gr.HTML('<h3 style="color:#0f172a;margin-top:1rem">'
                                 'Pipeline Control</h3>')
                         with gr.Row():
                             dispatch_id = gr.Textbox(