Component Library
Browse all available UI components, colors, and typography in the design system.
Gray Scale
gray.50
Gray scale 50
#FCFCFC
gray.100
Gray scale 100
#F5F5F5
gray.150
Gray scale 150
#F0F0F0
gray.200
Gray scale 200
#E5E5E5
gray.300
Gray scale 300
#D4D4D4
gray.400
Gray scale 400
#A3A3A3
gray.500
Gray scale 500
#737373
gray.600
Gray scale 600
#525252
gray.700
Gray scale 700
#404040
gray.750
Gray scale 750
#313131
gray.800
Gray scale 800
#262626
gray.850
Gray scale 850
#1E1E1E
gray.900
Gray scale 900
#171717
gray.950
Gray scale 950
#0D0D0D
Brand Colors
brand.primary
Primary brand color
#3B82F6
brand.secondary
Secondary brand color
#2563EB
Text Colors
text-primary
Primary text color
Light:#171717
Dark:#F5F5F5
text-secondary
Secondary text color
Light:#525252
Dark:#D4D4D4
text-tertiary
Tertiary text color
Light:#737373
Dark:#A3A3A3
text-quaternary
Quaternary text color
Light:#A3A3A3
Dark:#737373
text-primary-action
Text on primary action buttons
Light:#FFFFFF
Dark:#171717
text-highlight
Highlight text color
Light:#713F12
Dark:#FEF3C7
Background Colors
bg-main
Main background color
Light:#FCFCFC
Dark:#0D0D0D
bg-primary
Primary background color
Light:#FFFFFF
Dark:#0D0D0D
bg-secondary
Secondary background color
Light:#FCFCFC
Dark:#171717
bg-tertiary
Tertiary background color
Light:#F5F5F5
Dark:#262626
bg-quaternary
Quaternary background color
Light:#F0F0F0
Dark:#313131
bg-elevated
Elevated surface background
Light:#FFFFFF
Dark:#1E1E1E
bg-primary-action
Primary action button background
Light:#171717
Dark:#FFFFFF
bg-primary-action-hover
Primary action button hover state
Light:#313131
Dark:#F0F0F0
bg-secondary-action
Secondary action button background
Light:#E5E5E5
Dark:#404040
bg-tertiary-action
Tertiary action button background
Light:#FFFFFF
Dark:#262626
bg-button
Button background
Light:#FFFFFF
Dark:#313131
bg-highlight
Highlight background
Light:rgba(234, 179, 8, 0.2)
Dark:rgba(234, 179, 8, 0.2)
Border Colors
border-primary
Primary border color
Light:rgba(0, 0, 0, 0.1)
Dark:rgba(255, 255, 255, 0.12)
border-primary-opaque
Primary border color (opaque)
Light:#E5E5E5
Dark:#313131
border-secondary
Secondary border color
Light:rgba(0, 0, 0, 0.07)
Dark:rgba(255, 255, 255, 0.08)
border-secondary-opaque
Secondary border color (opaque)
Light:#F0F0F0
Dark:#262626
border-tertiary
Tertiary border color
Light:rgba(0, 0, 0, 0.04)
Dark:rgba(255, 255, 255, 0.06)
Chart Colors
chart-1
oklch(0.85 0.13 165)
chart-2
oklch(0.77 0.15 163)
chart-3
oklch(0.70 0.15 162)
chart-4
oklch(0.60 0.13 163)
chart-5
oklch(0.51 0.10 166)