Design for AI

Estilo Vidro + granulado: prompt de design de UI

Paleta, regras de tipografia e um prompt pronto para colar de vidro + granulado. Também chamado de vidro granulado, UI de grão fosco, UI de gradiente com ruído, web com grão de filme, vidro texturizado. 2022 em diante (correção ao glassmorphism limpo; era do Fontshare, Fey, Family wallet).

Traços

  • painéis de vidro como no glassmorphism, mas com uma textura de grão de filme por cima de tudo
  • gradientes granulados em vez de lisos; o ruído é o acabamento, não um bug
  • paletas mais escuras e sombrias que o vidro de 2020: carvão, verde profundo, azul tinta com uma luz quente
  • bordas finas de 1px em alpha baixo, sombras suaves e largas
  • tipografia com mais personalidade: uma grotesca com excentricidades ou um acento em serifa itálica
  • movimento contido; o grão faz o trabalho visual
  • muitas vezes monocromático mais uma cor de brilho

Paleta

#0e0f12 página, #16181d painel, rgba(255,255,255,0.1) aresta, #e8e6df texto, #9a9890 atenuado, #f2b880 brilho quente

Tipografia

Instrument Sans ou Geist para UI, Instrument Serif itálico para acentos, JetBrains Mono para labels pequenos; títulos 500 a 40-64px com -0.02em, corpo 400 a 16px

Faça

  • gere o grão uma vez como filtro SVG feTurbulence (baseFrequency 0.65-0.9, numOctaves 3) e aplique-o como overlay fixo de página inteira a 6-10% de opacidade
  • coloque o grão acima do vidro mas abaixo do texto, usando pointer-events none e mix-blend-mode overlay
  • mantenha a paleta em cinzas mais um brilho quente para o grão ler como material, não como ruído

Evite

  • não use um tile PNG de ruído maior que 200x200; custa bytes e repete visivelmente
  • não empilhe grão sobre fotos movimentadas; vira lama
  • não deixe o alpha do grão passar de 12%; o texto fica embaçado

Conhecido por: Fey, Family wallet, Fontshare, app Reflect, Cosmos

Semente CSS
: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

Construa o site em estilo vidro granulado. Página #0e0f12 com um brilho radial quente no canto superior direito (rgba(242,184,128,0.25), 60vw, blur(120px)). Adicione um overlay fixo de página inteira: um SVG inline com feTurbulence (fractalNoise, baseFrequency 0.8, numOctaves 3) como background, opacity 0.08, mix-blend-mode overlay, pointer-events none, z-index acima dos painéis mas abaixo do texto via uma camada de empilhamento separada. Painéis: background rgba(22,24,29,0.7), backdrop-filter blur(18px), borda 1px rgba(255,255,255,0.1), border-radius 14px, box-shadow 0 20px 60px rgba(0,0,0,0.45). Texto #e8e6df, atenuado #9a9890, acento de brilho #f2b880 para links e o botão primário (que usa preenchimento #f2b880 com texto #0e0f12). Fontes: Instrument Sans 500 para títulos a 56/36/24px com -0.02em, Instrument Serif itálico para uma palavra de acento por título no mesmo tamanho, corpo 400 a 16px, JetBrains Mono 12px em caixa alta para labels. Movimento: 250ms ease no hover; o brilho respira ao longo de 8s (opacity de 0.2 a 0.3).
Para design.md, .cursorrules ou AGENTS.md
## Direção de design
Construa o site em estilo vidro granulado. Página #0e0f12 com um brilho radial quente no canto superior direito (rgba(242,184,128,0.25), 60vw, blur(120px)). Adicione um overlay fixo de página inteira: um SVG inline com feTurbulence (fractalNoise, baseFrequency 0.8, numOctaves 3) como background, opacity 0.08, mix-blend-mode overlay, pointer-events none, z-index acima dos painéis mas abaixo do texto via uma camada de empilhamento separada. Painéis: background rgba(22,24,29,0.7), backdrop-filter blur(18px), borda 1px rgba(255,255,255,0.1), border-radius 14px, box-shadow 0 20px 60px rgba(0,0,0,0.45). Texto #e8e6df, atenuado #9a9890, acento de brilho #f2b880 para links e o botão primário (que usa preenchimento #f2b880 com texto #0e0f12). Fontes: Instrument Sans 500 para títulos a 56/36/24px com -0.02em, Instrument Serif itálico para uma palavra de acento por título no mesmo tamanho, corpo 400 a 16px, JetBrains Mono 12px em caixa alta para labels. Movimento: 250ms ease no hover; o brilho respira ao longo de 8s (opacity de 0.2 a 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 }

Mantenha estados de hover e focus-visible em todo elemento interativo. Não adicione um framework CSS.