aurora-ui

name	Aurora UI
description	Atmospheric gradient mesh inspired by northern lights. Use this for premium SaaS products, developer platforms, and luxury brands—creates an ethereal, modern, high-end aesthetic with subtle motion and glassmorphism overlays.

What is Aurora UI?

Aurora UI is an advanced design system built on animated gradient meshes and atmospheric depth. Key philosophy:

• Mesh gradients: Multi-layered conic/radial gradients create flowing, organic color transitions
• Northern lights inspiration: Cool purples, teals, magentas, warm oranges blend seamlessly
• Subtle motion: Backgrounds gently shift via CSS animations, creating perceived depth
• Glassmorphism cards: Semi-transparent, blurred overlays hover above animated backdrops
• Premium aesthetic: Aspirational, smooth, technical—appeals to creatives and engineers

Historical context: Popularized by Stripe, Linear, Vercel, and Framer marketing sites (2021-2023). Signals modernity, technical sophistication, and design investment. Often paired with clean typography and minimal UI chrome.

Core Principles

1. Conic/radial gradient layers — Simulates mesh by stacking multiple gradient directions
2. Color stops: purples, teals, magentas, warm oranges — Cool + warm creates visual tension and interest
3. Animated @keyframes — Background-position or gradient color stops shift over 20-60 seconds
4. Soft glow effects — box-shadow with large blur radius (20-40px) and low opacity (0.1-0.2)
5. Glassmorphism overlays — Semi-transparent cards (rgba bg, backdrop-filter: blur) on animated base
6. Motion respects prefers-reduced-motion — Critical for accessibility

Visual Language

/* Aurora base: multi-layered gradient mesh */

