Design for AIEstilo Gradiente mesh / aurora: prompt de diseño UI
Paleta, reglas tipográficas y un prompt pegable para gradiente mesh / aurora. También llamado gradiente mesh, fondo aurora, manchas de gradiente, UI de aurora boreal, gradiente de Stripe. 2020 en adelante (hero de Stripe en 2020, fondos de macOS Big Sur, Linear 2021).
Rasgos
- fondos hechos de varios gradientes radiales solapados que se funden como una aurora
- 3-5 tonos, normalmente de frío a cálido (violeta, azul, verde azulado, rosa, melocotón)
- animación lenta de las manchas: bucles de 15-30s, escala y deriva sutiles
- el contenido se asienta sobre un panel sólido o ligeramente esmerilado por delante
- la tipografía es neutra y moderna para que el fondo lleve el ambiente
- capa de ruido o grano para evitar el bandeado en los gradientes
- a menudo solo en el hero; el resto de la página es liso
Paleta
#0f0c29 base oscura (o #ffffff clara), #7f5af0 violeta, #2cb1bc verde azulado, #ff8fab rosa, #ffd166 melocotón, #fffffe texto sobre oscuro
Tipografía
Manrope, DM Sans, Plus Jakarta Sans o la parecida a Satoshi "General Sans" (gratis en Fontshare); títulos 600-700 a 48-72px con -0.02em, cuerpo 400 a 17px
Haz
- construye el mesh con 4-5 manchas de radial-gradient posicionadas en absoluto, cada una de 40-60vw, blur(60-100px), mix-blend-mode screen sobre oscuro o multiply sobre claro
- añade una capa de ruido SVG al 5-8% de opacidad para matar el bandeado
- mantén el mesh en el hero y en una banda del pie; el centro de la página está en calma
Evita
- no animes las manchas más rápido de 15s ni las escales más allá de 1.2x; marea
- no pongas texto pequeño directamente sobre el mesh sin un panel o un velo
- no uses extensiones de tono arcoíris; elige una familia de 3-5 tonos relacionados
Conocido por: Stripe, Linear (hero de 2021), fondos de Apple macOS Big Sur, marketing de Framer
Semilla CSS
:root {
--bg: #0f0c29;
--fg: #fffffe;
--accent: #7f5af0;
--accent2: #2cb1bc;
--accent3: #ff8fab;
--radius: 16px;
--grain: 0.06;
--font: 'Manrope',sans-serif
}
Prompt
Construye el sitio con un hero de gradiente mesh aurora. Base #0f0c29. Detrás del hero, coloca cinco círculos posicionados en absoluto (50vw cada uno, border-radius 50%, filter blur(90px), mix-blend-mode screen) en #7f5af0, #2cb1bc, #ff8fab, #ffd166 y #4f46e5, solapados con distintos desplazamientos, cada uno a la deriva en su propio bucle de 20-28s ease-in-out infinite (translate hasta el 10%, scale de 0.9 a 1.15). Superpón una capa de ruido SVG feTurbulence a opacity 0.06 sobre todo el hero. Texto #fffffe, secundario rgba(255,255,254,0.7). Fuente Manrope: h1 700 a 68px con -0.025em, subtítulo 400 a 20px, cuerpo 17px. El contenido del hero no lleva panel, pero sí un velo oscuro suave (radial-gradient rgba(15,12,41,0.6)) detrás del texto para la legibilidad. Botón primario blanco con texto #0f0c29, radio 12px; el secundario es un contorno de 1px rgba(255,255,255,0.3). Bajo el hero la página es #0f0c29 liso con filetes 1px rgba(255,255,255,0.08) y tarjetas con radio 16px. Bajo prefers-reduced-motion, congela las manchas.
Para design.md, .cursorrules o AGENTS.md
## Dirección de diseño
Construye el sitio con un hero de gradiente mesh aurora. Base #0f0c29. Detrás del hero, coloca cinco círculos posicionados en absoluto (50vw cada uno, border-radius 50%, filter blur(90px), mix-blend-mode screen) en #7f5af0, #2cb1bc, #ff8fab, #ffd166 y #4f46e5, solapados con distintos desplazamientos, cada uno a la deriva en su propio bucle de 20-28s ease-in-out infinite (translate hasta el 10%, scale de 0.9 a 1.15). Superpón una capa de ruido SVG feTurbulence a opacity 0.06 sobre todo el hero. Texto #fffffe, secundario rgba(255,255,254,0.7). Fuente Manrope: h1 700 a 68px con -0.025em, subtítulo 400 a 20px, cuerpo 17px. El contenido del hero no lleva panel, pero sí un velo oscuro suave (radial-gradient rgba(15,12,41,0.6)) detrás del texto para la legibilidad. Botón primario blanco con texto #0f0c29, radio 12px; el secundario es un contorno de 1px rgba(255,255,255,0.3). Bajo el hero la página es #0f0c29 liso con filetes 1px rgba(255,255,255,0.08) y tarjetas con radio 16px. Bajo prefers-reduced-motion, congela las manchas.
## Tokens
:root { --bg:#0f0c29; --fg:#fffffe; --accent:#7f5af0; --accent2:#2cb1bc; --accent3:#ff8fab; --radius:16px; --grain:0.06; --font:'Manrope',sans-serif }
Mantén estados hover y focus-visible en cada elemento interactivo. No añadas un framework CSS.