Visual reference for the financial dashboard
Core palette, chart colors, and semantic colors
Core Colors
Primary Accent
#3b82f6
--chart-1
Foreground
#fafafa
--foreground
Primary Foreground
#0a0a0a
--primary-foreground
Card
#141414
--card
Primary
#fafafa
--primary
Secondary
#1f1f1f
--secondary
Muted
#262626
--muted
Muted Foreground
#a1a1a1
--muted-foreground
Accent
#1f1f1f
--accent
Destructive
#7f1d1d
--destructive
Border
#262626
--border
Ring
#525252
--ring
Chart Colors
Chart 1
#3b82f6
--chart-1
Chart 2
#22c55e
--chart-2
Chart 3
#06b6d4
--chart-3
Chart 4
#eab308
--chart-4
Chart 5
#8b5cf6
--chart-5
Sidebar Colors
Sidebar
#111111
--sidebar
Semantic Colors
Positive
text-emerald-400
Negative
text-red-400
Info
text-blue-400
Warning
text-amber-400
Font: Geist (sans), Geist Mono (mono)
text-2xl font-semibold
$2.4B AUM
text-xl font-semibold
12 Active Agents
text-sm font-semibold
Section Heading
text-sm text-foreground
Body text for content
text-sm text-muted-foreground
Description and secondary text
text-xs text-muted-foreground
Labels and captions
font-mono text-sm
CODE_VALUE_123
Gap and padding scale
gap-1.5
6px
gap-2
8px
gap-2.5
10px
gap-3
12px
gap-4
16px
gap-6
24px
Rounded corner scale
radius-sm
4px
radius-md
6px
radius-lg
8px
radius-xl
12px
container
14px
Dashboard-specific container styles
.dashboard-container
Standard
.dashboard-container-elevated
Elevated
.dashboard-container-flat
Flat
.dashboard-container-nested
Nested
.dashboard-container-header
Header
UI component library