Design for AI

Stil Y2K / Frutiger Aero: UI-Design-Prompt

Palette, Schriftregeln und ein einfügbarer Prompt für y2k / frutiger aero. Auch bekannt als Y2K-Web, Frutiger Aero, Aero Glass, Windows-Vista-Stil, 2000er-Futurismus, Bubble-UI. 1998-2004 (Y2K) und 2004-2013 (Frutiger Aero); Nostalgie-Revival ab 2022.

Merkmale

  • glänzende Verläufe: Himmelblau, Aqua, Limettengrün, weiße Glanzlichter, die nass aussehen
  • Pillen-Buttons mit Glanzlicht auf der oberen Hälfte
  • Natur-trifft-Technik-Bildwelt: Wassertropfen, Blasen, Gras, Fische, Wolken, Chrom
  • transluzente Flächen mit runden Ecken und 1px weißem Innenglow
  • humanistische Sans (Frutiger- oder Segoe-Linie), oft mit leichtem Blaustich
  • Lens Flares, Kugeln, Spiegelungen unter Objekten
  • fröhlicher Optimismus; alles ist sauber, hell und leicht plastikhaft

Palette

#cbe8ff Himmel, #1a8cff Aero-Blau, #6fdc3c Limette, #ffffff Glanzlicht, #0a3d7a Text, #f0f8ff Fläche

Schrift

Frutiger ist kommerziell; freier Ersatz: Nunito Sans, Hind, Selawik (MIT, Segoe-Ersatz) oder Ubuntu; Überschriften 600 bei 32-44px, Fließtext 400 bei 16px; blaugrauer Text auf weißen Flächen

Do

  • baue jeden Button als Zwei-Stufen-Verlauf plus ein weißes Overlay auf der oberen Hälfte bei 40 % für den Glanz
  • nutze einen vertikalen Verlauf von Himmel zu Weiß als Hintergrund und lass transluzente Flächen darauf schweben
  • bring ein Naturelement (Blasen oder Wasser) als dekoratives Bild oder CSS-Form unter

Don't

  • nutze keinen Dark Mode; der Look ist nur Tageslicht
  • flache die Verläufe nicht ab; der Glanz ist der ganze Punkt
  • misch nicht mit brutalistischer Schrift; bleib bei der humanistischen Sans

Bekannt dafür: Windows Vista und 7, Wii-Menü, iPhone iOS 1-6, Marketing der Nintendo-DS-Ära

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

Baue die Seite im Y2K-Frutiger-Aero-Stil. Hintergrund ein vertikaler Verlauf von #cbe8ff nach #ffffff mit drei schwebenden transluzenten Blasen (radial-gradient-Kreise, Weiß 60 % nach transparent, 1px weißer Rand). Flächen: 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 sind Pillen (Radius 999px) mit einem Verlauf von #4fa8ff nach #0f6fd6, einem Glanz-Overlay auf der oberen Hälfte (linear-gradient rgba(255,255,255,0.55) nach transparent über 50 %), 1px Rand #0b5cb8, weißer Text mit dezentem dunklem text-shadow. Sekundärakzent #6fdc3c im selben Glanzrezept. Schrift Nunito Sans: Überschriften 600 bei 40px in #0a3d7a, Fließtext 400 bei 16px in #1f4d80. Ergänze ein Lens-Flare-Glanzlicht in der Hero-Ecke und eine weiche Spiegelung unter dem Hero-Bild (scaleY(-1) mit Fade-Maske). Hover hellt Buttons über 150ms um 8 % auf.
Für design.md, .cursorrules oder AGENTS.md
## Designrichtung
Baue die Seite im Y2K-Frutiger-Aero-Stil. Hintergrund ein vertikaler Verlauf von #cbe8ff nach #ffffff mit drei schwebenden transluzenten Blasen (radial-gradient-Kreise, Weiß 60 % nach transparent, 1px weißer Rand). Flächen: 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 sind Pillen (Radius 999px) mit einem Verlauf von #4fa8ff nach #0f6fd6, einem Glanz-Overlay auf der oberen Hälfte (linear-gradient rgba(255,255,255,0.55) nach transparent über 50 %), 1px Rand #0b5cb8, weißer Text mit dezentem dunklem text-shadow. Sekundärakzent #6fdc3c im selben Glanzrezept. Schrift Nunito Sans: Überschriften 600 bei 40px in #0a3d7a, Fließtext 400 bei 16px in #1f4d80. Ergänze ein Lens-Flare-Glanzlicht in der Hero-Ecke und eine weiche Spiegelung unter dem Hero-Bild (scaleY(-1) mit Fade-Maske). Hover hellt Buttons über 150ms um 8 % auf.

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

Hover- und focus-visible-Zustände auf jedem interaktiven Element beibehalten. Kein CSS-Framework hinzufügen.