From 4ee6968d7eeaffeaa4d353fff92910220a269716 Mon Sep 17 00:00:00 2001
From: Alpamys <vpn.alpamys@gmail.com>
Date: Wed, 1 Apr 2026 18:18:37 +0500
Subject: [PATCH] chore: rebrand to new terracotta logo, update Web UI color
 scheme

Replace purple/cyan cyberpunk theme with warm terracotta palette matching
new SVG logo. Update README to use soup_logo_svg.svg. Update chart colors
in app.js to match new palette (#C0512D primary, #E8975A warm accent).
---
 README.md                     |  2 +-
 soup_cli/ui/static/app.js     | 16 ++++++++--------
 soup_cli/ui/static/index.html |  2 +-
 soup_cli/ui/static/logo.svg   |  4 ++++
 soup_cli/ui/static/style.css  | 30 +++++++++++++++---------------
 5 files changed, 29 insertions(+), 25 deletions(-)
 create mode 100644 soup_cli/ui/static/logo.svg

diff --git a/README.md b/README.md
index bcb869e..d337b8f 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,5 @@
 <p align="center">
-  <img src="soup.png" alt="Soup" width="280">
+  <img src="soup_logo_svg.svg" alt="Soup" width="280">
 </p>
 
 <h1 align="center">Soup</h1>
diff --git a/soup_cli/ui/static/app.js b/soup_cli/ui/static/app.js
index e236e5b..4fddd2f 100644
--- a/soup_cli/ui/static/app.js
+++ b/soup_cli/ui/static/app.js
@@ -276,8 +276,8 @@ function renderCharts(metrics) {
         datasets: [{
           label: 'Loss',
           data: losses,
-          borderColor: '#8b6cc7',
-          backgroundColor: 'rgba(139, 108, 199, 0.1)',
+          borderColor: '#c0512d',
+          backgroundColor: 'rgba(192, 81, 45, 0.1)',
           fill: true,
           tension: 0.3,
           pointRadius: 0,
@@ -289,8 +289,8 @@ function renderCharts(metrics) {
         maintainAspectRatio: false,
         plugins: { legend: { display: false } },
         scales: {
-          x: { title: { display: true, text: 'Step', color: '#8890a8' }, ticks: { color: '#8890a8' }, grid: { color: 'rgba(42,48,80,0.5)' } },
-          y: { title: { display: true, text: 'Loss', color: '#8890a8' }, ticks: { color: '#8890a8' }, grid: { color: 'rgba(42,48,80,0.5)' } },
+          x: { title: { display: true, text: 'Step', color: '#a09088' }, ticks: { color: '#a09088' }, grid: { color: 'rgba(58,48,64,0.5)' } },
+          y: { title: { display: true, text: 'Loss', color: '#a09088' }, ticks: { color: '#a09088' }, grid: { color: 'rgba(58,48,64,0.5)' } },
         },
       },
     });
@@ -306,8 +306,8 @@ function renderCharts(metrics) {
         datasets: [{
           label: 'Learning Rate',
           data: lrs,
-          borderColor: '#5ce0d8',
-          backgroundColor: 'rgba(92, 224, 216, 0.1)',
+          borderColor: '#e8975a',
+          backgroundColor: 'rgba(232, 151, 90, 0.1)',
           fill: true,
           tension: 0.3,
           pointRadius: 0,
@@ -319,8 +319,8 @@ function renderCharts(metrics) {
         maintainAspectRatio: false,
         plugins: { legend: { display: false } },
         scales: {
-          x: { title: { display: true, text: 'Step', color: '#8890a8' }, ticks: { color: '#8890a8' }, grid: { color: 'rgba(42,48,80,0.5)' } },
-          y: { title: { display: true, text: 'LR', color: '#8890a8' }, ticks: { color: '#8890a8' }, grid: { color: 'rgba(42,48,80,0.5)' } },
+          x: { title: { display: true, text: 'Step', color: '#a09088' }, ticks: { color: '#a09088' }, grid: { color: 'rgba(58,48,64,0.5)' } },
+          y: { title: { display: true, text: 'LR', color: '#a09088' }, ticks: { color: '#a09088' }, grid: { color: 'rgba(58,48,64,0.5)' } },
         },
       },
     });
diff --git a/soup_cli/ui/static/index.html b/soup_cli/ui/static/index.html
index fe6b941..907470c 100644
--- a/soup_cli/ui/static/index.html
+++ b/soup_cli/ui/static/index.html
@@ -11,7 +11,7 @@
   <div class="app">
     <!-- Sidebar -->
     <aside class="sidebar">
-      <div class="sidebar-logo"><img src="/static/logo.png" alt="Soup">Soup</div>
+      <div class="sidebar-logo"><img src="/static/logo.svg" alt="Soup">Soup</div>
       <nav class="sidebar-nav">
         <button class="nav-item active" data-page="dashboard" onclick="navigate('dashboard')">
           <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
diff --git a/soup_cli/ui/static/logo.svg b/soup_cli/ui/static/logo.svg
new file mode 100644
index 0000000..82abd8a
--- /dev/null
+++ b/soup_cli/ui/static/logo.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <rect x="20" y="20" width="160" height="160" rx="28" ry="28" fill="#C0512D" style="fill:rgb(192, 81, 45);stroke:none;color:rgb(0, 0, 0);stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;opacity:1;font-family:&quot;Anthropic Sans&quot;, -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, sans-serif;font-size:16px;font-weight:400;text-anchor:start;dominant-baseline:auto"/>
+  <line x1="55" y1="155" x2="145" y2="45" stroke="white" stroke-width="22" stroke-linecap="round" style="fill:rgb(0, 0, 0);stroke:rgb(255, 255, 255);color:rgb(0, 0, 0);stroke-width:22px;stroke-linecap:round;stroke-linejoin:miter;opacity:1;font-family:&quot;Anthropic Sans&quot;, -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, sans-serif;font-size:16px;font-weight:400;text-anchor:start;dominant-baseline:auto"/>
+</svg>
\ No newline at end of file
diff --git a/soup_cli/ui/static/style.css b/soup_cli/ui/static/style.css
index 9da8e02..63dd650 100644
--- a/soup_cli/ui/static/style.css
+++ b/soup_cli/ui/static/style.css
@@ -1,17 +1,17 @@
-/* Soup Web UI — Tech theme inspired by the Soup logo */
+/* Soup Web UI — Warm theme inspired by the Soup terracotta logo */
 :root {
-  --bg: #0c0e14;
-  --bg-card: #14171f;
-  --bg-input: #1c2030;
-  --border: #2a3050;
-  --text: #e8eaf0;
-  --text-dim: #8890a8;
-  --accent: #8b6cc7;
-  --accent-hover: #7a5ab8;
-  --accent-cyan: #5ce0d8;
+  --bg: #111014;
+  --bg-card: #1a1720;
+  --bg-input: #231f2a;
+  --border: #3a3040;
+  --text: #f0ece8;
+  --text-dim: #a09088;
+  --accent: #c0512d;
+  --accent-hover: #a8442a;
+  --accent-warm: #e8975a;
   --danger: #e84040;
   --warning: #f2b233;
-  --info: #8b6cc7;
+  --info: #c0512d;
 }
 
 * { margin: 0; padding: 0; box-sizing: border-box; }
@@ -72,7 +72,7 @@ body {
 }
 
 .nav-item:hover { background: var(--bg-input); color: var(--text); }
-.nav-item.active { color: var(--accent-cyan); background: rgba(92, 224, 216, 0.08); border-right: 3px solid var(--accent-cyan); }
+.nav-item.active { color: var(--accent-warm); background: rgba(92, 224, 216, 0.08); border-right: 3px solid var(--accent-warm); }
 
 .sidebar-footer {
   padding: 1rem 1.5rem;
@@ -123,7 +123,7 @@ body {
 }
 
 .stat-card { text-align: center; }
-.stat-value { font-size: 2rem; font-weight: 700; color: var(--accent-cyan); }
+.stat-value { font-size: 2rem; font-weight: 700; color: var(--accent-warm); }
 .stat-label { font-size: 0.85rem; color: var(--text-dim); margin-top: 0.25rem; }
 
 /* Tables */
@@ -185,7 +185,7 @@ tr:hover td { background: rgba(139, 108, 199, 0.06); }
   font-weight: 600;
 }
 
-.badge-success { background: rgba(92, 224, 216, 0.15); color: var(--accent-cyan); }
+.badge-success { background: rgba(92, 224, 216, 0.15); color: var(--accent-warm); }
 .badge-danger { background: rgba(232, 64, 64, 0.2); color: var(--danger); }
 .badge-warning { background: rgba(242, 178, 51, 0.2); color: var(--warning); }
 .badge-info { background: rgba(139, 108, 199, 0.15); color: var(--info); }
@@ -263,7 +263,7 @@ textarea {
   color: var(--text-dim);
 }
 
-.chat-msg.user .chat-msg-role { color: var(--accent-cyan); }
+.chat-msg.user .chat-msg-role { color: var(--accent-warm); }
 .chat-msg.assistant .chat-msg-role { color: var(--accent); }
 
 .chat-msg-content {