Design Atlas
한국어
❖ Design styles

Frutiger aero

프루티거 에어로

Clear sky, water droplets, glossy glass buttons — a mid-2000s optimism that technology and nature could coexist. Windows Vista is its defining example.

Also known as: Aero designWeb 2.0 gloss
···
html
<div class="scene">
  <span class="bubble b1"></span><span class="bubble b2"></span><span class="bubble b3"></span>
  <button class="orb">
    <span class="gloss"></span>
    ▶
  </button>
</div>
css
body{background:linear-gradient(180deg,#8fd0ff 0%,#dff3ff 55%,#e9f9df 100%)}
.scene{position:relative;width:100%;height:100%;overflow:hidden}
.bubble{position:absolute;border-radius:50%;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.95),rgba(255,255,255,.15) 60%,rgba(255,255,255,.05));
  animation:rise 5s ease-in infinite}
.b1{width:24px;height:24px;left:16%;bottom:-10%;animation-delay:0s}
.b2{width:14px;height:14px;left:70%;bottom:-10%;animation-delay:1.4s}
.b3{width:18px;height:18px;left:46%;bottom:-10%;animation-delay:2.6s}
@keyframes rise{
  0%{transform:translateY(0);opacity:0}
  15%{opacity:1}
  100%{transform:translateY(-140px);opacity:0}
}
.orb{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:74px;height:74px;border-radius:50%;
  border:0;cursor:pointer;color:#0d5a7a;font-size:18px;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(circle at 35% 25%,#eaffff,#8fe0f0 55%,#4fb8d8 100%);
  box-shadow:0 10px 18px rgba(20,100,140,.35),inset 0 -4px 8px rgba(0,60,90,.25)}
.gloss{position:absolute;top:8%;left:16%;width:60%;height:38%;border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,0));
  transform:rotate(-12deg)}

Retroactively named for the blend of Windows Vista/7's Aero theme, early iOS's glossy icons, and the humanist Frutiger-family sans-serif used in airport and hospital signage (the "Frutiger Aero" label itself was coined by nostalgic internet communities in the late 2010s). It runs on the bright optimism that technology would deliver a clean, eco-friendly future.

Visually: blue sky, green fields and water-droplet nature imagery; rounded buttons with glass-like specular highlights; and translucent panels using the then-cutting-edge blur and transparency effects. Type leans on humanist rounded sans-serifs like Frutiger and Segoe UI.

It faded under 2010s flat design and is being rediscovered in the 2020s with a "those days were more innocent" sentiment. It sits near Y2K and vaporwave, but unlike their cynical irony, Frutiger aero is sincerely optimistic.