Colors

Our color system uses Slate as the neutral base with Indigo as our primary accent. All colors follow a consistent scale from 50 to 950 for predictable usage.

Slate

Cool neutral palette - our foundation

slate-0

#FFFFFF

slate-25

#FCFCFD

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

Indigo

Primary accent - trust, innovation, depth

Primary

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

indigo-950

#1E1B4B

Teal

Secondary accent - growth, clarity, freshness

Secondary

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

teal-950

#042F2E

Emerald

Success states

Success

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

emerald-950

#022C22

Amber

Warning states

Warning

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

amber-950

#451A03

Rose

Destructive/error states

Error

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

rose-950

#4C0519

Sky

Info states

Info

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

sky-950

#082F49

Usage Guidelines

How to use colors correctly in your components

✅ Do: Use semantic color classes

<div className="bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-50 dark:bg-slate-950 dark:text-slate-50">
  <button className="bg-indigo-600 hover:bg-indigo-700 text-white">
    Primary Action
  </button>
</div>

❌ Don't: Use arbitrary colors

<div className="bg-zinc-100 text-gray-900">
  <button className="bg-blue-500 hover:bg-blue-600">
    Wrong Color System
  </button>
</div>

Color Roles

Primary (Indigo)

Main actions, links, focus states

Success (Emerald)

Success messages, confirmations

Warning (Amber)

Warnings, cautions

Error (Rose)

Errors, destructive actions

Info (Sky)

Informational messages