darkcreativevibrantimmersive

Aurora Glass

Deep purple-black gradient canvas with animated aurora orbs, frosted glass surfaces, and neon accents — a creative design language that makes interfaces feel alive.

✦ Aurora Glass

Design Tokens

Color Tokens

Typography Scale

DisplayCreate brilliance

HeadingAurora effects

BodyTranslucent layers catch the light behind them.

LabelGRADIENT MESH

Captionblur(20px) · saturate(1.6)

Glass Layers

6px

12px

20px

32px

Components

Component

Buttons & Actions

Component

Projects

Component

New Scene

Scene Title

Gradient Style

Aurora Effect

Signature Component

Glassmorphism

Aurora Effects

blur(8px)

alpha 0.08

blur(16px)

alpha 0.12

blur(24px)

alpha 0.18

Navigation

Aurora Studio

Data & Charts

Studio Metrics

Active Scenes

+4 this week

Render Time

1.2s

-0.3s avg

Export Count

847

+62 today

Collaborators

3 online now

Scene	Renders	Shared
Aurora Horizon Gradient	214	Public
Deep Nebula Mesh	183	Private
Glass Bloom Glass	97	Public

Scene

Renders

Shared

Aurora Horizon

Gradient

214

Public

Deep Nebula

Mesh

183

Private

Glass Bloom

Glass

Public

Renders / Month

847

↑ +8% vs last year

2024

Layout Patterns

Publish

Glassmorphic three-column studio layout with gradient orb background

Prompt Preview

Copy a prompt that recreates the Aurora Glass theme

Use this prompt to ask AI for a polished interface that matches this showcase across color, typography, spacing, shape, and overall art direction.

Copy-ready AI prompt

Starts from the current visual reference and project constraints.

Build a polished Next.js showcase page or design system slice that matches the Aurora Glass theme.
Creative direction: Deep purple-black gradient canvas with animated aurora orbs, frosted glass surfaces, and neon accents — a creative design language that makes interfaces feel alive.
Style label: Aurora Glass.
Mood keywords: dark, creative, vibrant, immersive.

Project constraints:
- Use Next.js 16.2.6 with the App Router, React 19, TypeScript strict mode, and Tailwind CSS v4.
- Do not create a tailwind.config.js file. Use Tailwind v4 utilities and CSS variables where design tokens are needed.
- If you are implementing this inside the same project, use the Prompt font via next/font/google. If not, use the closest equivalent typeface.
- Return production-ready code with imports, responsive behavior, keyboard accessibility, and polished empty, hover, focus, active, and disabled states where relevant.
- Match the reference closely: color palette, spacing scale, border radius, shadows, icon scale, typography hierarchy, and motion timing.

Design principles to preserve:
- Glassmorphism depth
- Animated gradients
- Neon glow

Theme-specific art direction:
- Typography direction: contemporary sans styling that can sit over luminous backgrounds without losing clarity.
- Shape language: frosted glass, soft radii, glowing accents, and layered depth.
- Overall feel: immersive, creative, and slightly futuristic.

Color and surface tokens:
- background: #060510
- surface: rgba(255,255,255,0.06)
- primary: #818CF8
- secondary: #34D399
- text: #F0F4FF
- textMuted: #8B95BD
- border: rgba(255,255,255,0.10)

What the result should include:
- Include a cohesive set of themed UI building blocks: buttons, cards, forms, navigation, data/stat surfaces, and at least one layout composition.
- Use the provided tokens as the source of truth for color, borders, text hierarchy, and surface contrast.
- Keep the result responsive and visually complete enough to feel like a polished showcase page or mini design system.

Output requirements:
- Return a complete implementation, not a wireframe.
- Make the page feel cohesive from hero through component examples.
- Match color, size, shape, typography, gradients, border treatment, and spacing as closely as possible.
- Keep the implementation responsive, accessible, and production-ready.
- If a closest-equivalent font is needed outside this project, state it explicitly and keep the visual feel aligned with the reference.

Generate the full theme first, then trim sections you do not need.

Create the unexpected.

Immersive glass layers, aurora gradients, and vibrant motion — crafted for creative studios.

View All Themes Components