Design for AIEstilo Gradiente mesh / aurora: prompt de design de UI
Paleta, regras de tipografia e um prompt pronto para colar de gradiente mesh / aurora. Também chamado de mesh gradient, fundo aurora, manchas de gradiente, UI aurora boreal, gradiente da Stripe. 2020 em diante (hero da Stripe em 2020, wallpapers do macOS Big Sur, Linear 2021).
Traços
- fundos feitos de vários gradientes radiais sobrepostos que se misturam como uma aurora
- 3-5 matizes, geralmente do frio ao quente (violeta, azul, verde-azulado, rosa, pêssego)
- animação lenta das manchas: loops de 15-30s, escala e deriva sutis
- o conteúdo fica num painel sólido ou levemente fosco à frente
- tipografia neutra e moderna para o fundo carregar o clima
- overlay de ruído ou grão para evitar banding nos gradientes
- muitas vezes só no hero; o resto da página é simples
Paleta
#0f0c29 base escura (ou #ffffff clara), #7f5af0 violeta, #2cb1bc verde-azulado, #ff8fab rosa, #ffd166 pêssego, #fffffe texto sobre escuro
Tipografia
Manrope, DM Sans, Plus Jakarta Sans ou a "General Sans" parecida com Satoshi (gratuita via Fontshare); títulos 600-700 a 48-72px com -0.02em, corpo 400 a 17px
Faça
- construa o mesh com 4-5 manchas radial-gradient em posição absoluta, cada uma com 40-60vw, blur(60-100px), mix-blend-mode screen sobre escuro ou multiply sobre claro
- adicione um overlay de ruído SVG a 5-8% de opacidade para matar o banding
- mantenha o mesh no hero e numa faixa do rodapé; o meio da página é calmo
Evite
- não anime as manchas mais rápido que 15s nem as escale além de 1.2x; dá enjoo
- não coloque texto pequeno direto sobre o mesh sem um painel ou scrim
- não use espalhamentos de matiz arco-íris; escolha uma família de 3-5 matizes relacionados
Conhecido por: Stripe, Linear (hero de 2021), wallpapers do Apple macOS Big Sur, marketing do Framer
Semente CSS
:root {
--bg: #0f0c29;
--fg: #fffffe;
--accent: #7f5af0;
--accent2: #2cb1bc;
--accent3: #ff8fab;
--radius: 16px;
--grain: 0.06;
--font: 'Manrope',sans-serif
}
Prompt
Construa o site com um hero em gradiente mesh aurora. Base #0f0c29. Atrás do hero, posicione cinco círculos em posição absoluta (50vw cada, border-radius 50%, filter blur(90px), mix-blend-mode screen) em #7f5af0, #2cb1bc, #ff8fab, #ffd166 e #4f46e5, sobrepostos em deslocamentos diferentes, cada um derivando no próprio loop de 20-28s ease-in-out infinite (translate de até 10%, scale de 0.9 a 1.15). Sobreponha uma camada de ruído SVG feTurbulence a opacity 0.06 em todo o hero. Texto #fffffe, secundário rgba(255,255,254,0.7). Fonte Manrope: h1 700 a 68px com -0.025em, subtítulo 400 a 20px, corpo 17px. O conteúdo do hero não fica sobre nada, mas tem um scrim escuro suave (radial-gradient rgba(15,12,41,0.6)) atrás do texto para legibilidade. Botão primário branco com texto #0f0c29, raio 12px; o secundário é um contorno de 1px rgba(255,255,255,0.3). Abaixo do hero a página é #0f0c29 chapado com filetes 1px rgba(255,255,255,0.08) e cards com raio 16px. Sob prefers-reduced-motion, congele as manchas.
Para design.md, .cursorrules ou AGENTS.md
## Direção de design
Construa o site com um hero em gradiente mesh aurora. Base #0f0c29. Atrás do hero, posicione cinco círculos em posição absoluta (50vw cada, border-radius 50%, filter blur(90px), mix-blend-mode screen) em #7f5af0, #2cb1bc, #ff8fab, #ffd166 e #4f46e5, sobrepostos em deslocamentos diferentes, cada um derivando no próprio loop de 20-28s ease-in-out infinite (translate de até 10%, scale de 0.9 a 1.15). Sobreponha uma camada de ruído SVG feTurbulence a opacity 0.06 em todo o hero. Texto #fffffe, secundário rgba(255,255,254,0.7). Fonte Manrope: h1 700 a 68px com -0.025em, subtítulo 400 a 20px, corpo 17px. O conteúdo do hero não fica sobre nada, mas tem um scrim escuro suave (radial-gradient rgba(15,12,41,0.6)) atrás do texto para legibilidade. Botão primário branco com texto #0f0c29, raio 12px; o secundário é um contorno de 1px rgba(255,255,255,0.3). Abaixo do hero a página é #0f0c29 chapado com filetes 1px rgba(255,255,255,0.08) e cards com raio 16px. Sob prefers-reduced-motion, congele as manchas.
## Tokens
:root { --bg:#0f0c29; --fg:#fffffe; --accent:#7f5af0; --accent2:#2cb1bc; --accent3:#ff8fab; --radius:16px; --grain:0.06; --font:'Manrope',sans-serif }
Mantenha estados de hover e focus-visible em todo elemento interativo. Não adicione um framework CSS.