arcanea-design-system

The Arcanean Design System

"In Arcanea, every pixel carries meaning. The visual language is not decoration - it is communication."

Design Philosophy

The Three Principles

1. Magic Over Mundane: Every element should feel slightly extraordinary
2. Depth Creates Drama: Layers, glows, and dimension suggest hidden power
3. Restraint Amplifies Impact: Cosmic effects work because they're used sparingly

The Visual Metaphor

The Arcanean UI represents a portal into creative consciousness:

• Dark backgrounds = the cosmic void of infinite possibility
• Glowing elements = activated creative energy
• Glass surfaces = the veil between worlds
• Gold accents = distilled wisdom and achievement

Color Architecture

The Cosmic Foundation

/* === COSMIC DEPTHS === */
--cosmic-void: #0b0e14;      /* Deepest background - infinite space */
--cosmic-deep: #121826;      /* Primary background - creative space */
--cosmic-surface: #1a2332;   /* Elevated surfaces - active zones */
--cosmic-raised: #242f42;    /* Highest surfaces - focus areas */

The Arcanean Gold

/* === UNIVERSAL ACCENT === */
--gold-light: #fff4d6;       /* Whisper of light */
--gold-medium: #ffd966;      /* Warm glow */
--gold-bright: #ffcc33;      /* Active energy */
--gold-deep: #e6b800;        /* Deep wisdom */
--gold-dark: #b38600;        /* Ancient knowledge */

Academy Color Palettes

Atlantean Academy (Story/Water)

/* Deep ocean blues with bioluminescent teal */
--atlantean-primary: #1e5a99;    /* Deep ocean */
--atlantean-teal: #26cccc;       /* Bioluminescent glow */
--atlantean-glow: #00e6e6;       /* Maximum luminescence */

/* Use for: Story creation, narrative tools, text-heavy interfaces */

Draconic Academy (Visual/Sky)

/* Crimson fire with golden scales */
--draconic-crimson: #d92952;     /* Dragon fire */
--draconic-gold: #ffc61a;        /* Scale gold */
--draconic-sky: #2d8fe6;         /* Soaring heights */

/* Use for: Visual creation, image tools, canvas interfaces */

Creation & Light Academy (Music/Audio)

/* Pure light with prismatic refractions */
--creation-gold: #ffcc33;        /* Pure light */
--creation-prism-blue: #2d85f5;  /* Refracted blue */
--creation-wave: #3dc4e6;        /* Sound frequency */

/* Use for: Audio creation, music tools, frequency interfaces */

Typography System

Font Stack

/* Display (Headings, Titles) */
font-family: 'Cinzel', 'Cormorant Garamond', serif;

/* Body (Content, UI) */
font-family: 'Crimson Pro', 'Source Serif Pro', Georgia, serif;

/* Code (Monospace) */
font-family: 'JetBrains Mono', 'Fira Code', monospace;

Type Scale

--text-xs: 0.75rem;    /* 12px - Captions, labels */
--text-sm: 0.875rem;   /* 14px - Secondary content */
--text-base: 1rem;     /* 16px - Body text */
--text-lg: 1.125rem;   /* 18px - Emphasis */
--text-xl: 1.25rem;    /* 20px - Subheadings */
--text-2xl: 1.5rem;    /* 24px - Section headers */
--text-3xl: 1.875rem;  /* 30px - Page titles */
--text-4xl: 2.25rem;   /* 36px - Hero text */
--text-5xl: 3rem;      /* 48px - Display */

Text Colors

--text-primary: #e6eefc;    /* Main content */
--text-secondary: #9bb1d0;  /* Supporting text */
--text-muted: #708094;      /* Tertiary content */
--text-disabled: #515b6b;   /* Inactive elements */

Spacing System

Base Unit: 4px

--space-0: 0;
--space-1: 0.25rem;   /* 4px */
--space-2: 0.5rem;    /* 8px */
--space-3: 0.75rem;   /* 12px */
--space-4: 1rem;      /* 16px */
--space-5: 1.25rem;   /* 20px */
--space-6: 1.5rem;    /* 24px */
--space-8: 2rem;      /* 32px */
--space-10: 2.5rem;   /* 40px */
--space-12: 3rem;     /* 48px */
--space-16: 4rem;     /* 64px */
--space-20: 5rem;     /* 80px */
--space-24: 6rem;     /* 96px */

