← Back
Best viewed on a desktop. Please switch to a larger device.

Aurora
Gradient
Mesh

Soft radial colour blobs, always blurred, layered over deep dark backgrounds. Glassmorphic panels float above the aurora like objects suspended in light. Beauty through depth, not decoration.

∞
Blur radius
3–5
Blobs per scene
0.04
Glass opacity
// Mesh Layer 01
Indigo + Cyan aurora
radial-gradient · filter:blur(60px) · opacity:.4
// Mesh Layer 02
Rose + Amber warm blend
Complementary warm palette variant
// Mesh Layer 03
Violet + Emerald contrast
High-tension complementary pair
Anatomy

Gradient Blob Anatomy

Three techniques for constructing aurora backgrounds. Always blur, always layer, always dark base.

Radial Blob Method
div · border-radius:50%
filter:blur(60–80px)
opacity: .35–.55
CSS Radial Gradient Method
radial-gradient(ellipse …)
Multiple layers in background
No extra DOM elements
Glass on Aurora
backdrop-filter:blur(20px)
Glass Panel on Aurora
backdrop-filter:blur(20px)
background:rgba(255,255,255,.04)
border:1px solid rgba(255,255,255,.1)
Colour

Aurora Colour System

Six chromatic blobs - always used as blurred radials, never as flat fills. The dark void (#06060F) is the required base.

Indigo
#6366F1
Primary blob
Violet
#8B5CF6
Secondary blob
Cyan
#06B6D4
Cool accent blob
Rose
#F43F5E
Warm accent blob
Emerald
#10B981
Success, status
Amber
#F59E0B
Warning blob
Type

Type System

Display Aurora 56px · Inter 700
Gradient fill text
H1 Gradient Mesh Systems 36px · Inter 700
H2 / Card Title Glass Panel Header 22px · Inter 600
Mono Label BLOB_LAYER :: OPACITY 0.45 :: BLUR 60PX 12px · JetBrains Mono
Body Body copy in Inter Light against the dark aurora background. The low font weight reduces visual density and lets the luminous backdrop remain the dominant visual element of the composition. 15px · Inter 300
1.8 line-height
Components

UI Components

// Buttons

// Input Fields

// Pills & Toggles

Design UI Mesh Active Beta
Progress
Upload 72%
Render 55%
Deploy 88%
Cards

Card Patterns

🌌
Product · Featured
Aurora Design System

Blurred colour blobs over void backgrounds create depth and atmosphere without visual clutter.

NEW →
🔥
Motion · Guide
Animated Meshes

Slow CSS animation of blob position creates living, breathing backgrounds that never distract.

GUIDE →
✦
Reference · CSS
Glass on Mesh

Glassmorphic cards floating on aurora backgrounds - the signature Aurora UI composition.

REF →
Layout

Full App Layout

Live
◈ Dashboard
✦ Projects
🌌 Aurora
⚠ Alerts
⚙ Settings

Dashboard

4,821
Users
↑ 12%
$48k
Revenue
↑ 8%
99.9%
Uptime
Nominal
1.4ms
Latency
↓ Fast

// Activity · 7d

Principles

Core Principles

01 · VOID

Dark Base Is Non-Negotiable

The aurora only glows against near-black backgrounds (#06060F–#0A0A1A). On white or mid-grey surfaces, blurred colour blobs become muddy rather than luminous. The void is part of the aesthetic.

02 · BLUR

Always Blur, Never Crisp

Colour blobs are radial shapes with filter:blur(40–80px). A sharp edge would destroy the atmospheric quality. The blur radius determines how diffuse and gentle the aurora feels - more is usually better.

03 · GLASS

Float Glass Above the Aurora

UI panels use backdrop-filter:blur(20px) with rgba(255,255,255,.04) backgrounds and 1px rgba(255,255,255,.1) borders. They appear to float above the light, capturing and refracting it.

04 · GRADIENT

Gradients Over Flat Colour

Buttons, borders, and progress bars use linear-gradient fills that echo the underlying blob colours. Flat fills look dead against an aurora background - always pull colour from the mesh palette.