Finance & Crypto Dashboard

---
name: Finance & Crypto Dashboard
colors:
  background: '#090c10'
  surface: '#13171d'
  surface-elevated: '#1a1f27'
  primary: '#3b82f6'
  gain: '#22c55e'
  loss: '#ef4444'
  text-primary: '#f1f5f9'
  text-secondary: '#94a3b8'
  border: '#1e293b'
typography:
  heading:
    fontFamily: Inter
    fontSize: 22px
    fontWeight: '700'
  body:
    fontFamily: Inter
    fontSize: 14px
  ticker:
    fontFamily: JetBrains Mono
    fontSize: 24px
    fontWeight: '600'
    fontVariation: '"tnum"'
rounded:
  DEFAULT: 6px
  card: 10px
spacing:
  base: 4px
---

## Overview

Dark, data-dense financial dashboard. Deep navy-black backgrounds,
tabular-nums for all numeric values, green/red semantic coloring
for gains and losses. Cards surface key metrics with sparkline
thumbnails and percentage-change badges.

## Colors

- Background: deep navy-black (#090c10)
- Cards: dark surface (#13171d), elevated variant (#1a1f27)
- Gain: emerald green (#22c55e)
- Loss: alert red (#ef4444)
- Primary: blue (#3b82f6) for neutral UI actions

## Typography

Inter for body and labels. JetBrains Mono with tabular-nums for
all numeric values — prices, percentages, volumes. Ticker values
at 24px/600 weight.

## Components

- KPI Card: label → large mono value → sparkline → change badge
- Ticker Row: horizontally scrollable symbol-price-change strip
- Data Table: mono numbers, right-aligned, color-coded change column
- Chart Card: dark canvas bg, blue/red series, grid lines at 10% opacity
- Portfolio Bar: stacked segmented progress bar by asset allocation