Windows Vista’s glass aesthetic reborn — sky-blue gradients, frosted panels, aurora orbs, and glossy top-half reflections from the early 2010s.
A design language blending organic nature with translucent digital surfaces. Every element breathes clean air and refracts soft light.
Scroll
Components
Every component demonstrates core Aero techniques: glossy overlays, aurora orbs, and jelly bounce physics.
Glossy top-half
from-white/60 to-white/10 h-1/2 rounded-t-full — brightens on hover
Luminous glow
0_8px_20px rgba(2,132,199,0.6) + 0_0_30px rgba(125,211,252,0.3)
Jelly bounce
active:scale-95 — squish on press, never scale-[0.98]
Focus ring
ring-sky-300 + ring-offset-sky-500 for sky-background accessibility
Principles
What defines Aero’s visual DNA and separates it from every other glass aesthetic.
Semi-transparent white panels layered over sky gradients create depth without darkness.
Blur-3xl rounded orbs in green and sky-blue expand on hover to simulate an ethereal glow.
An absolute h-1/2 gradient overlay on every button and card simulates light on glass.
active:scale-95 gives every button a satisfying 5% squish that bounces back on release.
Organic shapes, bubbles, and leaves blend digital UI with the natural world.
Faithful to the Windows Vista DWM compositor era — the original desktop glass experience.
Vista
Era Inspiration
Windows Vista DWM compositor, 2006–2009
blur-xl
Minimum Glass Blur
backdrop-blur-xl — authentic frosted panel minimum
scale-150
Aurora Hover Scale
group-hover:scale-150 brings orbs alive on interaction
Transparency
Four levels of frosted glass — from barely-there to near-opaque. Each serves a distinct hierarchy role.
Subtle
bg-white/20 backdrop-blur-sm
Barely-there frosting, for layered depth
Standard
bg-white/35 backdrop-blur-md
Default panel glass — most UI surfaces
Deep
bg-white/55 backdrop-blur-xl
Hero cards and modal overlays
Opaque
bg-white/75 backdrop-blur-2xl
Navigation bars and prominent callouts
Glass Surface Properties
Backdrop Blur
backdrop-blur-xl
Blurs content beneath the panel
White Tint
bg-white/30–70
Controls opacity of the frosted overlay
Glass Border
border border-white/40
Subtle white edge catches ambient light
Button Variants
Palette
Sky gradients, glass tints, and aurora accents — the full Aero palette story.
Sky Light
#87CEEB
PrimarySky Deep
#5FB3CC
SecondaryGlass White
rgba(255,255,255,0.40)
Glass BaseIce Blue
#E0F2FE
TintAurora Green
#34D399
Nature AccentAqua Glow
#7DD3FC
Water AccentSky Gradient
#0EA5E9
Gradient EndWhite Pearl
#F0F9FF
HighlightSignature Gradients
from-sky-300 via-sky-400 to-sky-500 — the Aero sky
sky → emerald (nature aurora)
glass tint (panel base)
depth range (button fill)
Philosophy
The Aero aesthetic is built on a strict visual grammar — know what to reach for and what to avoid.
Glass surfaces — bg-white/30 to /50 with backdrop-blur-xl
Aurora orbs — absolute blur-3xl, group-hover:scale-150
Glossy top-half — h-1/2 gradient from-white/60 on every card/button
Sky blue gradients — from-sky-300 via-sky-400 to-sky-500
Organic shapes — rounded-2xl / rounded-3xl / rounded-full
Nature accents — emerald-300/400 for green aurora touches
Jelly bounce — active:scale-95, not scale-[0.98]
Focus ring offset — always pair ring with ring-offset-sky-500
Dark backgrounds — Aero is always sky-lit and bright
Sharp corners — rounded-none or rounded-sm break the organic feel
Monospace fonts — clean sans-serif only, no code-style type
Neon or harsh colors — no hot pink, no saturated reds
Flat matte surfaces — every panel must carry a glass effect
active:scale-[0.98] — too subtle; use active:scale-95 for jelly
focus:ring without ring-offset-sky-500 — ring becomes invisible
Angular or geometric rigidity — Aero breathes and curves
“Frutiger Aero is what happened when designers believed the digital world could feel like morning air — clean, light-filled, and alive with nature.”
Windows Vista Aero, 2006 — the glass that defined an era