Design for AIStil Gradient Mesh / Aurora: UI-Design-Prompt
Palette, Schriftregeln und ein einfügbarer Prompt für gradient mesh / aurora. Auch bekannt als Mesh-Verlauf, Aurora-Hintergrund, Verlaufskleckse, Nordlicht-UI, Stripe-Verlauf. ab 2020 (Stripe-Hero 2020, macOS-Big-Sur-Wallpaper, Linear 2021).
Merkmale
- Hintergründe aus mehreren überlappenden radialen Verläufen, die wie eine Aurora ineinanderfließen
- 3-5 Farbtöne, meist kühl bis warm (Violett, Blau, Petrol, Pink, Pfirsich)
- langsame Animation der Kleckse: 15-30s Loops, dezente Skalierung und Drift
- Inhalt sitzt auf einem soliden oder leicht gefrosteten Panel davor
- Schrift ist neutral und modern, damit der Hintergrund die Stimmung trägt
- Rausch- oder Körnungs-Overlay gegen Banding in den Verläufen
- oft nur im Hero; der Rest der Seite ist schlicht
Palette
#0f0c29 dunkle Basis (oder #ffffff hell), #7f5af0 Violett, #2cb1bc Petrol, #ff8fab Pink, #ffd166 Pfirsich, #fffffe Text auf Dunkel
Schrift
Manrope, DM Sans, Plus Jakarta Sans oder Satoshi-Ersatz "General Sans" (frei über Fontshare); Überschriften 600-700 bei 48-72px mit -0.02em, Fließtext 400 bei 17px
Do
- baue das Mesh aus 4-5 absolut positionierten radial-gradient-Klecksen, je 40-60vw, blur(60-100px), mix-blend-mode screen auf Dunkel oder multiply auf Hell
- ergänze ein SVG-Rausch-Overlay bei 5-8 % Opacity gegen Banding
- halte das Mesh im Hero und einem Footer-Band; die Seitenmitte bleibt ruhig
Don't
- animiere Kleckse nicht schneller als 15s und skaliere sie nicht über 1.2x; das wird übel
- setze keinen kleinen Text direkt auf das Mesh ohne Panel oder Scrim
- nutze keine Regenbogen-Farbspreizung; wähle eine Familie aus 3-5 verwandten Tönen
Bekannt dafür: Stripe, Linear (Hero 2021), Apple-macOS-Big-Sur-Wallpaper, Framer-Marketing
CSS-Seed
:root {
--bg: #0f0c29;
--fg: #fffffe;
--accent: #7f5af0;
--accent2: #2cb1bc;
--accent3: #ff8fab;
--radius: 16px;
--grain: 0.06;
--font: 'Manrope',sans-serif
}
Prompt
Baue die Seite mit einem Aurora-Gradient-Mesh-Hero. Basis #0f0c29. Platziere hinter dem Hero fünf absolut positionierte Kreise (je 50vw, border-radius 50%, filter blur(90px), mix-blend-mode screen) in #7f5af0, #2cb1bc, #ff8fab, #ffd166 und #4f46e5, mit unterschiedlichen Versätzen überlappend, jeder in einem eigenen 20-28s ease-in-out infinite Loop driftend (translate bis 10 %, scale 0.9 bis 1.15). Lege eine SVG-feTurbulence-Rauschebene bei opacity 0.06 über den Hero. Text #fffffe, Sekundär rgba(255,255,254,0.7). Schrift Manrope: h1 700 bei 68px mit -0.025em, Subline 400 bei 20px, Fließtext 17px. Der Hero-Inhalt sitzt auf nichts, hat aber einen weichen dunklen Scrim (radial-gradient rgba(15,12,41,0.6)) hinter dem Text für Lesbarkeit. Primärbutton weiß mit #0f0c29 Text, Radius 12px; sekundär ist eine 1px rgba(255,255,255,0.3) Outline. Unter dem Hero ist die Seite flaches #0f0c29 mit 1px rgba(255,255,255,0.08) Linien und Karten mit Radius 16px. Unter prefers-reduced-motion die Kleckse einfrieren.
Für design.md, .cursorrules oder AGENTS.md
## Designrichtung
Baue die Seite mit einem Aurora-Gradient-Mesh-Hero. Basis #0f0c29. Platziere hinter dem Hero fünf absolut positionierte Kreise (je 50vw, border-radius 50%, filter blur(90px), mix-blend-mode screen) in #7f5af0, #2cb1bc, #ff8fab, #ffd166 und #4f46e5, mit unterschiedlichen Versätzen überlappend, jeder in einem eigenen 20-28s ease-in-out infinite Loop driftend (translate bis 10 %, scale 0.9 bis 1.15). Lege eine SVG-feTurbulence-Rauschebene bei opacity 0.06 über den Hero. Text #fffffe, Sekundär rgba(255,255,254,0.7). Schrift Manrope: h1 700 bei 68px mit -0.025em, Subline 400 bei 20px, Fließtext 17px. Der Hero-Inhalt sitzt auf nichts, hat aber einen weichen dunklen Scrim (radial-gradient rgba(15,12,41,0.6)) hinter dem Text für Lesbarkeit. Primärbutton weiß mit #0f0c29 Text, Radius 12px; sekundär ist eine 1px rgba(255,255,255,0.3) Outline. Unter dem Hero ist die Seite flaches #0f0c29 mit 1px rgba(255,255,255,0.08) Linien und Karten mit Radius 16px. Unter prefers-reduced-motion die Kleckse einfrieren.
## Tokens
:root { --bg:#0f0c29; --fg:#fffffe; --accent:#7f5af0; --accent2:#2cb1bc; --accent3:#ff8fab; --radius:16px; --grain:0.06; --font:'Manrope',sans-serif }
Hover- und focus-visible-Zustände auf jedem interaktiven Element beibehalten. Kein CSS-Framework hinzufügen.