Skip to main content
Arcanea™ Creative Intelligence
Chat with AI. Build fantasy worlds. Create art, stories, music. An open creative multiverse for world-builders.
Stay in the loop © 2026 Arcanea™. All rights reserved.
Arcanean Design System (Cosmic) — Arcanea Skills
design v2.0.0 by Arcanea MIT Arcanean Design System (Cosmic) The cosmic visual language — depth, glows, gold accents, glass surfaces, and restraint as the three principles of Arcanean UI.
#design #ui #ux #visual #theming #css #design-system #tokens #tailwind
Install
Claude Code OpenCode Cursor Codex Gemini CLI Universal (npx)
$ cp -r oss/skills/arcanea/arcanea-design-system ~/.claude/skills/Copies the skill directory to your Claude Code skills folder. Restart the tool to load.
Usage Examples
User: style this button as Arcanean → AI: applies cosmic-surface background, gold-medium accent, depth glow User: what's the cosmic-void color? → AI: returns #0b0e14 with usage guidance for deepest backgrounds User: build an Atlantean academy card → AI: uses glass, atlantean-teal, glow-atlantean on hover Triggers design UI theme colors visual interface cosmic academy theme
The Arcanean Design System
"In Arcanea, every pixel carries meaning. The visual language is not decoration - it is communication."
Design Philosophy
The Three Principles
Magic Over Mundane : Every element should feel slightly extraordinaryDepth Creates Drama : Layers, glows, and dimension suggest hidden powerRestraint 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: 'Space Grotesk', sans-serif;
/* Body (Content, UI) */
font-family: 'Inter', -apple-system, sans-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
Emergence : Elements fade in from transparencyAscension : Elements rise slightly as they appearLuminescence : Glows pulse subtlyFlow : 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: 'Space Grotesk, sans-serif',
body: 'Inter, sans-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."