Arcanea Design System

Arcanea Design System v2.0 — Cosmic Glass

Use this system for ALL UI generation. Apple Liquid Glass + Cosmic Mythology + Premium SaaS.

1. Color Tokens (Tailwind)

Backgrounds

Brand

Text

2. Typography

Fluid scale: text-fluid-xs through text-fluid-hero

3. Glass Effects

Standard Glass

<div class="glass rounded-2xl p-6">Standard card</div>
<div class="glass-strong rounded-2xl p-6">Nav/modal</div>
<div class="glass-subtle rounded-xl p-4">Hover overlay</div>

Liquid Glass (Apple 2026)

<div class="liquid-glass rounded-3xl p-8">Premium surface</div>
<div class="liquid-glass-elevated rounded-3xl p-8">Hero card</div>

Special Effects

<div class="iridescent-glass rounded-3xl p-8">Rainbow-shift featured</div>
<div class="bubble-shine rounded-full w-24 h-24">Badge/orb</div>

4. Component Patterns

Buttons

// Primary
<button className="bg-brand-primary text-white rounded-lg px-4 py-2 font-medium shadow-glow-brand hover:scale-[1.02] transition-all duration-fast">
  Primary Action
</button>

// Crystal
<button className="bg-gradient-crystal text-cosmic-void rounded-lg px-4 py-2 font-medium shadow-glow-sm">
  Crystal Action
</button>

// Ghost
<button className="text-text-secondary hover:text-text-primary rounded-lg px-4 py-2 font-medium transition-colors">
  Ghost Action
</button>

Cards

// Standard
<div className="glass rounded-2xl p-6 hover-lift glow-card">
  <h3 className="font-display text-fluid-2xl text-gradient-crystal mb-4">Title</h3>
  <p className="font-sans text-fluid-base text-text-secondary">Description</p>
</div>

// Featured
<div className="liquid-glass rounded-3xl p-8 border-gradient">
  <h3 className="font-display text-fluid-3xl text-gradient-brand mb-4">Featured</h3>
</div>

Gradient Text

<h1 className="text-gradient-crystal">Crystal</h1>
<h1 className="text-gradient-brand">Violet → Crystal</h1>
<h1 className="text-gradient-fire">Fire → Gold</h1>
<h1 className="text-gradient-gold">Gold</h1>

5. Backgrounds

// Page background
<div className="bg-cosmic-void bg-cosmic-mesh min-h-screen">

// Hero with mesh gradient
<section className="bg-mesh-gradient py-24 lg:py-32">

// Aurora atmospheric
<section className="bg-aurora py-24">

6. Motion (Framer Motion)

// Cosmic fade in
const cosmicFadeIn = {
  initial: { opacity: 0, y: 20 },
  animate: { opacity: 1, y: 0 },
  transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] }
};

// Stagger container
const staggerContainer = {
  animate: { transition: { staggerChildren: 0.08 } }
};

// Hover
whileHover={{ scale: 1.02, y: -4 }}
transition={{ type: "spring", stiffness: 300, damping: 20 }}

7. Anti-Patterns

• Raw #ffffff text → use text-primary (#e6eefc)
• Emoji as icons → use Lucide React
• Space Grotesk → not in our type system
• Crystal as large bg fill → accent only
• Flat box-shadows → use elevation scale
• Hardcoded hex → use CSS variables or Tailwind tokens
• Skip cosmic depth ladder → void → deep → surface → raised

Source of Truth

.arcanea/design/DESIGN_BIBLE.md — if anything conflicts, the Bible wins.