Aurora UI

Aurora UI

"Ethereal, shifting lights. Like the Northern Lights trapped beneath a pane of frosted glass."

When to Use

Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the design-it skill and is not meant to be triggered directly.

Core Principles

1. Blurred Color Orbs: Large, out-of-focus, highly saturated color blobs floating in the background.
2. Glassy Overlays: Foreground elements are often semi-transparent (glassmorphism) to let the aurora effect shine through.
3. Fluid Motion: The background color orbs should slowly drift, expand, and contract.

Visual DNA

• Colors: Requires dark, deep backgrounds with vibrant, luminous accents. Midnight Luxury or Yacht Club (modified to dark mode) work well, injecting bright cyan, magenta, or lime green as the glowing orbs.
• Typography: Thin, elegant sans-serifs or sophisticated serif fonts. High contrast white text.
• Layout: Keep foreground UI elements minimal to let the background remain the star.

Web Implementation

• Best achieved with absolute-positioned, heavily blurred divs behind the main content.
• CSS Example:

body {
  background-color: #0A0A0A;
  overflow-x: hidden;
  position: relative;
}

/* The Glowing Orb */
.aurora-blob {
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(181,154,95,0.8) 0%, rgba(181,154,95,0) 70%);
  border-radius: 50%;
  filter: blur(80px);
  z-index: -1;
  animation: float 20s infinite ease-in-out alternate;
}