Major Arcana → Color Palettes & Moods

Overview

The 22 Major Arcana cards of the Tarot represent archetypal life stages and cosmic forces. Each card carries distinct energetic signatures that translate into color palettes, lighting moods, and visual atmospheres for UI/UX design.

---

The Major Arcana Palette System

0. THE FOOL

Energy: Innocence, spontaneity, new beginnings
Color Palette:

• Primary: Sky Blue (#38bdf8) → Boundless possibility
• Secondary: Cloud White (#f0f9ff) → Pure potential
• Accent: Sunshine Yellow (#fbbf24) → Playful optimism
• Dark: Morning Gray (#475569) → Dawn of journey

Mood: Bright, airy, weightless, optimistic
Gradient: from-sky-400 via-white to-yellow-300
Shadow Style: Soft, diffused, minimal depth
Atmosphere: Morning light, fresh air, open spaces

Background: bg-gradient-to-br from-sky-50 to-yellow-50
Card: bg-white/90 backdrop-blur-sm border border-sky-200
Button: bg-sky-400 hover:bg-sky-500 shadow-lg shadow-sky-200/50

---

I. THE MAGICIAN

Energy: Manifestation, power, transformation
Color Palette:

• Primary: Deep Purple (#7c3aed) → Mystical power
• Secondary: Electric Violet (#a78bfa) → Transformative energy
• Accent: Mercury Silver (#e5e7eb) → Alchemical transformation
• Dark: Void Black (#0f172a) → The source

Mood: Mysterious, powerful, transformative
Gradient: from-purple-900 via-violet-600 to-purple-400
Shadow Style: Strong, glowing, magical auras
Atmosphere: Candlelit chamber, swirling energy, focused power

Background: bg-gradient-to-br from-slate-900 via-purple-900 to-violet-900
Card: bg-purple-950/80 backdrop-blur-xl border border-purple-500/30
Button: bg-purple-600 hover:bg-purple-500 shadow-2xl shadow-purple-500/50

---

II. THE HIGH PRIESTESS

Energy: Intuition, mystery, inner wisdom
Color Palette:

• Primary: Moonlight Blue (#60a5fa) → Intuitive knowing
• Secondary: Midnight Purple (#6366f1) → Hidden depths
• Accent: Pearl White (#f1f5f9) → Lunar reflection
• Dark: Deep Navy (#1e293b) → The unconscious

Mood: Serene, mysterious, contemplative
Gradient: from-indigo-950 via-blue-800 to-slate-700
Shadow Style: Soft glows, moonlit halos
Atmosphere: Moonlit temple, still water, quiet knowing

Background: bg-gradient-to-b from-indigo-950 to-blue-900
Card: bg-slate-900/60 backdrop-blur-md border border-blue-400/20
Button: bg-blue-500/80 hover:bg-blue-400 shadow-lg shadow-blue-500/30

---

III. THE EMPRESS

Energy: Abundance, nurturing, fertility
Color Palette:

• Primary: Forest Green (#059669) → Growth and life
• Secondary: Rose Pink (#f43f5e) → Love and beauty
• Accent: Golden Harvest (#f59e0b) → Abundance
• Dark: Rich Earth (#422006) → Fertile soil

Mood: Lush, nurturing, abundant
Gradient: from-emerald-700 via-rose-400 to-amber-300
Shadow Style: Soft, organic, natural depth
Atmosphere: Garden in bloom, golden hour, bountiful earth

Background: bg-gradient-to-br from-emerald-50 via-rose-50 to-amber-50
Card: bg-white border-2 border-emerald-200 shadow-xl shadow-emerald-100
Button: bg-emerald-600 hover:bg-emerald-500 shadow-lg shadow-emerald-200

---

IV. THE EMPEROR

Energy: Authority, structure, leadership
Color Palette:

• Primary: Imperial Red (#dc2626) → Power and authority
• Secondary: Iron Gray (#52525b) → Structural strength
• Accent: Royal Gold (#eab308) → Sovereign status
• Dark: Obsidian Black (#18181b) → Absolute control

Mood: Strong, commanding, structured
Gradient: from-red-900 via-zinc-800 to-red-800
Shadow Style: Hard, defined, architectural
Atmosphere: Throne room, stone fortress, commanding presence

Background: bg-gradient-to-br from-zinc-900 to-red-950
Card: bg-zinc-900 border border-red-700 shadow-2xl
Button: bg-red-700 hover:bg-red-600 shadow-xl shadow-red-900/50

---

V. THE HIEROPHANT

Energy: Tradition, teaching, spiritual wisdom
Color Palette:

• Primary: Sacred Blue (#2563eb) → Divine wisdom
• Secondary: Ceremonial Gold (#d97706) → Sacred tradition
• Accent: Ivory White (#fafaf9) → Purity of teaching
• Dark: Temple Stone (#57534e) → Ancient foundations

Mood: Sacred, traditional, wise
Gradient: from-blue-900 via-amber-700 to-stone-600
Shadow Style: Stained glass effects, reverent lighting
Atmosphere: Cathedral light, sacred space, timeless wisdom

Background: bg-gradient-to-b from-blue-950 via-amber-900 to-stone-900
Card: bg-blue-950/80 border-2 border-amber-500/30 backdrop-blur
Button: bg-blue-700 hover:bg-blue-600 shadow-lg shadow-amber-500/20

---

VI. THE LOVERS

Energy: Union, harmony, choice
Color Palette:

• Primary: Passionate Pink (#ec4899) → Romantic love
• Secondary: Heart Red (#ef4444) → Deep passion
• Accent: Soft Peach (#fed7aa) → Tender connection
• Dark: Twilight Purple (#7c2d12) → Intimate depth

Mood: Romantic, harmonious, intimate
Gradient: from-pink-400 via-red-300 to-orange-200
Shadow Style: Soft, romantic, glowing
Atmosphere: Sunset embrace, tender moments, perfect union

Background: bg-gradient-to-br from-pink-100 via-red-50 to-orange-100
Card: bg-white/80 border border-pink-200 shadow-xl shadow-pink-100
Button: bg-pink-500 hover:bg-pink-400 shadow-lg shadow-pink-200

---

VII. THE CHARIOT

Energy: Willpower, determination, victory
Color Palette:

• Primary: Victory Gold (#facc15) → Triumphant achievement
• Secondary: Warrior Bronze (#92400e) → Battle-tested strength
• Accent: Champion White (#fefce8) → Glorious victory
• Dark: Charcoal Black (#27272a) → Focused determination

Mood: Dynamic, victorious, powerful
Gradient: from-yellow-500 via-amber-600 to-yellow-400
Shadow Style: Strong, directional, movement-suggesting
Atmosphere: Victory parade, forward momentum, unstoppable force

Background: bg-gradient-to-r from-yellow-50 via-amber-100 to-yellow-50
Card: bg-amber-50 border-l-4 border-yellow-500 shadow-xl
Button: bg-yellow-500 hover:bg-yellow-400 shadow-lg shadow-yellow-200

---

VIII. STRENGTH

Energy: Courage, compassion, inner power
Color Palette:

• Primary: Gentle Gold (#fbbf24) → Compassionate strength
• Secondary: Lionheart Orange (#f97316) → Courageous spirit
• Accent: Soft Cream (#fffbeb) → Gentle power
• Dark: Warm Earth (#78350f) → Grounded strength

Mood: Warm, powerful, gentle
Gradient: from-amber-300 via-orange-400 to-amber-200
Shadow Style: Warm, embracing, empowering
Atmosphere: Golden lion, warm embrace, quiet confidence

Background: bg-gradient-to-br from-amber-50 to-orange-100
Card: bg-white border-2 border-amber-300 shadow-lg shadow-amber-200
Button: bg-orange-500 hover:bg-orange-400 shadow-md shadow-orange-200

---

IX. THE HERMIT

Energy: Solitude, introspection, inner guidance
Color Palette:

• Primary: Deep Indigo (#4338ca) → Inner depths
• Secondary: Twilight Purple (#6d28d9) → Contemplative wisdom
• Accent: Lantern Gray (#d1d5db) → Guiding light
• Dark: Cave Black (#111827) → Solitary depths

Mood: Contemplative, quiet, introspective
Gradient: from-indigo-950 via-purple-900 to-gray-900
Shadow Style: Deep, focused, single light source
Atmosphere: Mountain peak, lone lantern, inner sanctuary

Background: bg-gradient-to-b from-indigo-950 to-gray-950
Card: bg-indigo-950/80 backdrop-blur border border-purple-700/30
Button: bg-purple-700 hover:bg-purple-600 shadow-lg shadow-purple-900/50

---

X. WHEEL OF FORTUNE

Energy: Change, cycles, destiny
Color Palette:

• Primary: Cosmic Purple (#8b5cf6) → Karmic cycles
• Secondary: Fortune Gold (#eab308) → Lucky breaks
• Accent: Destiny Blue (#3b82f6) → Fated moments
• Dark: Midnight Blue (#1e3a8a) → The wheel turns

Mood: Dynamic, cyclical, cosmic
Gradient: from-purple-600 via-yellow-500 to-blue-600
Shadow Style: Rotating, circular, dynamic
Atmosphere: Spinning cosmos, turning wheel, perpetual motion

Background: bg-gradient-to-br from-purple-900 via-yellow-600 to-blue-900
Card: bg-gradient-to-r from-purple-500/20 to-blue-500/20 backdrop-blur-lg
Button: bg-gradient-to-r from-purple-600 to-blue-600 hover:opacity-90

---

XI. JUSTICE

Energy: Balance, fairness, truth
Color Palette:

• Primary: Balance Blue (#1d4ed8) → Impartial truth
• Secondary: Scale Silver (#94a3b8) → Equilibrium
• Accent: Judgment White (#f8fafc) → Clear verdict
• Dark: Law Black (#0f172a) → Absolute justice

Mood: Balanced, clear, authoritative
Gradient: from-blue-900 via-slate-500 to-blue-800
Shadow Style: Symmetric, balanced, precise
Atmosphere: Court of law, perfect balance, scales in equilibrium

Background: bg-gradient-to-b from-slate-900 to-blue-950
Card: bg-slate-900 border border-blue-600/50 shadow-xl
Button: bg-blue-700 hover:bg-blue-600 shadow-lg shadow-blue-900/30

---

XII. THE HANGED MAN

Energy: Surrender, new perspective, sacrifice
Color Palette:

• Primary: Inverted Teal (#14b8a6) → Upside-down view
• Secondary: Suspension Blue (#06b6d4) → Liminal state
• Accent: Release White (#f0fdfa) → Letting go
• Dark: Void Gray (#334155) → The in-between

Mood: Suspended, serene, perspective-shifting
Gradient: from-cyan-600 via-teal-500 to-cyan-400
Shadow Style: Inverted, floating, weightless
Atmosphere: Hanging in space, new viewpoint, suspended time

Background: bg-gradient-to-b from-teal-950 to-cyan-900
Card: bg-teal-900/60 backdrop-blur-md border border-cyan-400/30
Button: bg-teal-600 hover:bg-teal-500 shadow-lg shadow-teal-500/30

---

XIII. DEATH

Energy: Transformation, endings, rebirth
Color Palette:

• Primary: Transformation Black (#0a0a0a) → The void
• Secondary: Rebirth Purple (#a855f7) → New beginnings
• Accent: Bone White (#fafafa) → What remains
• Dark: Obsidian (#030712) → Total transformation

Mood: Transformative, powerful, liminal
Gradient: from-gray-950 via-purple-900 to-gray-950
Shadow Style: Deep, transformative, boundary-dissolving
Atmosphere: Threshold moment, cosmic reset, total change

Background: bg-gradient-to-br from-gray-950 via-purple-950 to-black
Card: bg-black/80 backdrop-blur border border-purple-500/20
Button: bg-purple-600 hover:bg-purple-500 shadow-2xl shadow-purple-900/50

---

XIV. TEMPERANCE

Energy: Balance, moderation, alchemy
Color Palette:

• Primary: Angelic Blue (#3b82f6) → Divine balance
• Secondary: Alchemical Gold (#f59e0b) → Golden mean
• Accent: Harmony White (#f0f9ff) → Perfect blend
• Dark: Twilight Indigo (#312e81) → Balanced darkness

Mood: Harmonious, balanced, alchemical
Gradient: from-blue-400 via-amber-300 to-blue-300
Shadow Style: Blended, harmonious, flowing
Atmosphere: Mixing waters, golden ratio, perfect harmony

Background: bg-gradient-to-br from-blue-100 via-amber-50 to-blue-50
Card: bg-white/90 border-2 border-blue-200 backdrop-blur-sm
Button: bg-gradient-to-r from-blue-500 to-amber-500 hover:opacity-90

---

XV. THE DEVIL

Energy: Materialism, bondage, shadow self
Color Palette:

• Primary: Infernal Red (#991b1b) → Primal desire
• Secondary: Shadow Black (#171717) → Bondage
• Accent: Temptation Gold (#a16207) → Seduction
• Dark: Abyss (#000000) → The shadow

Mood: Intense, seductive, shadowy
Gradient: from-red-950 via-black to-red-900
Shadow Style: Heavy, seductive, binding
Atmosphere: Underground depths, forbidden allure, shadow integration

Background: bg-gradient-to-br from-black via-red-950 to-black
Card: bg-red-950/80 backdrop-blur border border-red-700/30
Button: bg-red-800 hover:bg-red-700 shadow-2xl shadow-red-950/70

---

XVI. THE TOWER

Energy: Upheaval, revelation, sudden change
Color Palette:

• Primary: Lightning White (#fafafa) → Sudden revelation
• Secondary: Storm Gray (#3f3f46) → Chaos and destruction
• Accent: Thunder Yellow (#fde047) → Electric shock
• Dark: Rubble Black (#18181b) → What remains

Mood: Shocking, dramatic, revelatory
Gradient: from-yellow-300 via-zinc-700 to-yellow-200
Shadow Style: Harsh, dramatic, stark contrast
Atmosphere: Lightning strike, crumbling structures, sudden clarity

Background: bg-gradient-to-br from-zinc-900 via-yellow-400 to-zinc-800
Card: bg-zinc-900 border-2 border-yellow-400 shadow-2xl shadow-yellow-500/30
Button: bg-yellow-400 hover:bg-yellow-300 text-zinc-900 shadow-xl

---

XVII. THE STAR

Energy: Hope, inspiration, serenity
Color Palette:

• Primary: Starlight Blue (#38bdf8) → Celestial hope
• Secondary: Night Sky (#0c4a6e) → Cosmic expanse
• Accent: Stellar White (#f0f9ff) → Guiding light
• Dark: Deep Space (#082f49) → Infinite potential

Mood: Hopeful, serene, inspiring
Gradient: from-sky-950 via-sky-400 to-sky-900
Shadow Style: Soft glows, stellar halos
Atmosphere: Starlit night, cosmic hope, infinite promise

Background: bg-gradient-to-b from-sky-950 to-cyan-950
Card: bg-sky-900/60 backdrop-blur-xl border border-sky-400/30
Button: bg-sky-500 hover:bg-sky-400 shadow-lg shadow-sky-500/50

---

XVIII. THE MOON

Energy: Illusion, intuition, the unconscious
Color Palette:

• Primary: Moonlight Silver (#cbd5e1) → Lunar glow
• Secondary: Mystery Blue (#1e40af) → Deep unconscious
• Accent: Dream Purple (#c084fc) → Illusory visions
• Dark: Shadow Navy (#0f172a) → Hidden depths

Mood: Mysterious, dreamlike, illusory
Gradient: from-slate-900 via-blue-900 to-purple-900
Shadow Style: Soft, mysterious, shape-shifting
Atmosphere: Moonlit path, shifting shadows, dreamscape

Background: bg-gradient-to-br from-slate-900 via-blue-950 to-purple-950
Card: bg-slate-800/70 backdrop-blur-lg border border-purple-400/20
Button: bg-blue-700/80 hover:bg-purple-600 shadow-xl shadow-purple-500/30

---

XIX. THE SUN

Energy: Joy, success, vitality
Color Palette:

• Primary: Solar Gold (#fbbf24) → Radiant joy
• Secondary: Sunshine Orange (#fb923c) → Vital energy
• Accent: Daylight Yellow (#fef08a) → Pure happiness
• Dark: Warm Amber (#78350f) → Grounded warmth

Mood: Joyful, vibrant, life-affirming
Gradient: from-yellow-300 via-orange-400 to-yellow-200
Shadow Style: Warm, glowing, radiant
Atmosphere: Blazing sun, golden hour, pure vitality

Background: bg-gradient-to-br from-yellow-100 via-orange-200 to-yellow-50
Card: bg-white border-2 border-yellow-300 shadow-2xl shadow-yellow-200/50
Button: bg-orange-500 hover:bg-orange-400 shadow-lg shadow-orange-300

---

XX. JUDGEMENT

Energy: Rebirth, calling, absolution
Color Palette:

• Primary: Angelic White (#fafafa) → Divine calling
• Secondary: Trumpet Gold (#d97706) → Awakening sound
• Accent: Resurrection Blue (#60a5fa) → Rebirth
• Dark: Judgment Gray (#44403c) → Final reckoning

Mood: Awakening, transformative, clarity-bringing
Gradient: from-blue-400 via-white to-amber-400
Shadow Style: Radiant, revealing, transcendent
Atmosphere: Trumpet call, rising souls, cosmic reckoning

Background: bg-gradient-to-b from-blue-200 via-white to-amber-200
Card: bg-white border-2 border-blue-300 shadow-2xl shadow-blue-100
Button: bg-gradient-to-r from-blue-600 to-amber-600 hover:opacity-90

---

XXI. THE WORLD

Energy: Completion, wholeness, celebration
Color Palette:

• Primary: Cosmic Violet (#8b5cf6) → Universal harmony
• Secondary: Earth Green (#22c55e) → Grounded completion
• Accent: Celebration Gold (#fbbf24) → Triumphant joy
• Dark: Universe Indigo (#312e81) → Cosmic wholeness

Mood: Complete, harmonious, celebratory
Gradient: from-violet-600 via-green-500 to-yellow-400
Shadow Style: Embracing, complete, cosmic
Atmosphere: Dancing in the cosmos, perfect circle, completion

Background: bg-gradient-to-br from-violet-900 via-green-700 to-yellow-600
Card: bg-gradient-to-r from-violet-500/20 to-green-500/20 backdrop-blur-xl
Button: bg-gradient-to-r from-violet-600 via-green-600 to-yellow-600

---

Using Major Arcana in Design

Color Modifier Syntax

Add a Major Arcana card to any archetype for color transformation:

Hero + Sun = Bold achievement in golden, joyful tones
Magician + Moon = Transformative power in mysterious, lunar hues
Sage + Hermit = Deep wisdom in contemplative, introspective purples
Lover + Star = Romantic connection in hopeful, celestial blues

Palette Application Rules

1. Primary → Main UI backgrounds, large surfaces
2. Secondary → Cards, containers, grouped elements
3. Accent → CTAs, highlights, important actions
4. Dark → Text, borders, depth elements

Mood Translation

Each card's mood influences:

• Shadow intensity and color
• Gradient direction and complexity
• Border treatments
• Backdrop blur and opacity
• Animation timing and easing

---

"Each card is a portal to an emotional landscape. Choose the door your users should walk through."