Design for AI

Stil Glas + Körnung: UI-Design-Prompt

Palette, Schriftregeln und ein einfügbarer Prompt für glas + körnung. Auch bekannt als Grainy Glass, gefrostetes Körnungs-UI, Noise-Gradient-UI, Filmkorn-Web, texturiertes Glas. ab 2022 (Korrektur des sauberen Glassmorphism; Ära von Fontshare, Fey, Family Wallet).

Merkmale

  • Glasflächen wie beim Glassmorphism, aber mit einer Filmkorn-Textur über allem
  • Verläufe sind körnig statt glatt; das Rauschen ist das Finish, kein Fehler
  • dunklere, stimmungsvollere Paletten als das Glas von 2020: Anthrazit, Tiefgrün, Tintenblau mit einem warmen Licht
  • dünne 1px-Ränder bei niedrigem Alpha, weiche breite Schatten
  • Typografie mit mehr Charakter: eine Grotesk mit Eigenheiten oder ein kursiver Serif-Akzent
  • zurückhaltende Motion; die Körnung macht die visuelle Arbeit
  • oft monochrom plus eine Glow-Farbe

Palette

#0e0f12 Seite, #16181d Panel, rgba(255,255,255,0.1) Kante, #e8e6df Text, #9a9890 gedämpft, #f2b880 warmer Glow

Schrift

Instrument Sans oder Geist für UI, Instrument Serif kursiv für Akzente, JetBrains Mono für kleine Labels; Überschriften 500 bei 40-64px mit -0.02em, Fließtext 400 bei 16px

Do

  • erzeuge die Körnung einmal als SVG-feTurbulence-Filter (baseFrequency 0.65-0.9, numOctaves 3) und lege sie als fixes Ganzseiten-Overlay bei 6-10 % Opacity darüber
  • schichte die Körnung über das Glas, aber unter den Text, mit pointer-events none und mix-blend-mode overlay
  • halte die Palette bei Grautönen plus einem warmen Glow, damit die Körnung als Material lesbar ist, nicht als Rauschen

Don't

  • nutze keine PNG-Rauschkachel größer als 200x200; sie kostet Bytes und wiederholt sich sichtbar
  • stapele Körnung nicht auf unruhige Fotos; das wird Matsch
  • lass das Körnungs-Alpha nicht über 12 % steigen; Text wird unscharf

Bekannt dafür: Fey, Family Wallet, Fontshare, Reflect-App, Cosmos

CSS-Seed
:root {
  --bg: #0e0f12;
   --panel: rgba(22,24,29,0.7);
   --edge: rgba(255,255,255,0.1);
   --fg: #e8e6df;
   --muted: #9a9890;
   --glow: #f2b880;
   --radius: 14px;
   --grain: 0.08;
   --font: 'Instrument Sans',sans-serif
}
Prompt

Baue die Seite im Grainy-Glass-Stil. Seite #0e0f12 mit einem warmen radialen Glow oben rechts (rgba(242,184,128,0.25), 60vw, blur(120px)). Ergänze ein fixes Ganzseiten-Overlay: ein Inline-SVG mit feTurbulence (fractalNoise, baseFrequency 0.8, numOctaves 3) als Hintergrund, opacity 0.08, mix-blend-mode overlay, pointer-events none, z-index über Panels, aber unter Text über eine separate Stacking-Ebene. Panels: background rgba(22,24,29,0.7), backdrop-filter blur(18px), 1px Rand rgba(255,255,255,0.1), border-radius 14px, box-shadow 0 20px 60px rgba(0,0,0,0.45). Text #e8e6df, gedämpft #9a9890, Glow-Akzent #f2b880 für Links und den Primärbutton (der #f2b880 Füllung mit #0e0f12 Text nutzt). Schriften: Instrument Sans 500 für Überschriften bei 56/36/24px mit -0.02em, Instrument Serif kursiv für ein Akzentwort pro Überschrift in derselben Größe, Fließtext 400 bei 16px, JetBrains Mono 12px Versalien für Labels. Motion: 250ms ease bei Hover; der Glow atmet über 8s (opacity 0.2 bis 0.3).
Für design.md, .cursorrules oder AGENTS.md
## Designrichtung
Baue die Seite im Grainy-Glass-Stil. Seite #0e0f12 mit einem warmen radialen Glow oben rechts (rgba(242,184,128,0.25), 60vw, blur(120px)). Ergänze ein fixes Ganzseiten-Overlay: ein Inline-SVG mit feTurbulence (fractalNoise, baseFrequency 0.8, numOctaves 3) als Hintergrund, opacity 0.08, mix-blend-mode overlay, pointer-events none, z-index über Panels, aber unter Text über eine separate Stacking-Ebene. Panels: background rgba(22,24,29,0.7), backdrop-filter blur(18px), 1px Rand rgba(255,255,255,0.1), border-radius 14px, box-shadow 0 20px 60px rgba(0,0,0,0.45). Text #e8e6df, gedämpft #9a9890, Glow-Akzent #f2b880 für Links und den Primärbutton (der #f2b880 Füllung mit #0e0f12 Text nutzt). Schriften: Instrument Sans 500 für Überschriften bei 56/36/24px mit -0.02em, Instrument Serif kursiv für ein Akzentwort pro Überschrift in derselben Größe, Fließtext 400 bei 16px, JetBrains Mono 12px Versalien für Labels. Motion: 250ms ease bei Hover; der Glow atmet über 8s (opacity 0.2 bis 0.3).

## Tokens
:root { --bg:#0e0f12; --panel:rgba(22,24,29,0.7); --edge:rgba(255,255,255,0.1); --fg:#e8e6df; --muted:#9a9890; --glow:#f2b880; --radius:14px; --grain:0.08; --font:'Instrument Sans',sans-serif }

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