Colors
All colors meet WCAG 2.1 AA contrast requirements and adapt seamlessly between light and dark modes.
Gray Scale (Neutral)
Neutral colors for backgrounds, text, borders, and UI elements.
white
#FFFFFF
black
#000000
gray-50
#FAFAFA
gray-100
#F4F4F5
gray-200
#E4E4E7
gray-300
#D4D4D8
gray-400
#A1A1AA
gray-500
#71717A
gray-600
#52525B
gray-700
#3F3F46
gray-800
#27272A
gray-900
#18181B
gray-950
#09090B
Green Scale (Primary / CTA)
Base color: green-500 (#2BA84A). Used for primary actions, CTAs, and success states.
green-50
#ECFDF3
green-100
#D1FAE5
green-200
#A7F3C9
green-300
#6EE7A0
green-400
#34D970
green-500
#2BA84A
green-600
#22863A
green-700
#1B6B2F
green-800
#165626
green-900
#11401D
green-950
#0A2912
Accent Colors
Secondary colors for warnings, errors, information, and other accents.
Yellow
yellow-50
#FEFCE8
yellow-100
#FEF9C3
yellow-200
#FEF08A
yellow-300
#FDE047
Warning (Orange)
warning-50
#FFFBEB
warning-100
#FEF3C7
warning-200
#FDE68A
warning-300
#FCD34D
Error (Red)
error-50
#FEF2F2
error-100
#FEE2E2
error-200
#FECACA
error-300
#FCA5A5
error-400
#F87171
error-500
#F55757
Info (Blue)
info-50
#EFF6FF
info-100
#DBEAFE
info-200
#BFDBFE
info-300
#93C5FD
Purple
purple-50
#FAF5FF
purple-100
#F3E8FF
purple-200
#E9D5FF
purple-300
#D8B4FE
Semantic Color Tokens
These tokens automatically adapt to light and dark modes. Use these in your components instead of raw color values.
Primary
primary-default
primary-hover
primary-active
Text
text-primary
text-secondary
text-tertiary
text-muted
text-disabled
Backgrounds
bg-page
bg-surface
bg-surface-secondary
Borders
border-default
border-strong
border-focus