Design for AI

Y2K / Frutiger Aero: UI design prompt

Palette, type rules and a pasteable prompt for y2k / frutiger aero. Also called Y2K web, Frutiger Aero, aero glass, Windows Vista style, 2000s futurism, bubble UI. 1998-2004 (Y2K) and 2004-2013 (Frutiger Aero); nostalgia revival 2022 onward.

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
: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.
For design.md, .cursorrules or AGENTS.md
## Design direction
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.

## Tokens
: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 }

Keep hover and focus-visible states on every interactive element. Do not add a CSS framework.