Design for AIEstilo Glassmorphism: prompt de design de UI
Paleta, regras de tipografia e um prompt pronto para colar de glassmorphism. Também chamado de UI de vidro fosco, cards de vidro, UI com backdrop blur, UI translúcida. 2020-2023 (Windows Vista Aero e iOS 7 como ancestrais; batizado por Michal Malewicz em 2020).
Traços
- painéis translúcidos (branco a 8-20% de alpha) sobre um fundo colorido e desfocado
- `backdrop-filter: blur(16-24px)` é o truque inteiro; nada funciona sobre um fundo chapado
- borda clara de 1px (branco a 25-40%) para simular a aresta do vidro
- sombras suaves e largas numa cor tingida, nunca preto puro
- raio de 16-24px, padding interno generoso
- o fundo carrega manchas de cor desfocadas para que o blur tenha o que borrar
- o texto continua nítido e com alto contraste por cima do vidro
Paleta
#0f172a base da página, #7c3aed e #06b6d4 manchas de fundo, rgba(255,255,255,0.12) preenchimento do vidro, rgba(255,255,255,0.35) aresta do vidro, #f8fafc texto
Tipografia
Manrope ou DM Sans para tudo; títulos 600, corpo 400 a 16px; evite pesos finos sobre vidro (somem contra o blur)
Faça
- coloque duas ou três formas grandes de cor desfocada atrás do layout para o blur ter profundidade a revelar
- limite os painéis de vidro a dois níveis no máximo: card e um overlay flutuante
- teste cada cor de texto contra a parte mais movimentada do fundo
Evite
- não empilhe vidro sobre vidro sobre vidro; vira lama
- não use vidro numa página branca ou preta chapada; não há nada para desfocar
- não esqueça um fallback sólido para navegadores sem backdrop-filter
Conhecido por: Apple macOS Big Sur, Microsoft Fluent Acrylic, dashboards da Stripe (parcial)
Semente CSS
:root {
--bg: #0f172a;
--fg: #f8fafc;
--accent: #7c3aed;
--glass: rgba(255,255,255,0.12);
--edge: rgba(255,255,255,0.35);
--radius: 20px;
--shadow: 0 8px 32px rgba(31,38,135,0.37);
--font: 'Manrope',sans-serif
}
Prompt
Construa o site em estilo glassmorphism. Fundo da página #0f172a com três grandes manchas radiais desfocadas em #7c3aed, #06b6d4 e #ec4899 (filter: blur(80px), opacity 0.6) posicionadas atrás do conteúdo. Cada card, barra de navegação e modal é um painel de vidro: background rgba(255,255,255,0.12), backdrop-filter blur(20px) saturate(160%), borda 1px rgba(255,255,255,0.35), border-radius 20px, box-shadow 0 8px 32px rgba(31,38,135,0.37). Texto #f8fafc, texto secundário rgba(248,250,252,0.7). Fonte Manrope: títulos 600 a 40/28/20px, corpo 400 a 16px, line-height 1.6. Botões: #7c3aed sólido com texto branco, raio 12px, hover sobe 2px com sombra mais clara. Espaçamento em escala de 8px, padding dos cards 24-32px. Forneça um fallback sólido (rgba(15,23,42,0.85)) quando backdrop-filter não for suportado. Movimento: 200ms ease-out só no hover; nenhuma animação disparada por scroll.
Para design.md, .cursorrules ou AGENTS.md
## Direção de design
Construa o site em estilo glassmorphism. Fundo da página #0f172a com três grandes manchas radiais desfocadas em #7c3aed, #06b6d4 e #ec4899 (filter: blur(80px), opacity 0.6) posicionadas atrás do conteúdo. Cada card, barra de navegação e modal é um painel de vidro: background rgba(255,255,255,0.12), backdrop-filter blur(20px) saturate(160%), borda 1px rgba(255,255,255,0.35), border-radius 20px, box-shadow 0 8px 32px rgba(31,38,135,0.37). Texto #f8fafc, texto secundário rgba(248,250,252,0.7). Fonte Manrope: títulos 600 a 40/28/20px, corpo 400 a 16px, line-height 1.6. Botões: #7c3aed sólido com texto branco, raio 12px, hover sobe 2px com sombra mais clara. Espaçamento em escala de 8px, padding dos cards 24-32px. Forneça um fallback sólido (rgba(15,23,42,0.85)) quando backdrop-filter não for suportado. Movimento: 200ms ease-out só no hover; nenhuma animação disparada por scroll.
## Tokens
:root { --bg:#0f172a; --fg:#f8fafc; --accent:#7c3aed; --glass:rgba(255,255,255,0.12); --edge:rgba(255,255,255,0.35); --radius:20px; --shadow:0 8px 32px rgba(31,38,135,0.37); --font:'Manrope',sans-serif }
Mantenha estados de hover e focus-visible em todo elemento interativo. Não adicione um framework CSS.