Colors

Ready

Color palette with primitives and semantic tokens for the Eidetic Design System

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">Default background</div>
<div className="bg-indigo-600">Primary background</div>

// Text colors
<p className="text-slate-900">Primary text</p>
<p className="text-slate-700">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">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">
  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

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