From a457bea95358825e55dbc7f48d57183004121109 Mon Sep 17 00:00:00 2001
From: Tyler <tyler@tylerhoang.xyz>
Date: Wed, 13 May 2026 22:39:50 -0700
Subject: Apply Prism design system — brass/ink palette, EB Garamond + IBM Plex
 typography
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implements the design kit: champagne brass accent (#C2AA7A), deep midnight
backgrounds, EB Garamond italic headings, IBM Plex Sans/Mono body and numbers,
terminal-density KPI cards, restyled sidebar brand mark, flat pill tabs, and a
global Plotly theme so all charts inherit the dark palette automatically.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 components/market_bar.py | 54 +++++++++++++++++++++---------------------------
 1 file changed, 23 insertions(+), 31 deletions(-)

(limited to 'components/market_bar.py')

diff --git a/components/market_bar.py b/components/market_bar.py
index 411b232..e3accc5 100644
--- a/components/market_bar.py
+++ b/components/market_bar.py
@@ -23,46 +23,38 @@ def render_market_bar():
         """
         <style>
           .prism-market-card {
-            background: rgba(22, 28, 39, 0.92);
-            border: 1px solid rgba(255,255,255,0.06);
-            border-radius: 14px;
-            padding: 0.8rem 0.95rem;
-            min-height: 96px;
+            background: #11151C;
+            border: 1px solid #232934;
+            border-radius: 2px;
+            padding: 12px 16px;
           }
           .prism-market-label {
-            color: #9aa0b0;
-            font-size: 0.78rem;
+            font-family: 'IBM Plex Sans', sans-serif;
+            font-size: 10px;
             font-weight: 600;
-            letter-spacing: 0.06em;
+            letter-spacing: 0.14em;
             text-transform: uppercase;
-            margin-bottom: 0.45rem;
+            color: #5E5849;
+            margin-bottom: 6px;
           }
           .prism-market-value {
-            color: #f3f6fb;
-            font-size: 1.5rem;
-            font-weight: 700;
-            line-height: 1.15;
-            margin-bottom: 0.45rem;
+            font-family: 'IBM Plex Mono', monospace;
+            font-variant-numeric: tabular-nums;
+            font-size: 1.25rem;
+            font-weight: 500;
+            color: #F2ECDC;
+            line-height: 1.1;
+            margin-bottom: 4px;
           }
           .prism-market-delta {
-            display: inline-block;
-            border-radius: 999px;
-            font-size: 0.78rem;
-            font-weight: 600;
-            padding: 0.18rem 0.5rem;
-          }
-          .prism-market-delta.positive {
-            color: #7ce3a1;
-            background: rgba(28, 131, 72, 0.18);
-          }
-          .prism-market-delta.negative {
-            color: #ff8a8a;
-            background: rgba(180, 47, 47, 0.18);
-          }
-          .prism-market-delta.neutral {
-            color: #c6cfdd;
-            background: rgba(198, 207, 221, 0.12);
+            font-family: 'IBM Plex Mono', monospace;
+            font-variant-numeric: tabular-nums;
+            font-size: 11px;
+            font-weight: 500;
           }
+          .prism-market-delta.positive { color: #4F8C5E; }
+          .prism-market-delta.negative { color: #B5494B; }
+          .prism-market-delta.neutral  { color: #5E5849; }
         </style>
         """,
         unsafe_allow_html=True,
-- 
cgit v1.3-2-g0d8e