Hub

AURORA
GRADIENT

Place organically flowing gradients like auroras in the background, and layer content on glass panels to create visual depth. When requesting AI, combine keywords like "multi-color blur orbs", "organic movement", and "color bleeding on dark backgrounds" for reliable results.

Aurora Bands

Light Properties

Purple#7c4dff
Cyan#00e5ff
Pink#ff6090
Blur Radius 120px
Drift Range 60px
Pulse Scale 1.2×

Composition Guide

Background Layer

2-3 large blur orbs with organic drift animation create the aurora atmosphere on a dark canvas.

Content Layer

Glass panels with backdrop-filter blur and subtle borders separate content from the aurora background.

Text Layer

Gradient-clip text inherits aurora colors, creating visual unity between background and typography.

Aurora Gradient

AI Request Prompt

Design a landing page in Aurora Gradient style — organic luminous orbs flowing on a cosmic dark canvas.

COLOR TOKENS:
--bg: #0a0a1a
--text: #e8eaf6
--text-muted: rgba(232, 234, 246, 0.85)
--accent: #7c4dff (purple)
--accent-2: #00e5ff (cyan)
--accent-3: #ff6090 (pink)
--line: rgba(124, 77, 255, 0.2)
--hero-bg: rgba(10, 10, 26, 0.6)
--tile-bg: rgba(124, 77, 255, 0.06)
--prompt-bg: rgba(10, 10, 26, 0.8)
--pre-text: rgba(232, 234, 246, 0.9)
No other colors.

TYPOGRAPHY:
Heading: Plus Jakarta Sans 800, tracking -0.03em
Body: Noto Sans 400
Scale: 0.88rem / 1.05rem / clamp(2rem, 6vw, 4.8rem)
Heading line-height: 1.0
Body line-height: 1.8
Title text effect: linear-gradient(135deg, #7c4dff 0%, #00e5ff 40%, #ff6090 70%, #7c4dff 100%), background-size 200% 200%, background-clip text

UI:
- Hero panel: border-radius 28px, 1px solid var(--line), backdrop-filter blur(24px) saturate(130%), box-shadow 0 0 0 1px rgba(124,77,255,0.15) + 0 0 80px rgba(124,77,255,0.08) + 0 24px 65px rgba(0,0,0,0.4)
- Tiles: border-radius 16px, 1px solid var(--line), backdrop-filter blur(8px), tile-bg background
- Tile hover: border-color rgba(124,77,255,0.4), box-shadow 0 0 20px rgba(124,77,255,0.1)
- Prompt box: border-radius 20px, 1px solid var(--line), backdrop-filter blur(12px), prompt-bg
- Button: border-radius 999px, 1px solid var(--accent), color var(--accent), background rgba(124,77,255,0.08), padding 10px 18px
- Button hover: background rgba(124,77,255,0.2), box-shadow 0 0 16px rgba(124,77,255,0.3)

LAYOUT:
Container: width min(1120px, 92vw), margin 0 auto, padding 28px 0 80px
Hero: padding clamp(24px, 5vw, 52px), margin-top 20px
Tile grid: display grid, grid-template-columns repeat(auto-fit, minmax(200px, 1fr)), gap 12px, margin-top 28px
Tile: padding 16px
Lead paragraph: margin-top 20px, font-size 1.05rem, max-width 700px
Prompt section: margin-top 28px, padding 20px

MOTION:
Aurora orbs: 2 pseudo-elements (::before 600x400px, ::after 500x500px) + 1 mid-orb (450x350px)
Orb gradients: ::before linear-gradient(135deg, rgba(124,77,255,0.5), rgba(0,229,255,0.3)); ::after linear-gradient(225deg, rgba(255,96,144,0.4), rgba(124,77,255,0.3)); mid radial-gradient(ellipse, rgba(0,229,255,0.25), transparent 70%)
filter: blur(120px) on pseudo-elements, blur(100px) on mid-orb
@keyframes drift — 0% translate(0,0) scale(1), 100% translate(60px,30px) scale(1.15); 12s ease-in-out infinite alternate
::after: animation-delay -6s, animation-direction alternate-reverse
@keyframes pulse — 0% opacity 0.4 scale(1), 100% opacity 0.7 scale(1.2); 8s ease-in-out infinite alternate
@keyframes shimmer — 0%/100% background-position 0% 50%, 50% background-position 100% 50%; 6s ease-in-out infinite
@keyframes glide — from opacity 0 translateY(14px) to opacity 1 translateY(0); 0.7s ease both, stagger 0.08s per tile
Tile hover: border-color 0.3s, box-shadow 0.3s transition
Button hover: all 0.25s transition

RESPONSIVE:
- Mobile: hero padding scales down via clamp, tiles stack to single column (minmax 200px), orbs maintain but blur softens naturally on smaller viewports
- Desktop: max-width 1120px, auto-fit grid preserves multi-column tiles

FORBIDDEN:
- Solid flat backgrounds without layered blur orbs
- Borders thicker than 1px on content panels
- Warm colors (orange, yellow, amber) — stay in cool purple/cyan/pink range
- Sharp 0px border-radius on hero, tiles, or prompt box
- Static backgrounds — all orbs must continuously animate

OUTPUT:
1) Full color token list with orb gradient specs and glass panel values
2) Aurora background layer / Hero / Tile grid / Prompt section structure
3) Single-file HTML/CSS with drift, pulse, shimmer, and glide keyframes