Overview
The 12 Jungian archetypes represent universal patterns of human behavior and motivation. Each archetype carries distinct visual languages, interaction patterns, and design philosophies that can be translated into UI/UX systems.
The 12 Archetypes
1. THE HERO
Core Drive: Mastery, courage, achievement Visual Language: Bold, angular, dynamic UI Characteristics:
- Strong geometric shapes (triangles, sharp edges)
- High contrast ratios (dark/light extremes)
- Action-oriented CTAs ("Conquer", "Achieve", "Master")
- Progress indicators and achievement badges
- Competitive elements and leaderboards
Typography: Bold sans-serif, uppercase headers, tight tracking Layout: Asymmetric grids, diagonal elements, dynamic tension Spacing: Tight, energetic, purposeful Motion: Fast transitions, bold animations, directional movement
Example Patterns:
Hero Button: bg-red-600 hover:bg-red-700 px-8 py-4 text-xl font-bold uppercase tracking-wider transform hover:scale-105
Hero Card: border-l-4 border-red-600 bg-zinc-900 shadow-2xl
2. THE MAGICIAN
Core Drive: Transformation, knowledge, power Visual Language: Mysterious, sophisticated, transformative UI Characteristics:
- Gradients and transformations
- Interactive reveals and discoveries
- Mystical symbols and sacred geometry
- "Behind the curtain" progressive disclosure
- Transformation metaphors (before/after)
Typography: Serif display fonts, elegant script accents, varying weights Layout: Centered compositions, radial symmetry, layered depth Spacing: Generous, intentional negative space Motion: Smooth morphing, particle effects, magical reveals
Example Patterns:
Magician Card: bg-gradient-to-br from-purple-900 via-indigo-800 to-blue-900 backdrop-blur-xl
Transformation Button: group relative overflow-hidden [child transitions]
3. THE SAGE
Core Drive: Truth, wisdom, understanding Visual Language: Clean, minimal, scholarly UI Characteristics:
- Information hierarchy emphasized
- Clear categorization and taxonomy
- Reading-focused layouts
- Knowledge graphs and connections
- Citation and reference systems
Typography: Humanist serif for body, geometric sans for UI Layout: Grid-based, predictable, spacious margins Spacing: Academic spacing ratios (1.5-2x line height) Motion: Minimal, purposeful, never decorative
Example Patterns:
Sage Container: max-w-prose mx-auto leading-relaxed text-zinc-700 dark:text-zinc-300
Sage Navigation: border-b border-zinc-200 bg-white/80 backdrop-blur-sm
4. THE INNOCENT
Core Drive: Safety, happiness, simplicity Visual Language: Soft, friendly, accessible UI Characteristics:
- Rounded corners everywhere
- Pastel color palettes
- Friendly illustrations and icons
- Simple, clear language
- Encouraging feedback messages
Typography: Rounded sans-serif, friendly weights (400-600) Layout: Symmetric, centered, balanced Spacing: Generous padding, comfortable breathing room Motion: Gentle bounces, playful micro-interactions
Example Patterns:
Innocent Button: bg-sky-400 hover:bg-sky-500 rounded-full px-6 py-3 shadow-sm
Innocent Card: bg-white rounded-3xl p-8 shadow-md border-2 border-sky-100
5. THE EXPLORER
Core Drive: Discovery, freedom, adventure Visual Language: Open, expansive, journey-focused UI Characteristics:
- Map metaphors and navigation
- Journey/path visualizations
- Discovery-based navigation
- Breadcrumbs and waypoints
- Exploration rewards
Typography: Adventure-inspired fonts, slightly condensed Layout: Horizontal scrolling, panoramic views, map-like Spacing: Open, airy, suggesting vast spaces Motion: Parallax scrolling, zooming transitions
Example Patterns:
Explorer Header: h-screen bg-cover bg-fixed bg-center [parallax effect]
Explorer Card: hover:scale-105 cursor-pointer transition-transform
6. THE REBEL
Core Drive: Revolution, disruption, liberation Visual Language: Unconventional, edgy, rule-breaking UI Characteristics:
- Asymmetric layouts
- Unexpected interactions
- Glitch effects and disruption
- Counter-cultural messaging
- Break-the-grid moments
Typography: Industrial fonts, distressed effects, mixed cases Layout: Broken grids, chaotic energy, intentional disorder Spacing: Variable, unpredictable, tension-creating Motion: Glitch animations, unexpected movements, disruption
Example Patterns:
Rebel Section: -rotate-2 border-4 border-black bg-yellow-400 [brutalist style]
Rebel Text: font-mono uppercase tracking-widest [glitch-effect]
7. THE LOVER
Core Drive: Intimacy, beauty, sensuality Visual Language: Elegant, sensual, emotionally resonant UI Characteristics:
- Rich textures and gradients
- Romantic color palettes
- Emphasis on imagery
- Emotional storytelling
- Luxurious details
Typography: Elegant serifs, script accents, refined proportions Layout: Flowing, organic, rhythm-based Spacing: Intimate, considered, luxurious Motion: Smooth, sensual, flowing transitions
Example Patterns:
Lover Card: bg-gradient-to-br from-rose-100 to-pink-200 backdrop-blur-lg
Lover Typography: font-serif text-rose-900 leading-loose
8. THE CREATOR
Core Drive: Innovation, imagination, self-expression Visual Language: Artistic, experimental, expressive UI Characteristics:
- Canvas/workspace metaphors
- Tool palettes and makers' interfaces
- Creative freedom in interaction
- Process visualization
- Experimentation encouraged
Typography: Creative variety, expressive mixing Layout: Flexible grids, tool-based layouts Spacing: Functional, workspace-like Motion: Responsive to creation, playful feedback
Example Patterns:
Creator Workspace: grid grid-cols-12 gap-4 bg-zinc-50 [maker interface]
Creator Tool: hover:bg-zinc-200 active:bg-zinc-300 cursor-pointer
9. THE JESTER
Core Drive: Joy, playfulness, entertainment Visual Language: Playful, energetic, surprising UI Characteristics:
- Unexpected delights and easter eggs
- Gamification elements
- Humor in microcopy
- Playful animations
- Colorful, energetic palettes
Typography: Playful fonts, varying sizes, energetic rhythm Layout: Dynamic, asymmetric, entertaining Spacing: Energetic, varied, rhythmic Motion: Bouncy, exaggerated, delightful
Example Patterns:
Jester Button: animate-bounce bg-gradient-to-r from-pink-500 to-yellow-500
Jester Card: rotate-1 hover:rotate-0 [playful tilt]
10. THE CAREGIVER
Core Drive: Service, compassion, nurturing Visual Language: Warm, supportive, accessible UI Characteristics:
- Clear help and support systems
- Empathetic messaging
- Accessibility-first design
- Supportive feedback
- Community-building features
Typography: Warm, readable, comfortable fonts Layout: Organized, predictable, safe Spacing: Comfortable, generous, never cramped Motion: Gentle, supportive, never jarring
Example Patterns:
Caregiver Section: bg-amber-50 border-l-4 border-amber-400 p-6
Caregiver Message: text-amber-900 leading-relaxed [supportive tone]
11. THE RULER
Core Drive: Control, order, leadership Visual Language: Authoritative, prestigious, structured UI Characteristics:
- Hierarchical organization
- Premium materials and finishes
- Control panel metaphors
- Status indicators
- Command-and-control interfaces
Typography: Prestigious serifs, strong hierarchy Layout: Strict grids, formal symmetry Spacing: Precise, authoritative Motion: Dignified, controlled, purposeful
Example Patterns:
Ruler Dashboard: bg-zinc-900 border border-amber-600/20 [premium dark]
Ruler Typography: font-serif text-amber-500 tracking-wide uppercase
12. THE EVERYMAN
Core Drive: Belonging, connection, community Visual Language: Familiar, unpretentious, approachable UI Characteristics:
- Familiar patterns (no surprises)
- Community features
- Social proof elements
- Conversational tone
- Democratic design
Typography: Familiar system fonts, comfortable sizes Layout: Conventional grids, predictable patterns Spacing: Standard, comfortable, familiar Motion: Expected, never surprising
Example Patterns:
Everyman Container: bg-white rounded-lg shadow p-6 [familiar card]
Everyman Button: bg-blue-600 hover:bg-blue-700 [standard primary]
Using Archetypes in Design
Single Archetype Application
Use one archetype as the dominant design voice:
/archetypal-ui hero
→ Generates Hero-driven design system
Archetype Blending
Combine 2-3 archetypes for nuanced personalities:
Hero (70%) + Magician (30%) = Transformative achievement platform
Sage (60%) + Caregiver (40%) = Supportive educational experience
Archetype + Major Arcana
Combine archetype (structure) with Tarot card (color/mood):
Hero + Sun = Bold, victorious, golden
Magician + Moon = Mysterious, transformative, silver-blue
Sage + Hermit = Contemplative, minimal, deep purple
Design Translation Framework
When applying an archetype:
- Identify Core Drive - What motivates this user?
- Visual Language - What aesthetic resonates?
- UI Patterns - Which interaction patterns serve this drive?
- Typography - What font personality matches?
- Motion - How should things move?
- Color - Add Major Arcana for palette (see major-arcana skill)
"The archetype is not a metaphor—it is the pattern itself, manifesting through pixels and interactions."