Design for AIEstilo Neo-brutalismo: prompt de diseño UI
Paleta, reglas tipográficas y un prompt pegable para neo-brutalismo. También llamado neubrutalismo, web neo-brutalista, estilo Gumroad, UI de bordes gruesos. 2021-2024 (el rediseño de Gumroad de 2021 lo popularizó).
Rasgos
- bordes negros gruesos (2-4px) en todo, sombras desplazadas duras (sin blur)
- colores planos y saturados: amarillo, rosa, lima, cielo, sobre crema o blanco
- radio cero o uno mínimo de 4-6px; los elementos parecen pegatinas
- tipografía grotesk grande y en negrita, a veces mezclada con una mono para etiquetas
- desalineación deliberada, pegatinas rotadas, franjas en marquesina
- las interacciones son físicas: el botón se hunde en su sombra al pulsarlo
- alto contraste, ruidoso, más juguetón que crudo
Paleta
#fffdf5 página, #000000 bordes y texto, #ffde59 primario, #ff6b9d secundario, #9ef01a terciario, #4d9fff info
Tipografía
Space Grotesk o Archivo Black para títulos, Work Sans o IBM Plex Sans para cuerpo, Space Mono para etiquetas; títulos 800 a 40-72px, cuerpo 400-500 a 16-18px
Haz
- usa una sola regla de sombra en todas partes: 4px 4px 0 #000, 6px en hover, 0 en active con un translate a juego
- mantén al menos tres colores llamativos y úsalos a plena saturación
- haz que bordes y texto sean el mismo negro para que la página se lea como un solo dibujo
Evita
- no uses gradientes, blur ni sombras suaves; solo bordes duros
- no te vayas al pastel; el estilo necesita pegada
- no añadas bordes sutiles de 1px; o gruesos o ninguno
Conocido por: Gumroad, archivos de la comunidad de Figma, Poolsuite, drops de Mschf
Semilla CSS
:root {
--bg: #fffdf5;
--fg: #000000;
--accent: #ffde59;
--accent2: #ff6b9d;
--radius: 4px;
--border: 3px solid #000;
--shadow: 4px 4px 0 #000;
--font: 'Space Grotesk',sans-serif
}
Prompt
Construye el sitio en estilo neo-brutalista. Fondo de página #fffdf5, todo el texto y los bordes #000000. Cada tarjeta, botón, input y elemento de nav lleva border 3px solid #000, border-radius 4px, box-shadow 4px 4px 0 #000. Bloques de color: primario #ffde59, secundario #ff6b9d, terciario #9ef01a, info #4d9fff, aplicados como rellenos sólidos a botones, etiquetas y fondos de sección. Fuentes: Space Grotesk 800 para títulos a 72/48/32px con line-height apretado 1.05, Work Sans 500 para cuerpo a 18px, Space Mono para etiquetas en mayúsculas. Sin gradientes, sin blur, sin efectos de opacidad. Rota un par de etiquetas decorativas -3deg y 2deg. Hover: la sombra pasa a 6px 6px 0 #000 y el elemento se mueve -2px/-2px; active: sombra 0 y el elemento se mueve +4px/+4px, 100ms linear. Espaciado contundente: huecos de 24px, padding de tarjeta 32px, 120px entre secciones.
Para design.md, .cursorrules o AGENTS.md
## Dirección de diseño
Construye el sitio en estilo neo-brutalista. Fondo de página #fffdf5, todo el texto y los bordes #000000. Cada tarjeta, botón, input y elemento de nav lleva border 3px solid #000, border-radius 4px, box-shadow 4px 4px 0 #000. Bloques de color: primario #ffde59, secundario #ff6b9d, terciario #9ef01a, info #4d9fff, aplicados como rellenos sólidos a botones, etiquetas y fondos de sección. Fuentes: Space Grotesk 800 para títulos a 72/48/32px con line-height apretado 1.05, Work Sans 500 para cuerpo a 18px, Space Mono para etiquetas en mayúsculas. Sin gradientes, sin blur, sin efectos de opacidad. Rota un par de etiquetas decorativas -3deg y 2deg. Hover: la sombra pasa a 6px 6px 0 #000 y el elemento se mueve -2px/-2px; active: sombra 0 y el elemento se mueve +4px/+4px, 100ms linear. Espaciado contundente: huecos de 24px, padding de tarjeta 32px, 120px entre secciones.
## Tokens
:root { --bg:#fffdf5; --fg:#000000; --accent:#ffde59; --accent2:#ff6b9d; --radius:4px; --border:3px solid #000; --shadow:4px 4px 0 #000; --font:'Space Grotesk',sans-serif }
Mantén estados hover y focus-visible en cada elemento interactivo. No añadas un framework CSS.