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/top_movers.py | 44 +++++++++++++++++++++++++++++---------------
 1 file changed, 29 insertions(+), 15 deletions(-)

(limited to 'components/top_movers.py')

diff --git a/components/top_movers.py b/components/top_movers.py
index 5589df6..db95592 100644
--- a/components/top_movers.py
+++ b/components/top_movers.py
@@ -28,30 +28,39 @@ def _inject_styles():
             padding: 0.18rem 0;
           }
           .prism-mover-symbol {
-            font-size: 1rem;
-            font-weight: 700;
+            font-family: 'IBM Plex Sans', sans-serif;
+            font-size: 0.875rem;
+            font-weight: 600;
+            color: #F2ECDC;
             line-height: 1.1;
           }
           .prism-mover-name {
-            color: #9aa0b0;
-            font-size: 0.84rem;
+            font-family: 'IBM Plex Sans', sans-serif;
+            color: #8E8676;
+            font-size: 0.8125rem;
             line-height: 1.15;
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
           }
           .prism-mover-price {
-            font-size: 0.98rem;
+            font-family: 'IBM Plex Mono', monospace;
+            font-variant-numeric: tabular-nums;
+            font-size: 0.8125rem;
+            color: #C7C0AE;
             line-height: 1.1;
           }
           .prism-mover-change {
-            font-size: 0.98rem;
-            font-weight: 600;
+            font-family: 'IBM Plex Mono', monospace;
+            font-variant-numeric: tabular-nums;
+            font-size: 0.8125rem;
+            font-weight: 500;
             line-height: 1.1;
           }
           .prism-mover-change-meta {
-            font-size: 0.74rem;
-            color: #9aa0b0;
+            font-family: 'IBM Plex Mono', monospace;
+            font-size: 11px;
+            color: #5E5849;
             margin-left: 0.2rem;
           }
           @media (max-width: 900px) {
@@ -91,7 +100,7 @@ def _mover_row_html(q: dict) -> str:
 
     try:
         chg_f = float(chg_pct)
-        color = "#2ecc71" if chg_f >= 0 else "#e74c3c"
+        color = "#4F8C5E" if chg_f >= 0 else "#B5494B"
         sign = "+" if chg_f >= 0 else ""
         pct_str = f"{sign}{chg_f:.2f}%"
     except Exception:
@@ -143,11 +152,16 @@ def _render_mover_tab(screen: str, state_key: str):
 @st.fragment
 def render_top_movers():
     _inject_styles()
-    st.markdown("#### 🔥 Top Movers")
-
-    tab_gainers, tab_losers, tab_active = st.tabs([
-        "📈 Gainers", "📉 Losers", "⚡ Most Active"
-    ])
+    st.markdown("""
+    <div style="
+      font-family:'IBM Plex Sans',sans-serif;
+      font-size:10px;font-weight:600;
+      text-transform:uppercase;letter-spacing:0.14em;
+      color:#5E5849;margin-bottom:8px;
+    ">Top Movers</div>
+    """, unsafe_allow_html=True)
+
+    tab_gainers, tab_losers, tab_active = st.tabs(["Gainers", "Losers", "Most Active"])
 
     screens = {
         "gainers": "day_gainers",
-- 
cgit v1.3-2-g0d8e