diff options
| author | Tyler <tyler@tylerhoang.xyz> | 2026-05-13 22:39:50 -0700 |
|---|---|---|
| committer | Tyler <tyler@tylerhoang.xyz> | 2026-05-13 22:39:50 -0700 |
| commit | a457bea95358825e55dbc7f48d57183004121109 (patch) | |
| tree | eafafbfa017228bc1efd14a0c63f150576ace9f2 /components/market_bar.py | |
| parent | 6f1c3a6b73572b3ccc5281dba45de3bba5528f5f (diff) | |
Apply Prism design system — brass/ink palette, EB Garamond + IBM Plex typography
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>
Diffstat (limited to 'components/market_bar.py')
| -rw-r--r-- | components/market_bar.py | 54 |
1 files changed, 23 insertions, 31 deletions
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, |