Back to Application

Design System

Visual reference for the financial dashboard

Colors

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

Typography

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

Spacing

Gap and padding scale

gap-1.5

6px

gap-2

8px

gap-2.5

10px

gap-3

12px

gap-4

16px

gap-6

24px

Border Radius

Rounded corner scale

radius-sm

4px

radius-md

6px

radius-lg

8px

radius-xl

12px

container

14px

Container Classes

Dashboard-specific container styles

.dashboard-container

Standard

.dashboard-container-elevated

Elevated

.dashboard-container-flat

Flat

.dashboard-container-nested

Nested

.dashboard-container-header

Header

Components

UI component library

Primary Action (used for CTAs)

Variants

Sizes

With Icons

States

Toggle