archetypal-combinations

What this skill does

# Archetypal Combinations: Alchemy Engine

## Overview

The Archetypal Alchemy system combines **Jungian Archetypes** (behavioral/structural patterns) with **Major Arcana** (color/mood modifiers) to generate cohesive, meaningful UI/UX designs.

**Formula**: `ARCHETYPE + CARD = Complete Design System`

---

## The Alchemy Process

### Step 1: Parse the Formula
```
Input: "Hero+Sun"
Parse: Archetype = Hero, Card = Sun
```

### Step 2: Extract Archetype Patterns
From jungian-archetypes skill:
- UI Characteristics
- Typography rules
- Layout principles
- Spacing patterns
- Motion behavior

### Step 3: Extract Card Colors
From major-arcana skill:
- Primary color
- Secondary color
- Accent color
- Dark shade
- Gradient formula
- Shadow style
- Atmospheric mood

### Step 4: Synthesize Design System
Combine archetype structure with card colors to create:
- Complete Tailwind config
- Component examples
- Usage guidelines

---

## Combination Matrix Examples

### Hero + Sun
**Synthesis**: Bold achievement in radiant golden tones

**Structure** (from Hero):
- Bold, angular shapes
- High contrast
- Action-oriented CTAs
- Dynamic layouts
- Fast animations

**Colors** (from Sun):
- Primary: `bg-yellow-300` → Radiant joy
- Secondary: `bg-orange-400` → Vital energy
- Accent: `bg-yellow-100` → Pure happiness
- Dark: `text-amber-900` → Grounded warmth

**Result**: Victorious, energetic, life-affirming achievement platform

```tailwind
// Hero+Sun Button
<button className="
  bg-orange-500 hover:bg-orange-400
  px-8 py-4
  text-xl font-bold uppercase tracking-wider
  rounded-md shadow-2xl shadow-orange-300
  transform hover:scale-105 transition-all
  text-white
">
  CLAIM VICTORY
</button>

// Hero+Sun Card
<div className="
  bg-gradient-to-br from-yellow-100 to-orange-200
  border-l-4 border-orange-500
  p-6 rounded-lg shadow-2xl shadow-yellow-200/50
">
  <h2 className="text-3xl font-bold text-amber-900 uppercase tracking-tight">
    Achievement Unlocked
  </h2>
</div>
```

---

### Magician + Moon
**Synthesis**: Transformative power in mysterious, lunar hues

**Structure** (from Magician):
- Gradients and transformations
- Interactive reveals
- Sacred geometry
- Layered depth
- Smooth morphing

**Colors** (from Moon):
- Primary: `bg-slate-900` → Shadow depths
- Secondary: `bg-blue-900` → Mystery blue
- Accent: `bg-purple-400` → Dream visions
- Dark: `text-slate-100` → Moonlight

**Result**: Mystical, transformative, illusion-weaving interface

```tailwind
// Magician+Moon Container
<div className="
  bg-gradient-to-br from-slate-900 via-blue-950 to-purple-950
  backdrop-blur-lg
  border border-purple-400/20
  p-8 rounded-2xl
  shadow-2xl shadow-purple-500/30
">
  <div className="relative group">
    <div className="absolute inset-0 bg-purple-500/10 blur-xl
                    group-hover:bg-purple-500/20 transition-all duration-700" />
    <p className="relative text-slate-300 font-serif text-lg leading-relaxed">
      The transformation begins...
    </p>
  </div>
</div>

// Magician+Moon Button
<button className="
  bg-gradient-to-r from-blue-700 to-purple-600
  hover:from-purple-600 hover:to-blue-700
  px-6 py-3 rounded-xl
  shadow-xl shadow-purple-500/30
  text-white font-medium
  transition-all duration-500
  backdrop-blur-sm
">
  Reveal the Mystery
</button>
```

---

### Sage + Hermit
**Synthesis**: Deep wisdom in contemplative, introspective tones

**Structure** (from Sage):
- Information hierarchy
- Reading-focused layouts
- Clean categorization
- Academic spacing
- Minimal motion

**Colors** (from Hermit):
- Primary: `bg-indigo-950` → Inner depths
- Secondary: `bg-purple-900` → Contemplation
- Accent: `bg-gray-400` → Lantern light
- Dark: `text-gray-100` → Illumination

**Result**: Introspective knowledge platform for deep learning

