Después de una década de diseño aséptico y marcas que se parecen entre sí, el neo-brutalismo web ha pasado de broma de diseñadores en X a tendencia con peso real. Bordes gruesos, sombras duras, colores que te entran por los ojos, tipografía sin complejos. Y algo que sí está documentado: las marcas que lo aplican bien se recuerdan mucho mejor que la media.
En esta guía tienes 12 ejemplos verificados, los elementos que definen el estilo, cuándo usarlo, cuándo no tocarlo ni con un palo y cómo aplicarlo sin que tu landing acabe pareciendo el experimento de fin de semana de un estudiante de primero. Todos los enlaces están comprobados y funcionan.
Aviso desde el principio: no voy a venderte que el neo-brutalismo convierte más. No hay datos públicos que lo demuestren y quien te diga lo contrario está improvisando. Lo que sí hay es evidencia de diferenciación y recuerdo de marca, que no es lo mismo. Te explico la diferencia porque cambia por completo cuándo te conviene.
Qué es el neo-brutalismo y por qué está explotando ahora
El neo-brutalismo recupera la energía cruda del brutalismo digital de mediados de los 2010 y la pasa por un filtro de sistema de diseño. El resultado es agresivo por fuera pero coherente por dentro: tipos elegidos con criterio, layouts intencionales y una paleta consistente. No es fealdad por accidente. Es fealdad calculada.
Conviene conocer la genealogía porque te ayuda a defender el estilo ante un cliente. En 2014 el director creativo suizo Pascal Deville lanzó Brutalist Websites, la galería que dio nombre y forma al movimiento en la web. Deville distinguía tres corrientes dentro del brutalismo: los puristas, que citan la arquitectura; los minimalistas de UX, obsesionados con la eficiencia; y los artistas, que ven la web como arte infravalorado.
El salto al «neo» llegó en marzo de 2022, cuando el diseñador polaco Michał Malewicz publicó Neubrutalism is taking over the web en UX Collective. Ese artículo es el que puso nombre a la versión ordenada del estilo. Malewicz ya había bautizado antes el neumorfismo y el glassmorphism, así que tiene ojo para detectar hacia dónde se mueve la interfaz.
¿Por qué ahora? Por dos razones que se refuerzan. La primera es fatiga visual: cuando todo el feed es minimal y pulido, lo «feo» rompe el patrón y detiene el scroll. La segunda es posicionamiento de marca. Una web brutalista grita personalidad, justo lo que necesitan las marcas independientes frente a la homogeneidad que trae la generación de interfaces con IA.
Ojo con el matiz: el neo-brutalismo compra atención y memoria, no confianza. Son cosas distintas y se pagan en momentos distintos del embudo.
Elementos clave del neo-brutalismo digital
Estos son los ingredientes que se repiten en prácticamente todos los ejemplos. Si te faltan tres o más, probablemente no estés haciendo neo-brutalismo sino minimalismo con un color fuerte.
- Bordes gruesos: de 2 a 4 px sólidos, casi siempre en negro. La clave está en el grosor: con 1 px estás en territorio minimal, no brutalista.
- Sombras duras: desplazamiento sin desenfoque, del tipo
box-shadow: 6px 6px 0 #000. Nada de sombras suaves difuminadas. - Colores planos saturados: bloques sin degradados. Amarillo señal, rosa fucsia, azul Klein, verde lima.
- Tipografía de impacto: sans serif gruesas y displays enormes, con mezclas intencionales entre titular y cuerpo.
- Asimetría controlada: grids irregulares y elementos descolocados a propósito, no por descuido.
- Botones contundentes: grandes, con texto en mayúsculas y sin sutilezas.
- Cero degradados ni transparencias: todo es plano y categórico. Si hay glow o cristal, ya es otro estilo.
Ese último punto es el que más gente se salta. He visto muchas landings vendidas como brutalistas que en realidad son dark mode con bordes finos y esquinas redondeadas. Si tienes esquinas de 12 px y sombras difuminadas, no es neo-brutalismo.
Tip: si quieres una landing neo-brutalista publicada esta tarde sin tocar código, las plantillas de Framer tienen varias con este estilo ya montado y responsive.
6 marcas y productos con neo-brutalismo real
He dejado fuera varios ejemplos que circulan en listados en inglés porque al comprobarlos no aguantaban: unos ya no están online y otros son minimalismo con un color llamativo. Estos seis sí que sostienen el estilo.
1. Gumroad, el caso paradigmático
Es la referencia obligatoria. En su rediseño de 2021, Sahil Lavingia cambió la estética de SaaS convencional por bordes negros gruesos, rellenos de color plano, tipografía enorme y sombras desplazadas sin desenfoque. Secciones enteras en rosa y amarillo, sin concesiones.
Lo interesante es que fue polarizante: media comunidad de diseño se indignó y la otra media aplaudió. Pero consiguió el objetivo real de cualquier rediseño, que es volverse reconocible al instante. Si tienes que justificar el estilo ante un cliente, este es el caso que le enseñas. Ver Gumroad.
2. Figma Config, tipografía monumental
La identidad de la conferencia anual de Figma tira de tipografía gigantesca y primitivas geométricas (cuadrados, círculos) que se solapan de formas «incorrectas» a propósito. Encaja con el espíritu lúdico del evento y demuestra que se puede ser brutalista con un acabado técnico impecable. Ver Config.
3. PostHog, brutalismo con sentido del humor
PostHog combina bloques contundentes con ilustración de erizos y un tono de voz irreverente. Funciona porque la estética y la voz de marca van a la par: directa, sin corporativismo. Es un buen recordatorio de que el neo-brutalismo se cae si el copy sigue siendo el de un folleto de consultoría. Ver PostHog.
4. Are.na, mínimo decoro y máximo contenido
Are.na está en el lado sobrio del brutalismo: interfaz casi tabular, decoración mínima, el contenido manda. Sirve de antídoto contra la idea de que brutalismo equivale a estridencia. Aquí la crudeza es funcional, no decorativa. Ver Are.na.
5. Nomad List y RemoteOK, brutalismo accidental
Los proyectos de Pieter Levels son el caso extremo: densidad informativa enorme, sin pulir, feos casi a propósito. No nacieron de una decisión estética sino de priorizar datos y velocidad. Y funcionan. La lección es que cuando el contenido es el producto, el acabado pasa a segundo plano. Ver Nomad List.
6. Craigslist y Drudge Report, los abuelos del estilo
Son los ejemplos clásicos que se citan en cualquier análisis del brutalismo web. Ninguno se diseñó con intención estética: simplemente nunca se rediseñaron. Míralos como recordatorio de que la crudeza funcional puede sobrevivir décadas si el servicio que da la web es lo bastante útil. Ver Craigslist.
6 galerías y kits para inspirarte y construir
Los ejemplos inspiran, pero lo que de verdad te ahorra tiempo son las galerías actualizadas y los kits de componentes. Estos seis los he comprobado uno a uno. Si vienes de ver otros ejemplos de diseños de páginas web del blog, notarás el contraste de inmediato.
7. Brutalist Websites, el archivo fundacional
La galería de Pascal Deville que arrancó en 2014 y catalogó cientos de webs que rompían las convenciones corporativas. Sigue siendo el archivo de referencia del movimiento. Si quieres entender de dónde viene todo esto, empieza aquí. Ver galería.
8. BRUTAL WEB, la versión neo actualizada
Galería curada centrada específicamente en webs neo-brutalistas, con selección de estudios y diseñadores actuales. Es la que consulto cuando busco referencias recientes en lugar de clásicos de hace diez años. Ver galería.
9. Neubrutalism.com, la guía de referencia
Un sitio dedicado por completo a documentar el estilo: principios, ejemplos y variantes. Útil cuando necesitas material para argumentar una propuesta y no solo capturas bonitas. Ver guía.
10. neobrutalism.dev, componentes para React y Tailwind
La librería de componentes más adoptada del estilo, construida sobre shadcn/ui con React y Tailwind. Supera las 5.000 estrellas en GitHub. Si tu proyecto va en React, este es el atajo más directo. Ver componentes.
11. NeoBrutalismCSS, la opción ligera
Librería CSS minimalista de menos de 100 KB con clases modulares para montar páginas con el estilo sin dependencias de framework. Perfecta si trabajas con HTML y CSS a pelo o quieres prototipar rápido. Ver en GitHub.
12. Brutalist Framework, plantillas completas
Framework HTML responsive de código abierto con librerías CSS y JavaScript pensadas para prototipar elementos brutalistas rápido. Más completo que una librería de clases y buen punto de partida para una maqueta entera. Ver framework.
Tip: para iconos, ilustraciones y mockups con estética brutalista coherente entre sí, Envato Elements tiene kits completos con licencia comercial por una cuota mensual. Ahorra las horas de buscar piezas que peguen entre ellas.
Cuándo NO usar neo-brutalismo
Esta es la sección que más te va a servir en una reunión. El estilo no encaja en todo, y saber decir que no es parte del trabajo. Si tu cliente está en alguno de estos sectores, propón otra dirección.
- Banca, seguros y servicios financieros tradicionales.
- Salud, farmacia y clínicas.
- Sector público y administraciones.
- Comercio electrónico de gran volumen con público generalista.
- B2B conservador con tickets altos y ciclos de venta largos.
La regla mental que uso: si el usuario necesita confiar mucho antes de actuar (entregar dinero, datos de salud, información sensible), el neo-brutalismo introduce fricción en lugar de carácter. La estética cruda choca con las expectativas de profesionalidad y esa fricción se paga.
Hay un segundo motivo, menos comentado: las páginas con mucha densidad informativa sufren con el estilo. El contraste extremo y los bloques compitiendo entre sí complican escanear la página. Si tu web es una tabla de tarifas con veinte variables, plantéate otro camino. Nielsen Norman Group tiene un análisis de buenas prácticas del neobrutalismo que vale la pena leer antes de decidir.
Cómo aplicarlo sin que parezca descuidado: 5 reglas
La diferencia entre una web brutalista con criterio y una chapuza es el sistema que hay debajo. Estas cinco reglas son las que aplico.
- Sistema tipográfico claro: dos familias como máximo y jerarquía estricta de H1 a H6. Contraste extremo entre titular y cuerpo.
- Paleta limitada: tres colores planos, un neutro de fondo y el negro estructural de bordes y tipografía. Más colores y pierdes el control.
- Grid intencional: asimétrico sí, caótico no. Cada bloque debe tener una razón para estar donde está.
- Microcopia coherente: tono directo, sin «vamos a ayudarte a potenciar tu negocio». Si el copy es corporativo, la estética suena a disfraz.
- Test de accesibilidad: contraste mínimo AA, tamaños legibles y navegación por teclado funcional. Aquí es donde el brutalismo original suspendía.
Sobre la tipografía, que es la mitad del trabajo: las displays gruesas como Anton, Bebas Neue o Archivo Black son las que mejor funcionan en titulares, combinadas con una sans neutra en el cuerpo. Las tienes todas gratis en mi selección de tipografías para títulos.
Recursos para empezar hoy
- Tipografías: Anton, Bebas Neue y Archivo Black para display; Inter o Manrope para cuerpo. Todas gratis en Google Fonts y en la sección de tipografía.
- Componentes: neobrutalism.dev si vas con React, NeoBrutalismCSS si trabajas con CSS puro.
- Inspiración: Brutalist Websites y BRUTAL WEB, ambas en el listado de arriba.
- Color: genera paletas planas saturadas y comprueba el contraste antes de cerrarlas.
Si estás montando la web sobre WordPress, elige un tema que te deje control real del CSS. Tengo una comparativa de mejores temas de WordPress por sector que te puede ahorrar tiempo en la elección.
Mi recomendación
Si me preguntas por dónde empezar, mi respuesta es que no rediseñes tu web entera. Monta una landing suelta para una campaña concreta y mídela. El neo-brutalismo es una apuesta de marca, y las apuestas de marca se prueban en pequeño antes de mover todo.
De los 12 recursos del listado, los tres que uso más son Gumroad como argumento para convencer a un cliente escéptico, BRUTAL WEB para referencias frescas y neobrutalism.dev para no reinventar componentes. Con esos tres cubres inspiración, argumentación y producción.
Y una limitación honesta que no verás en muchos artículos: este estilo envejece rápido. El neumorfismo y el glassmorphism también parecían imparables. Aplícalo donde el coste de rediseñar sea bajo, no en un proyecto que tenga que aguantar cinco años sin tocarse. Si quieres contexto de hacia dónde va el resto del diseño web, echa un vistazo a mis ejemplos de hero sections inmersivas y a la sección de diseño web.
Tip: si vas a montar la landing de prueba en Webflow o Framer y quieres partir de algo ya resuelto, en Creative Market encuentras plantillas y kits brutalistas de compra única, sin suscripción.
Tabla resumen de los 12 recursos
| # | Recurso | Tipo | Para qué te sirve |
|---|---|---|---|
| 1 | Gumroad | Marca / SaaS | Argumentar el estilo ante un cliente escéptico |
| 2 | Figma Config | Marca / evento | Ver tipografía monumental bien ejecutada |
| 3 | PostHog | Marca / SaaS | Coherencia entre estética y tono de voz |
| 4 | Are.na | Producto | Brutalismo sobrio y funcional |
| 5 | Nomad List / RemoteOK | Producto | Densidad informativa sin pulir |
| 6 | Craigslist / Drudge Report | Clásicos | Origen histórico de la crudeza funcional |
| 7 | Brutalist Websites | Galería | Archivo fundacional del movimiento |
| 8 | BRUTAL WEB | Galería | Referencias neo-brutalistas actuales |
| 9 | Neubrutalism.com | Guía | Documentar principios y variantes |
| 10 | neobrutalism.dev | Componentes | Montar en React y Tailwind |
| 11 | NeoBrutalismCSS | Librería CSS | Prototipar con HTML y CSS puro |
| 12 | Brutalist Framework | Framework | Maquetar una página completa rápido |
Preguntas frecuentes sobre neo-brutalismo web
¿Qué es el neo-brutalismo en diseño web?
Es una corriente que recupera la estética cruda del brutalismo original (bordes gruesos, tipografía agresiva, colores saturados, layouts asimétricos) y la lleva al digital con coherencia y sentido del humor. La diferencia con el original es que aquí hay un sistema de diseño detrás.
¿En qué se diferencia del brutalismo original de los 2010?
El brutalismo original celebraba la fealdad y la falta de pulido como postura. El neo-brutalismo mantiene la energía cruda pero con tipografía elegida, layouts intencionales y respeto por la jerarquía visual y la accesibilidad. Uno era una reacción; el otro es un estilo con reglas.
¿El neo-brutalismo mejora las conversiones?
No hay datos públicos que lo demuestren y desconfía de quien lo afirme sin fuente. Lo que sí está documentado es que mejora el recuerdo y la diferenciación de marca, como pasó con Gumroad. Son objetivos distintos: si tu problema es que nadie te recuerda, encaja; si es que abandonan el carrito, probablemente no.
¿Cuándo NO debo usar neo-brutalismo?
En webs donde la confianza es crítica: banca, salud, administraciones públicas, tiendas de gran volumen y B2B conservador. También en páginas con mucha densidad de información, porque el contraste extremo dificulta escanear el contenido.
¿Es compatible con la accesibilidad?
Sí, si cuidas el contraste (mínimo AA), los tamaños tipográficos y la jerarquía visual. De hecho el contraste alto juega a tu favor. Donde falla el estilo mal aplicado es en el foco de teclado y en textos grandes sobre fondos saturados que cansan la vista.
¿Qué tipografías encajan mejor?
Displays gruesas como Anton, Bebas Neue o Archivo Black en titulares, combinadas con sans neutras tipo Inter o Manrope para texto largo. La regla es contraste extremo entre titular y cuerpo, nunca la misma fuente para los dos.
¿Qué paleta de colores funciona?
Bloques planos saturados (amarillo señal, rosa fucsia, azul Klein, verde lima) sobre un fondo neutro como blanco roto, crema o gris piedra, con el negro como acento estructural en bordes y tipografía. Tres colores planos son suficientes.
¿Funciona en móvil?
Sí, y a menudo mejor que en escritorio: los bloques contundentes se leen muy bien en pantalla pequeña. Cuida que el contraste no cargue la vista en sesiones largas y que la navegación siga siendo obvia, sobre todo en menús y formularios.
¿Cuánto va a durar la tendencia?
No te voy a dar un plazo porque nadie lo sabe. Lo que sí se observa es que ya está mutando hacia híbridos: en los informes de tendencias de 2026 aparece el «cute-alism», que mezcla la estructura brutalista con detalles kawaii, formas suaves e iconos de dibujo. Aplícalo con criterio para que envejezca bien, no por seguir la moda.
¿Puedo aplicarlo solo a una parte de la web?
Es lo que más recomiendo. Tipografía expresiva en titulares y botones contundentes, manteniendo el resto del sistema de diseño actual. Consigues carácter sin comprometer la confianza que ya has construido, y puedes medir el efecto antes de ir a más.
Tienes tres caminos según tu proyecto
Si tienes marca personal o portfolio: es la oportunidad perfecta para diferenciarte. Coge NeoBrutalismCSS o neobrutalism.dev y rediseña tu portfolio esta semana. El riesgo es bajo y el retorno en recuerdo es alto.
Si tienes un SaaS o producto digital: monta una landing alternativa para una campaña concreta y compárala con la actual. Mide antes de mover toda la marca.
Si tu cliente es conservador: propón un híbrido. Titulares expresivos y llamadas a la acción contundentes, pero el resto sigue el sistema actual. Es la vía que menos discusiones genera y la que mejor envejece.
¿Has aplicado neo-brutalismo en algún proyecto? Deja el enlace en los comentarios, que me gusta ver cómo lo resuelve cada uno. Disfrútalo.
