# Neo-brutalismo

También llamado: neubrutalismo, web neo-brutalista, estilo Gumroad, UI de bordes gruesos  
Época: 2021-2024 (el rediseño de Gumroad de 2021 lo popularizó)  
Página: https://designforai.dev/es/style/neo-brutalism

## 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

```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.