Vendor design language

Windows Aero

Microsoft's official name for the Windows Vista/7 desktop experience (2006), often expanded as 'Authentic, Energetic, Reflective, Open'; the glass is rendered by the Desktop Window Manager.

Defining Signals

Transparent blurred window frames — title bars and window borders are real translucent glass; wallpaper blurs through them while content stays opaque
Specular sweeps and reflections — diagonal light streaks cross the glass and controls as if polished; reflection is part of the material
Glowing hot controls — controls light up under the cursor: close button floods red, min/max glow blue, buttons gain a luminous halo
Luminous depth gradients — blues and greens that glow as if backlit; shimmering green progress bars and pearlescent button fills

Overview

What makes this style what it is.

Windows Aero is Microsoft's Vista and Windows 7 desktop language: window frames rendered as transparent blurred glass with specular light sweeps, so the desktop glows through every title bar; luminous color gradients; caption buttons that light up under the cursor (the red close glow); shimmering green progress bars; and smooth window motion like Flip 3D and the minimize animation.

Style brief — paste into your agent

Build the UI using Windows Aero (Microsoft's Vista/7 desktop language). Window frames are transparent blurred glass — title bars and window borders are real translucent glass; wallpaper blurs through them while content stays opaque. Specular sweeps and reflections — diagonal light streaks cross the glass and controls as if polished; reflection is part of the material. Glowing hot controls — controls light up under the cursor: close button floods red, min/max glow blue, buttons gain a luminous halo. Luminous depth gradients — blues and greens that glow as if backlit; shimmering green progress bars and pearlescent button fills.

CSS starting points:
- Glass window frame: background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 8px 8px 0 0; box-shadow: 0 0 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5);
- Specular sweep: background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, transparent 50%, rgba(255,255,255,0.2) 100%);
- Glowing close button: background: radial-gradient(circle, #ff4444 0%, #cc0000 100%); box-shadow: 0 0 12px rgba(255, 0, 0, 0.6);
- Luminous progress bar: background: linear-gradient(90deg, #00cc66 0%, #33ff99 50%, #00cc66 100%); box-shadow: 0 0 10px rgba(0, 204, 102, 0.5);
- Title bar gradient: background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 100%);

Do not drift into Frutiger Aero: Windows Aero is the OS chrome itself — glass window frames, glowing caption buttons, luminous progress bars. Frutiger Aero is the whole era's optimistic eco-tech mood — glossy nature wallpapers, water droplets, skies — which surrounded the chrome but isn't the chrome. Do not drift into Glassmorphism: Windows Aero glass is architectural — the window's frame and title bar — with specular sweeps and glowing controls in one vendor's system. Glassmorphism is frosted panels over any backdrop. Preserve 4.5:1 text contrast on glass frames, provide visible focus rings, and ensure the specular sweeps don't interfere with content legibility.

Origin

Shipped with Windows Vista in 2006 (premium editions) as the flagship of the Desktop Window Manager's new composited rendering, refined and default in Windows 7 (2009); Windows 8 (2012) removed the glass for flat Metro chrome.

Often Confused With

This is Windows Aero because it's the OS chrome itself — glass window frames, glowing caption buttons, luminous progress bars, shipped by Microsoft. It would become Frutiger Aero if you meant the whole era's optimistic eco-tech mood — glossy nature wallpapers, water droplets, skies — which surrounded the chrome but isn't the chrome. Vs Glassmorphism: the glass is architectural — the window's frame and title bar — with specular sweeps and glowing controls in one vendor's system.

Related Styles

Explore connected design movements.

Industry-coined trend

Glassmorphism

Retrospective label

Frutiger Aero

Vendor design language

Aqua

Defining Signals

Transparent blurred window frames — title bars and window borders are real translucent glass; wallpaper blurs through them while content stays opaque

Specular sweeps and reflections — diagonal light streaks cross the glass and controls as if polished; reflection is part of the material

Glowing hot controls — controls light up under the cursor: close button floods red, min/max glow blue, buttons gain a luminous halo

Luminous depth gradients — blues and greens that glow as if backlit; shimmering green progress bars and pearlescent button fills

Build the UI using Windows Aero (Microsoft's Vista/7 desktop language). Window frames are transparent blurred glass — title bars and window borders are real translucent glass; wallpaper blurs through them while content stays opaque. Specular sweeps and reflections — diagonal light streaks cross the glass and controls as if polished; reflection is part of the material. Glowing hot controls — controls light up under the cursor: close button floods red, min/max glow blue, buttons gain a luminous halo. Luminous depth gradients — blues and greens that glow as if backlit; shimmering green progress bars and pearlescent button fills. CSS starting points: - Glass window frame: background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 8px 8px 0 0; box-shadow: 0 0 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5); - Specular sweep: background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, transparent 50%, rgba(255,255,255,0.2) 100%); - Glowing close button: background: radial-gradient(circle, #ff4444 0%, #cc0000 100%); box-shadow: 0 0 12px rgba(255, 0, 0, 0.6); - Luminous progress bar: background: linear-gradient(90deg, #00cc66 0%, #33ff99 50%, #00cc66 100%); box-shadow: 0 0 10px rgba(0, 204, 102, 0.5); - Title bar gradient: background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 100%); Do not drift into Frutiger Aero: Windows Aero is the OS chrome itself — glass window frames, glowing caption buttons, luminous progress bars. Frutiger Aero is the whole era's optimistic eco-tech mood — glossy nature wallpapers, water droplets, skies — which surrounded the chrome but isn't the chrome. Do not drift into Glassmorphism: Windows Aero glass is architectural — the window's frame and title bar — with specular sweeps and glowing controls in one vendor's system. Glassmorphism is frosted panels over any backdrop. Preserve 4.5:1 text contrast on glass frames, provide visible focus rings, and ensure the specular sweeps don't interfere with content legibility.

Often Confused With