Design for AI

Glass + noise grain: UI design prompt

Palette, type rules and a pasteable prompt for glass + noise grain. Also called grainy glass, frosted grain UI, noise gradient UI, film grain web, textured glass. 2022 onward (correction to clean glassmorphism; Fontshare, Fey, Family wallet era).

Traits

  • glass panels like glassmorphism but with a film-grain texture on top of everything
  • gradients that are grainy rather than smooth; noise is the finish, not a bug
  • darker, moodier palettes than 2020 glass: charcoal, deep green, ink blue with one warm light
  • thin 1px borders at low alpha, soft wide shadows
  • typography with more character: a grotesk with quirks or a serif italic accent
  • restrained motion; the grain does the visual work
  • often monochrome plus one glow colour

Palette

#0e0f12 page, #16181d panel, rgba(255,255,255,0.1) edge, #e8e6df text, #9a9890 muted, #f2b880 warm glow

Type

Instrument Sans or Geist for UI, Instrument Serif italic for accents, JetBrains Mono for small labels; headings 500 at 40-64px with -0.02em, body 400 at 16px

Do

  • generate grain once as an SVG feTurbulence filter (baseFrequency 0.65-0.9, numOctaves 3) and apply it as a fixed full-page overlay at 6-10% opacity
  • layer the grain above the glass but below text, using pointer-events none and mix-blend-mode overlay
  • keep the palette to greys plus one warm glow so the grain reads as material, not noise

Don't

  • do not use a PNG noise tile larger than 200x200; it costs bytes and repeats visibly
  • do not stack grain on busy photos; it turns to mud
  • do not let grain alpha exceed 12%; text gets fuzzy

Known for it: 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

Build the site in grainy glass style. Page #0e0f12 with one warm radial glow top-right (rgba(242,184,128,0.25), 60vw, blur(120px)). Add a fixed full-page overlay: an inline SVG with feTurbulence (fractalNoise, baseFrequency 0.8, numOctaves 3) as background, opacity 0.08, mix-blend-mode overlay, pointer-events none, z-index above panels but below text via a separate stacking layer. Panels: background rgba(22,24,29,0.7), backdrop-filter blur(18px), 1px border rgba(255,255,255,0.1), border-radius 14px, box-shadow 0 20px 60px rgba(0,0,0,0.45). Text #e8e6df, muted #9a9890, glow accent #f2b880 for links and the primary button (which uses #f2b880 fill with #0e0f12 text). Fonts: Instrument Sans 500 for headings at 56/36/24px with -0.02em, Instrument Serif italic for one accent word per heading at the same size, body 400 at 16px, JetBrains Mono 12px uppercase for labels. Motion: 250ms ease on hover; the glow breathes over 8s (opacity 0.2 to 0.3).
For design.md, .cursorrules or AGENTS.md
## Design direction
Build the site in grainy glass style. Page #0e0f12 with one warm radial glow top-right (rgba(242,184,128,0.25), 60vw, blur(120px)). Add a fixed full-page overlay: an inline SVG with feTurbulence (fractalNoise, baseFrequency 0.8, numOctaves 3) as background, opacity 0.08, mix-blend-mode overlay, pointer-events none, z-index above panels but below text via a separate stacking layer. Panels: background rgba(22,24,29,0.7), backdrop-filter blur(18px), 1px border rgba(255,255,255,0.1), border-radius 14px, box-shadow 0 20px 60px rgba(0,0,0,0.45). Text #e8e6df, muted #9a9890, glow accent #f2b880 for links and the primary button (which uses #f2b880 fill with #0e0f12 text). Fonts: Instrument Sans 500 for headings at 56/36/24px with -0.02em, Instrument Serif italic for one accent word per heading at the same size, body 400 at 16px, JetBrains Mono 12px uppercase for labels. Motion: 250ms ease on hover; the glow breathes over 8s (opacity 0.2 to 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 }

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