# Y2K / Frutiger Aero

Also called: Y2K web, Frutiger Aero, aero glass, Windows Vista style, 2000s futurism, bubble UI  
Era: 1998-2004 (Y2K) and 2004-2013 (Frutiger Aero); nostalgia revival 2022 onward  
Page: https://designforai.dev/style/y2k-frutiger-aero

## Traits

- glossy gradients: sky blue, aqua, lime green, white highlights that look wet
- pill buttons with a specular highlight on the top half
- nature-meets-tech imagery: water droplets, bubbles, grass, fish, clouds, chrome
- translucent panels with rounded corners and 1px white inner glow
- humanist sans (Frutiger or Segoe lineage), often with a slight blue tint
- lens flares, orbs, reflections under objects
- cheerful optimism; everything is clean, bright and slightly plastic

Palette: #cbe8ff sky, #1a8cff aero blue, #6fdc3c lime, #ffffff highlight, #0a3d7a text, #f0f8ff panel

Type: Frutiger is commercial; free stand-ins: Nunito Sans, Hind, Selawik (MIT, Segoe-alike) or Ubuntu; headings 600 at 32-44px, body 400 at 16px; blue-grey text on white panels

## Do

- build every button as a two-stop gradient plus a top-half white overlay at 40% for gloss
- use a sky-to-white vertical gradient background and float translucent panels on it
- include one nature element (bubbles or water) as a decorative image or CSS shape

## Don't

- do not use dark mode; the look is daylight only
- do not flatten the gradients; gloss is the whole point
- do not mix with brutalist type; keep the humanist sans

Known for it: Windows Vista and 7, Wii menu, iPhone iOS 1-6, Nintendo DS era marketing

## CSS seed

```css
:root{--bg:linear-gradient(#cbe8ff,#ffffff); --fg:#0a3d7a; --accent:#1a8cff; --accent2:#6fdc3c; --panel:rgba(240,248,255,0.75); --radius:18px; --shadow:0 6px 18px rgba(26,140,255,0.25); --font:'Nunito Sans',sans-serif}
```

## Prompt

Build the site in Y2K Frutiger Aero style. Background a vertical gradient from #cbe8ff to #ffffff with three floating translucent bubbles (radial-gradient circles, white 60% to transparent, 1px white border). Panels: background rgba(240,248,255,0.75), 1px solid rgba(255,255,255,0.9), inset 0 1px 0 #ffffff, border-radius 18px, box-shadow 0 6px 18px rgba(26,140,255,0.25). Buttons are pills (radius 999px) with a gradient from #4fa8ff to #0f6fd6, a top-half gloss overlay (linear-gradient rgba(255,255,255,0.55) to transparent covering 50%), 1px border #0b5cb8, white text with a subtle dark text-shadow. Secondary accent #6fdc3c in the same glossy recipe. Font Nunito Sans: headings 600 at 40px in #0a3d7a, body 400 at 16px in #1f4d80. Add a lens-flare highlight in the hero corner and a soft reflection under the hero image (scaleY(-1) with a fade mask). Hover brightens buttons 8% over 150ms.