Container Widths

--container-xs: 320px;
--container-sm: 640px;
--container-md: 768px;
--container-lg: 1024px;
--container-xl: 1280px;
--container-2xl: 1536px;

Effect System

Glass Morphism

/* Light glass - subtle depth */
.glass-light {
  background: rgba(18, 24, 38, 0.4);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Standard glass - primary surfaces */
.glass {
  background: rgba(18, 24, 38, 0.6);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Heavy glass - important elements */
.glass-heavy {
  background: rgba(18, 24, 38, 0.8);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

Glow Effects

/* Soft glow - ambient */
.glow-soft {
  box-shadow: 0 0 20px rgba(155, 177, 208, 0.3);
}

/* Academy glows */
.glow-atlantean {
  box-shadow: 0 0 30px rgba(0, 230, 230, 0.5);
}

.glow-draconic {
  box-shadow: 0 0 30px rgba(255, 219, 77, 0.5);
}

.glow-creation {
  box-shadow: 0 0 30px rgba(255, 230, 128, 0.5);
}

Text Glow

.text-glow-soft {
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.text-glow-atlantean {
  text-shadow: 0 0 15px rgba(0, 230, 230, 0.6);
}

Shimmer Animation

.shimmer {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 25%,
    rgba(255, 204, 51, 0.1) 50%,
    rgba(38, 204, 204, 0.1) 75%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer 3s infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

Component Patterns

Cards

// Standard Arcanean Card
<div className="
  bg-cosmic-surface/60
  backdrop-blur-md
  border border-white/10
  rounded-lg
  p-6
  hover:border-gold-medium/30
  transition-all duration-300
">
  {children}
</div>

// Academy-Themed Card
<div className={cn(
  "glass rounded-lg p-6 transition-all duration-300",
  academy === 'atlantean' && "hover:glow-atlantean",
  academy === 'draconic' && "hover:glow-draconic",
  academy === 'creation' && "hover:glow-creation"
)}>
  {children}
</div>

Buttons

// Primary Button
<button className="
  bg-gold-bright
  text-cosmic-void
  font-display font-semibold
  px-6 py-3
  rounded-md
  hover:bg-gold-medium
  active:bg-gold-deep
  transition-colors duration-200
">
  {label}
</button>

// Ghost Button
<button className="
  bg-transparent
  text-text-primary
  border border-cosmic-border-bright
  px-6 py-3
  rounded-md
  hover:bg-cosmic-surface
  hover:border-gold-medium/50
  transition-all duration-200
">
  {label}
</button>

// Academy Button
<button className={cn(
  "px-6 py-3 rounded-md font-display transition-all duration-200",
  academy === 'atlantean' && "bg-atlantean-teal text-cosmic-void hover:glow-atlantean",
  academy === 'draconic' && "bg-draconic-gold text-cosmic-void hover:glow-draconic",
  academy === 'creation' && "bg-creation-gold text-cosmic-void hover:glow-creation"
)}>
  {label}
</button>

Inputs

// Standard Input
<input className="
  w-full
  bg-cosmic-surface
  border border-cosmic-border-bright
  text-text-primary
  placeholder:text-text-muted
  rounded-md
  px-4 py-3
  focus:outline-none
  focus:ring-2 focus:ring-gold-medium/50
  focus:border-gold-medium
  transition-all duration-200
"/>

// Magical Input (with glow on focus)
<input className="
  w-full
  glass-light
  border border-white/10
  text-text-primary
  placeholder:text-text-muted
  rounded-md
  px-4 py-3
  focus:outline-none
  focus:glow-soft
  focus:border-gold-bright/50
  transition-all duration-300
"/>

Layout Patterns

The Cosmic Canvas

// Full-page cosmic background
<div className="
  min-h-screen
  bg-cosmic-deep
  bg-gradient-to-b from-cosmic-void via-cosmic-deep to-cosmic-surface
">
  {children}
</div>

The Portal Frame

// Centered content with mystical framing
<div className="
  min-h-screen
  flex items-center justify-center
  p-4
">
  <div className="
    w-full max-w-lg
    glass-heavy
    rounded-2xl
    p-8
    border border-gold-medium/20
  ">
    {children}
  </div>
</div>

The Library Layout

// Sidebar + content for exploration
<div className="flex min-h-screen">
  <aside className="
    w-64
    bg-cosmic-surface
    border-r border-cosmic-border
    p-6
  ">
    {navigation}
  </aside>
  <main className="flex-1 p-8">
    {content}
  </main>
</div>

Animation Principles

The Arcanean Motion Language

1. Emergence: Elements fade in from transparency
2. Ascension: Elements rise slightly as they appear
3. Luminescence: Glows pulse subtly
4. Flow: Transitions are smooth, never jarring

Standard Durations

--duration-instant: 100ms;   /* Micro-interactions */
--duration-fast: 200ms;      /* Hover states */
--duration-normal: 300ms;    /* Standard transitions */
--duration-slow: 500ms;      /* Page transitions */
--duration-glacial: 1000ms;  /* Ambient animations */

Easing Functions

--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
--ease-dramatic: cubic-bezier(0.7, 0, 0.3, 1);

Entrance Animations

/* Fade + Rise */
@keyframes emerge {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scale + Fade */
@keyframes manifest {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Glow Pulse */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(255, 204, 51, 0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(255, 204, 51, 0.6);
  }
}

Responsive Design

Breakpoint System

/* Mobile First */
sm: 640px   /* Small tablets, large phones */
md: 768px   /* Tablets */
lg: 1024px  /* Small laptops */
xl: 1280px  /* Desktops */
2xl: 1536px /* Large screens */

Responsive Patterns

// Typography scaling
<h1 className="text-2xl md:text-3xl lg:text-4xl xl:text-5xl">
  {title}
</h1>

// Layout switching
<div className="
  flex flex-col md:flex-row
  gap-4 md:gap-8
">
  {children}
</div>

// Visibility control
<div className="hidden lg:block">Desktop only</div>
<div className="lg:hidden">Mobile/Tablet only</div>

Accessibility

Focus States

/* Always visible, beautiful focus */
:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
  border-radius: 4px;
}

Color Contrast

• All text meets WCAG AA standards (4.5:1 minimum)
• Interactive elements meet enhanced contrast (7:1)
• Focus indicators are always visible

Reduced Motion

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Design Tokens Reference

Quick Copy

const ARCANEA_TOKENS = {
  colors: {
    cosmic: {
      void: '#0b0e14',
      deep: '#121826',
      surface: '#1a2332',
      raised: '#242f42',
    },
    gold: {
      light: '#fff4d6',
      medium: '#ffd966',
      bright: '#ffcc33',
      deep: '#e6b800',
    },
    atlantean: {
      primary: '#1e5a99',
      teal: '#26cccc',
      glow: '#00e6e6',
    },
    draconic: {
      crimson: '#d92952',
      gold: '#ffc61a',
      sky: '#2d8fe6',
    },
    creation: {
      gold: '#ffcc33',
      prism: '#2d85f5',
      wave: '#3dc4e6',
    },
  },
  fonts: {
    display: 'Cinzel, serif',
    body: 'Crimson Pro, serif',
    mono: 'JetBrains Mono, monospace',
  },
  radii: {
    sm: '4px',
    md: '8px',
    lg: '12px',
    xl: '16px',
    full: '9999px',
  },
};

Usage Guidelines

Do

• Use cosmic backgrounds as the foundation
• Apply glows sparingly for emphasis
• Let glass effects create depth
• Use academy colors for domain context
• Animate with purpose, not decoration

Don't

• Make everything glow (dilutes impact)
• Use light backgrounds (breaks the metaphor)
• Mix academy themes haphazardly
• Over-animate (magic becomes noise)
• Forget accessibility

"The interface is a portal. Design it as such."