/* Animated gradient background (wrapper/hero) */
.aurora-bg {
  background:
    conic-gradient(from 0deg at 50% 0%, #7C3AED 0deg, #4F46E5 90deg, #7C3AED 360deg),
    radial-gradient(ellipse at 20% 50%, #A78BFA 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, #EC4899 0%, transparent 50%),
    radial-gradient(ellipse at 60% 20%, #06B6D4 0%, transparent 50%),
    linear-gradient(180deg, #0F172A 0%, #1E293B 100%);
  background-size: 400% 400%, 200% 200%, 200% 200%, 200% 200%, 100% 100%;
  background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  animation: aurora-flow 40s ease-in-out infinite;
}

@keyframes aurora-flow {
  0% {
    background-position:
      0% 0%,
      0% 0%,
      0% 0%,
      0% 0%,
      0% 0%;
  }
  25% {
    background-position:
      100% 100%,
      50% 100%,
      100% 50%,
      50% 100%,
      0% 0%;
  }
  50% {
    background-position:
      50% 50%,
      100% 50%,
      50% 100%,
      100% 0%,
      0% 0%;
  }
  100% {
    background-position:
      0% 0%,
      0% 0%,
      0% 0%,
      0% 0%,
      0% 0%;
  }
}

/* Glassmorphic card overlay */
.aurora-card {
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(226, 232, 240, 0.1);
  border-radius: 16px;
  padding: 32px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

/* Soft glow (on cards, buttons, highlights) */
.aurora-glow {
  box-shadow:
    0 0 20px rgba(124, 58, 237, 0.2),
    0 0 40px rgba(236, 72, 153, 0.1);
}

/* Color palette (use as overlays/accents) */
--aurora-purple: #7C3AED;
--aurora-indigo: #4F46E5;
--aurora-pink: #EC4899;
--aurora-teal: #06B6D4;
--aurora-warm: #F97316;
--aurora-dark-bg: #0F172A;

Component Patterns

Aurora Button

.btn-aurora {
  background: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 12px 28px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: #FFFFFF;
  cursor: pointer;
  box-shadow:
    0 8px 24px rgba(124, 58, 237, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.btn-aurora:hover {
  transform: translateY(-2px);
  box-shadow:
    0 12px 32px rgba(124, 58, 237, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn-aurora:active {
  transform: translateY(0px);
}

Aurora Card (On Animated Background)

.card-aurora {
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(226, 232, 240, 0.15);
  border-radius: 20px;
  padding: 40px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.2),
    inset 0 1px 1px rgba(255, 255, 255, 0.15),
    0 0 32px rgba(124, 58, 237, 0.1);
}

.card-aurora h2 {
  color: #FFFFFF;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 16px;
  background: linear-gradient(135deg, #E0E7FF 0%, #F0ABFC 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.card-aurora p {
  color: #CBD5E1;
  font-size: 1.0625rem;
  line-height: 1.6;
}

Aurora Input Field

.input-aurora {
  background: rgba(30, 41, 59, 0.5);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(226, 232, 240, 0.1);
  border-radius: 12px;
  padding: 12px 16px;
  font-family: 'Courier New', monospace;
  font-size: 1rem;
  color: #FFFFFF;
  transition: all 0.2s ease;
}

.input-aurora::placeholder {
  color: rgba(203, 213, 225, 0.5);
}

.input-aurora:focus {
  outline: none;
  border-color: rgba(124, 58, 237, 0.4);
  box-shadow:
    0 0 0 3px rgba(124, 58, 237, 0.1),
    inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

Code Generation Guidance

When generating Aurora UI:

1. Create animated base with multiple layered gradients (conic + radial)
2. Define @keyframes that shift background-position over 30-60 seconds
3. Layered gradients formula:
   • Conic: conic-gradient(from 0deg at 50% 0%, color1, color2, color1)
   • Radial: radial-gradient(ellipse at Xpos Ypos, color 0%, transparent 50%)
   • Multiple radial for different color sources (purple, pink, teal, orange)
   • Base linear for dark underlay: linear-gradient(180deg, dark 0%, darker 100%)
4. Cards always use:
   • background: rgba(dark, 0.4-0.6) — semi-transparent dark base
   • backdrop-filter: blur(10-16px) — frosted glass effect
   • border: 1px solid rgba(255,255,255,0.1) — subtle light border
   • box-shadow: 0 8px 32px rgba(0,0,0,0.1) + glow effect
5. Text on cards: Gradient fills or light colors (#FFFFFF, #E0E7FF) with proper contrast
6. Respect motion: Wrap animations in @media (prefers-reduced-motion: no-preference)

For React (Hero Section):

const AuroraHero = () => (
  <div style={{
    position: 'relative',
    height: '100vh',
    overflow: 'hidden',
    background: 'radial-gradient(ellipse at 20% 50%, #A78BFA 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, #EC4899 0%, transparent 50%), radial-gradient(ellipse at 60% 20%, #06B6D4 0%, transparent 50%), linear-gradient(180deg, #0F172A 0%, #1E293B 100%)',
    backgroundSize: '200% 200%, 200% 200%, 200% 200%, 100% 100%',
    animation: 'aurora-flow 40s ease-in-out infinite',
  }}>
    <style>{`
      @keyframes aurora-flow {
        0%, 100% { background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%; }
        50% { background-position: 50% 50%, 100% 50%, 50% 100%, 0% 0%; }
      }
    `}</style>
    <div style={{
      position: 'absolute',
      inset: 0,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
    }}>
      <div style={{
        background: 'rgba(15, 23, 42, 0.5)',
        backdropFilter: 'blur(16px)',
        border: '1px solid rgba(226, 232, 240, 0.15)',
        borderRadius: '20px',
        padding: '40px',
        textAlign: 'center',
        color: '#FFFFFF',
        maxWidth: '500px',
      }}>
        <h1 style={{ fontSize: '2.5rem', fontWeight: 700, margin: '0 0 16px 0' }}>
          Welcome to Aurora
        </h1>
        <p style={{ color: '#CBD5E1', fontSize: '1.125rem', margin: 0 }}>
          Experience the future of design
        </p>
      </div>
    </div>
  </div>
);

Accessibility Notes

• Motion preferences: All animations must be wrapped in @media (prefers-reduced-motion: no-preference) { ... }
• Glassmorphism contrast: Ensure text on blurred backgrounds meets 4.5:1 WCAG AA. Test all text colors on blurred backdrops.
• Gradient readability: Use solid color overlays (semi-transparent) behind text; gradients alone are hard to read.
• Focus states explicit: outline or box-shadow must be visible; cannot rely on subtle color changes
• Animation performance: Large, complex gradients can impact performance on lower-end devices; monitor with DevTools

Examples

Input: SaaS Dashboard Hero

Output (Aurora UI):

<div style={{
  position: 'relative',
  height: '600px',
  background: 'radial-gradient(ellipse at 20% 50%, #A78BFA 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, #EC4899 0%, transparent 50%), linear-gradient(180deg, #0F172A 0%, #1E293B 100%)',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
}}>
  <div style={{
    background: 'rgba(15, 23, 42, 0.5)',
    backdropFilter: 'blur(16px)',
    border: '1px solid rgba(226, 232, 240, 0.15)',
    borderRadius: '20px',
    padding: '40px',
    maxWidth: '600px',
  }}>
    <h1 style={{
      fontSize: '2.5rem',
      fontWeight: 700,
      color: '#FFFFFF',
      margin: '0 0 12px 0',
      background: 'linear-gradient(135deg, #E0E7FF 0%, #F0ABFC 100%)',
      WebkitBackgroundClip: 'text',
      WebkitTextFillColor: 'transparent',
      backgroundClip: 'text',
    }}>
      Build Faster
    </h1>
    <p style={{ color: '#CBD5E1', fontSize: '1.125rem', marginBottom: '24px' }}>
      Modern developer tools, powered by Aurora.
    </p>
    <button style={{
      background: 'linear-gradient(135deg, #7C3AED 0%, #EC4899 100%)',
      border: '1px solid rgba(255,255,255,0.2)',
      borderRadius: '12px',
      padding: '12px 28px',
      color: '#FFFFFF',
      fontWeight: 600,
      cursor: 'pointer',
      boxShadow: '0 8px 24px rgba(124, 58, 237, 0.2)',
    }}>
      Get Started
    </button>
  </div>
</div>

Input: Feature Comparison Card

Output (Aurora UI):

<div style={{
  background: 'rgba(15, 23, 42, 0.5)',
  backdropFilter: 'blur(16px)',
  border: '1px solid rgba(226, 232, 240, 0.15)',
  borderRadius: '20px',
  padding: '40px',
  boxShadow: '0 8px 32px rgba(0, 0, 0, 0.2), 0 0 32px rgba(124, 58, 237, 0.1)',
}}>
  <div style={{ display: 'flex', alignItems: 'center', gap: '16px', marginBottom: '16px' }}>
    <div style={{
      width: '40px',
      height: '40px',
      borderRadius: '10px',
      background: 'linear-gradient(135deg, #7C3AED 0%, #EC4899 100%)',
    }} />
    <h3 style={{ fontSize: '1.25rem', fontWeight: 700, color: '#FFFFFF', margin: 0 }}>
      Advanced Analytics
    </h3>
  </div>
  <p style={{ color: '#CBD5E1', fontSize: '1rem', lineHeight: 1.6, margin: 0 }}>
    Real-time insights and comprehensive reporting. Visualize your data with beautiful, interactive charts.
  </p>
</div>