Colors
Color palette with primitives and semantic tokens for the Eidetic Design System. Seven color families with 10-step scales and contextual semantic tokens.
Primary Colors
Indigo - Trust, innovation, and depth
indigo-50
#EEF2FF
indigo-100
#E0E7FF
indigo-200
#C7D2FE
indigo-300
#A5B4FC
indigo-400
#818CF8
indigo-500
#6366F1
indigo-600
#4F46E5
indigo-700
#4338CA
indigo-800
#3730A3
indigo-900
#312E81
Secondary Colors
Teal - Growth, clarity, and freshness
teal-50
#F0FDFA
teal-100
#CCFBF1
teal-200
#99F6E4
teal-300
#5EEAD4
teal-400
#2DD4BF
teal-500
#14B8A6
teal-600
#0D9488
teal-700
#0F766E
teal-800
#115E59
teal-900
#134E4A
Neutral Colors
Slate - Cool neutral palette for foundations
slate-0
#FFFFFF
slate-50
#F8FAFC
slate-100
#F1F5F9
slate-200
#E2E8F0
slate-300
#CBD5E1
slate-400
#94A3B8
slate-500
#64748B
slate-600
#475569
slate-700
#334155
slate-800
#1E293B
slate-900
#0F172A
slate-950
#020617
Success Colors
Emerald - Success states and positive actions
emerald-50
#ECFDF5
emerald-100
#D1FAE5
emerald-200
#A7F3D0
emerald-300
#6EE7B7
emerald-400
#34D399
emerald-500
#10B981
emerald-600
#059669
emerald-700
#047857
emerald-800
#065F46
emerald-900
#064E3B
Warning Colors
Amber - Warning states and caution
amber-50
#FFFBEB
amber-100
#FEF3C7
amber-200
#FDE68A
amber-300
#FCD34D
amber-400
#FBBF24
amber-500
#F59E0B
amber-600
#D97706
amber-700
#B45309
amber-800
#92400E
amber-900
#78350F
Error Colors
Rose - Destructive and error states
rose-50
#FFF1F2
rose-100
#FFE4E6
rose-200
#FECDD3
rose-300
#FDA4AF
rose-400
#FB7185
rose-500
#F43F5E
rose-600
#E11D48
rose-700
#BE123C
rose-800
#9F1239
rose-900
#881337
Info Colors
Sky - Informational states
sky-50
#F0F9FF
sky-100
#E0F2FE
sky-200
#BAE6FD
sky-300
#7DD3FC
sky-400
#38BDF8
sky-500
#0EA5E9
sky-600
#0284C7
sky-700
#0369A1
sky-800
#075985
sky-900
#0C4A6E
AI Gradient
Signature gradient for AI-related components
Horizontal Gradient
bg-gradient-to-r from-indigo-50 to-teal-50
Vertical Gradient
bg-gradient-to-b from-indigo-50 to-teal-50
Icon Background
bg-gradient-to-br from-indigo-500 to-teal-500
Semantic Color Tokens
Contextual colors that adapt to themes
Backgrounds
background-default
slate-0
background-subtle
slate-50
background-muted
slate-100
background-emphasis
slate-200
background-inverse
slate-900
Text Colors
foreground-default (slate-900)
foreground-muted (slate-600)
foreground-subtle (slate-400)
foreground-disabled (slate-300)
Border Colors
border-default
slate-200
border-strong
slate-300
border-subtle
slate-100
border-focus
indigo-500
Usage
How to use colors in your components
// Background colors
<div className="bg-slate-50 dark:bg-slate-800">Subtle background</div>
<div className="bg-white dark:bg-slate-900">Default background</div>
<div className="bg-indigo-600">Primary background</div>
// Text colors
<p className="text-slate-900 dark:text-slate-50">Primary text</p>
<p className="text-slate-700 dark:text-slate-300">Secondary text</p>
<p className="text-slate-600 dark:text-slate-400">Subdued text</p>
<p className="text-slate-500">Muted text</p>
// Border colors
<div className="border border-slate-200 dark:border-slate-700">Default border</div>
<div className="border border-indigo-500">Focus border</div>
// AI Gradient
<div className="bg-gradient-to-r from-indigo-50 to-teal-50 dark:from-indigo-950/30 dark:to-teal-950/30">
AI component background
</div>
// Semantic tokens (CSS variables)
background-color: var(--color-background-default);
color: var(--color-foreground-default);
border-color: var(--color-border-default);Features
Color system capabilities
- 7 color families: Indigo, Teal, Slate, Emerald, Amber, Rose, Sky
- 10-step scales: From 50 to 900 for each color
- Semantic tokens: Context-aware colors that adapt to themes
- AI gradient: Signature indigo-to-teal gradient for AI components
- WCAG compliant: Accessible color contrast ratios
- Dark mode ready: All colors work in light and dark themes