```tailwind
// Sage+Hermit Reading Container
<article className="
  max-w-prose mx-auto
  bg-gradient-to-b from-indigo-950 to-gray-950
  p-12 rounded-lg
  border border-purple-700/30
">
  <h1 className="
    text-4xl font-serif text-gray-200
    mb-6 leading-tight
  ">
    The Path of Inner Wisdom
  </h1>

  <p className="
    text-lg text-gray-300
    leading-relaxed mb-4
    font-serif
  ">
    In solitude, we find the answers that elude us in noise...
  </p>

  <blockquote className="
    border-l-4 border-purple-700
    pl-6 my-8
    text-gray-400 italic
  ">
    "The cave you fear to enter holds the treasure you seek."
  </blockquote>
</article>

// Sage+Hermit Navigation
<nav className="
  bg-indigo-950/80 backdrop-blur-md
  border-b border-purple-700/30
  px-6 py-4
">
  <a className="text-gray-400 hover:text-purple-400 transition-colors">
    Contemplations
  </a>
</nav>
```

---

### Innocent + Star
**Synthesis**: Pure optimism in hopeful, celestial tones

**Structure** (from Innocent):
- Rounded corners
- Pastel palettes (enhanced by Star)
- Friendly language
- Symmetric layouts
- Gentle motion

**Colors** (from Star):
- Primary: `bg-sky-400` → Starlight hope
- Secondary: `bg-sky-900` → Night sky
- Accent: `bg-sky-50` → Stellar white
- Dark: `text-sky-950` → Deep space

**Result**: Hopeful, nurturing, star-blessed simplicity

```tailwind
// Innocent+Star Card
<div className="
  bg-gradient-to-br from-sky-50 to-cyan-100
  rounded-3xl p-8
  border-2 border-sky-200
  shadow-xl shadow-sky-200/50
">
  <div className="flex items-center gap-4 mb-4">
    <div className="w-16 h-16 rounded-full bg-sky-400
                    flex items-center justify-center
                    shadow-lg shadow-sky-500/50">
      ⭐
    </div>
    <h3 className="text-2xl font-semibold text-sky-900">
      Your Dreams Are Valid
    </h3>
  </div>
  <p className="text-sky-700 leading-relaxed">
    Every star in the sky once seemed impossible...
  </p>
</div>

// Innocent+Star Button
<button className="
  bg-sky-400 hover:bg-sky-500
  text-white font-medium
  px-6 py-3 rounded-full
  shadow-lg shadow-sky-300
  transition-all duration-300
  hover:shadow-xl hover:shadow-sky-400
">
  Make a Wish ✨
</button>
```

---

### Rebel + Tower
**Synthesis**: Revolutionary disruption in shocking, lightning tones

**Structure** (from Rebel):
- Asymmetric layouts
- Broken grids
- Glitch effects
- Unexpected interactions
- Chaotic energy

**Colors** (from Tower):
- Primary: `bg-yellow-300` → Lightning strike
- Secondary: `bg-zinc-800` → Storm chaos
- Accent: `bg-yellow-400` → Electric shock
- Dark: `text-zinc-100` → What remains

**Result**: Disruptive, revelatory, structure-shattering interface

```tailwind
// Rebel+Tower Section
<section className="
  -rotate-2
  bg-gradient-to-br from-zinc-900 via-yellow-400 to-zinc-800
  border-4 border-yellow-400
  p-12 my-16
  shadow-2xl shadow-yellow-500/30
  relative overflow-hidden
">
  <div className="absolute inset-0 opacity-20">
    {/* Lightning SVG background */}
  </div>

  <h2 className="
    font-mono uppercase tracking-widest
    text-5xl text-zinc-900
    mb-4
    [text-shadow:2px_2px_0_theme(colors.yellow.300)]
  ">
    BURN IT DOWN
  </h2>

  <p className="text-zinc-100 font-bold text-xl">
    The old structures are crumbling. Build from the rubble.
  </p>
</section>

// Rebel+Tower CTA
<button className="
  bg-yellow-400 hover:bg-yellow-300
  text-zinc-900 font-black uppercase
  px-8 py-4
  transform -rotate-1 hover:rotate-0
  shadow-xl shadow-yellow-500/50
  border-2 border-zinc-900
  transition-all
">
  REVOLUTION NOW ⚡
</button>
```

---

### Lover + Empress
**Synthesis**: Sensual abundance in lush, nurturing tones

**Structure** (from Lover):
- Rich textures
- Romantic palettes
- Emphasis on imagery
- Flowing layouts
- Sensual motion

**Colors** (from Empress):
- Primary: `bg-emerald-600` → Growth
- Secondary: `bg-rose-400` → Love
- Accent: `bg-amber-300` → Abundance
- Dark: `text-amber-900` → Fertile earth

**Result**: Lush, beautiful, love-and-growth celebrating platform

```tailwind
// Lover+Empress Hero
<section className="
  bg-gradient-to-br from-emerald-100 via-rose-100 to-amber-100
  min-h-screen f