neo-brutalism-ui

Neo-Brutalismo UI

Una interfaz gana confianza al mostrar su estructura abiertamente y siendo ruidosa al respecto, porque cada borde y sombra es un hecho declarado.

Campos de color planos y llamativos con bordes negros gruesos y sombras desplazadas duras y sin desenfoque. Surgió de sitios de productos como Gumroad y de kits de la comunidad de Figma como una respuesta deliberada a la suavidad corporativa.

Período: 2020–presente · Era: Contemporánea y Espacial · Dominio: Diseño Gráfico y UI · También llamado: Neubrutalismo, Neobrutalismo, UI Web Brutalista

Cuándo cargar esta habilidad

Cárgala cuando el usuario pida: "neo-brutalism", "neubrutalism", "neobrutalist", "brutalist ui", "bordes negros gruesos", "sombra dura", "sombra desplazada", "estilo gumroad", "colores planos llamativos", "estilo sticker".

Buena para: productos de economía de creadores, landing pages de SaaS independientes, sitios de herramientas para desarrolladores, portafolios, sitios de eventos y festivales.

No la uses cuando:

• La marca debe transmitir lujo discreto, atención médica o seguridad bancaria.
• La interfaz es una herramienta empresarial densa, porque los bordes de 3px y las sombras de 4px consumen espacio en cada fila.
• El público espera un aspecto nativo de plataforma, como una pantalla de configuración del sistema operativo.

Directivas del sistema

Al generar interfaces o diseños gráficos en Neo-Brutalismo UI, DEBES:

1. Dibujar un borde sólido #000000 de 2px a 4px alrededor de cada tarjeta, botón, campo de entrada e imagen.
2. Proyectar una sombra dura con desenfoque cero, desplazada 4px 4px, por ejemplo 4px 4px 0 0 #000000, en cada elemento elevado.
3. Rellenar las superficies con color plano saturado al 100% de opacidad y usar de dos a cuatro tonos llamativos en una página.
4. Al pasar el ratón, mover el elemento según el desplazamiento de la sombra y reducir la sombra a 0, para que parezca presionarse contra la página.
5. Usar radios de 0px a 8px únicamente, y usar el mismo valor en todos los elementos de una página.
6. Configurar los encabezados en una tipografía grotesca pesada o monoespaciada con peso 700 o superior, en tamaños de 48px a 96px.
7. Mantener el texto en negro sobre campos de color y alcanzar al menos 7:1 de contraste en cada relleno.

Barreras de seguridad

Cada línea siguiente rompe el estilo. Verifica tu salida contra la lista antes de devolverla.

• NUNCA: Sombras difuminadas con un radio de desenfoque superior a 0px.
• NUNCA: Degradados grises sutiles o brillos satinados en las superficies.
• NUNCA: Rellenos pastel de baja saturación con texto gris.
• NUNCA: Bordes finos de 1px o bordes de un color que no sea negro.
• NUNCA: Radios de esquina mezclados en una página, como 4px en tarjetas y 24px en botones.
• NUNCA: Paneles translúcidos o con desenfoque de fondo.
• NUNCA: Pesos de fuente finos por debajo de 500 para encabezados.

Perfil vectorial

Eje	Puntuación	1 significa	5 significa
Ornamentación	■■■□□ 3/5	puro minimalista	maximalista
Dimensionalidad	■■□□□ 2/5	estrictamente 2D	3D completo / espacial
Rigidez de cuadrícula	■■■□□ 3/5	caótico / orgánico	cuadrícula matemática estricta
Realismo esqueuomórfico	■□□□□ 1/5	digital abstracto	material fotorrealista
Expresividad tipográfica	■■■■□ 4/5	neutral / invisible	experimental / ilustrativo

Mantén estas puntuaciones. Si una solicitud mueve un eje en 2 puntos o más, has salido del estilo: ve a "Alternativas de linaje".

Lógica espacial y de cuadrícula

• Mecánica de cuadrícula: Una cuadrícula de 12 columnas con canales de 24px a 32px y tarjetas que se colocan en bloques de 2, 3 o 4 columnas; la sombra desplazada añade de 4px a 8px de ancho visual.
• Proporción de espacio en blanco: El 25–40% de la superficie está abierta; la escala de espaciado es 8, 16, 24, 32, 48 y 64px, y una tarjeta tiene un relleno de 24px.
• Reglas de alineación: Texto alineado a la izquierda; los bloques se asientan en los bordes de la cuadrícula con una ligera inclinación de 1 a 2 grados permitida solo en stickers y etiquetas; las secciones están cortadas por reglas negras de ancho completo de 3px.
• Geometría del contenedor: Rectángulos con un radio de 0px a 8px, un borde negro de 3px y una sombra de 4px 4px 0 0 #000000; las píldoras usan un radio de 999px solo para etiquetas.

Tipografía

• Clasificaciones: grotesca sans · monoespaciada · slab serif
• Tracking: Los tamaños de visualización toman -0.03em; el cuerpo permanece en 0; las etiquetas en mayúsculas toman +0.05em.
• Interlineado: Visualización 1.0 a 1.1; cuerpo 1.5; etiquetas 1.2.
• Reglas de jerarquía:
  • Usa peso 700 u 800 para encabezados y 400 o 500 para el cuerpo; omite los pesos ligeros.
  • Configura encabezados de 48px a 96px y cuerpo de 16px a 18px, una proporción de aproximadamente 3:1 o superior.
  • Configura botones y etiquetas en negrita mayúscula a 14px con tracking de +0.05em.
  • Pon la palabra clave de un titular en un bloque de resaltado de color con un borde negro de 3px.

Combinaciones de fuentes

Visualización	Cuerpo	Nota
Space Grotesk	DM Sans	Titulares grotescos peculiares sobre una cara de texto simple.
Archivo Black	Work Sans	Pesado peso de póster para encabezados grandes.
Bricolage Grotesque	Inter	Visualización condensada de alto contraste con un cuerpo neutral.
Space Mono	Space Grotesk	Etiquetas monoespaciadas para una voz técnica y cruda.

Color e iluminación

• Estructura de paleta: Contornos negros, un fondo cálido blanco roto o amarillo y de dos a cuatro tonos planos llamativos como rosa, azul y verde, cada uno al 100% de opacidad y usado en grandes bloques.
• Reglas de contraste: El texto negro sobre cada relleno llamativo alcanza al menos 7:1, por ejemplo 15:1 en Limón y 7:1 en Azul Eléctrico; el texto blanco solo se permite sobre rellenos negros; el borde negro de 3px le da a cada control un borde de 21:1.
• Tratamiento de superficie: Campos opacos planos al 100% de opacidad sin degradado, sin textura y sin transparencia; un patrón opcional de puntos o cuadrícula al 8% de negro en el fondo de la página.
• Luz y sombra: No se simula ninguna fuente de luz; una sombra dura desplazada de 4px 4px 0 0 #000000 cae hacia la parte inferior derecha con desenfoque cero, y funciona como una extensión del contorno.

Paleta

Nombre	Hex	Rol
Tinta	#000000	bordes, sombras y texto
Crema	#FFF8E7	fondo de página
Limón	#FFE14D	resaltado y relleno primario
Rosa Intenso	#FF5DA2	relleno de acento
Azul Eléctrico	#4D7CFF	acento secundario
Menta	#6EE7B7	relleno de éxito y etiquetas
Blanco	#FFFFFF	superficie de tarjeta

Materialidad y textura

• Simulación de superficie: Ninguna; la superficie es papel cortado plano o stock de sticker con un contorno negro y una sombra dura, y no imita ningún material real.
• Reglas de borde: Bordes sólidos #000000 de 2px en controles pequeños, 3px en tarjetas y 4px en bloques de héroe; el color del borde nunca cambia entre estados.
• Desenfoque y elevación: El desenfoque es 0px en todas partes; la elevación es el desplazamiento de la sombra: 2px 2px en etiquetas, 4px 4px en tarjetas y botones, 8px 8px en modales, todo en #000000.

Ornamentación e iconografía

• Iconografía: Iconos en negrita con un trazo de 2.5px a 3px y extremos cuadrados o redondos a 24px, en negro, a menudo dentro de un círculo de color con un borde de 2px.
• Ilustración: Ilustración plana en la paleta llamativa con contornos negros gruesos, más stickers, estrellas y flechas; las marcas dibujadas a mano son bienvenidas.
• Elementos decorativos: stickers y etiquetas · bandas de texto tipo marquee · estallidos de estrellas · fondos de cuadrícula de puntos · flechas y garabatos subrayados

Movimiento e interactividad

• Nacido en pantalla: sí
• Física de transición: Los elementos se traducen exactamente según el desplazamiento de la sombra al pasar el ratón y al presionar, de modo que la sombra parece colapsar; el movimiento es corto, lineal en sensación y sin sobrepaso.
• Aceleración: cubic-bezier(0.2, 0, 0, 1)
• Duración (ms): 120
• Hover y activo: Al pasar el ratón, el elemento se mueve 4px a la derecha y 4px hacia abajo y establece la sombra a 0 0 0 0; activo mantiene esa posición; el foco añade un contorno sólido de 3px #4D7CFF desplazado 2px.

Código y token de referencia

Establece data-style="neo-brutalism-ui" en el elemento raíz y pega los tokens. El archivo tokens.css tiene los mismos tokens y un conjunto de reglas de referencia.

[data-style="neo-brutalism-ui"] {
  --color-bg: #FFF8E7;
  --color-surface: #FFFFFF;
  --color-text: #000000;
  --color-muted: #3A3A3A;
  --color-primary: #FFE14D;
  --color-accent: #FF5DA2;
  --color-border: #000000;
  --font-sans: "DM Sans", "Work Sans", system-ui, sans-serif;
  --font-display: "Space Grotesk", "DM Sans", system-ui, sans-serif;
  --border-radius: 4px;
  --border-width: 3px;
  --shadow-elevation: 4px 4px 0 0 #000000;
  --backdrop-filter: none;
  --space-unit: 8px;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --duration: 120ms;
  --shadow-large: 8px 8px 0 0 #000000;
  --accent-blue: #4D7CFF;
  --color-on-bg: #000000;
  --color-on-surface: #000000;
  --color-on-primary: #000000;
  --color-on-accent: #000000;
  --color-muted-on-bg: #3A3A3A;
  --color-muted-on-surface: #3A3A3A;
  --color-link: #000000;
  --color-link-on-surface: #000000;
  --display-weight: 700;
  --subhead-weight: 700;
  --body-weight: 500;
  --strong-weight: 700;
  --label-weight: 700;
  --display-tracking: -0.03em;
  --display-leading: 0.95;
  --display-case: none;
  --body-leading: 1.5;
  --body-size: 17px;
  --icon-stroke: 2.5;
}

Patrones de Tailwind:

Elemento	Clases
página	bg-[#FFF8E7] text-black font-sans antialiased p-6 md:p-12
tarjeta	rounded bg-white p-6 border-[3px] border-black shadow-[4px_4px_0_0_#000000]
botón	rounded border-[3px] border-black bg-[#FFE14D] px-6 py-3 text-sm font-bold uppercase tracking-[0.05em] text-black shadow-[4px_4px_0_0_#000000] transition-all duration-[120ms] hover:translate-x-1 hover:translate-y-1 hover:shadow-none
campo de entrada	rounded border-[3px] border-black bg-white px-4 py-3 text-black shadow-[4px_4px_0_0_#000000] outline-none focus:outline-[3px] focus:outline-offset-2 focus:outline-[#4D7CFF]
encabezado	font-extrabold text-5xl md:text-7xl leading-none tracking-[-0.03em] text-black
etiqueta	inline-block rounded-full border-2 border-black bg-[#6EE7B7] px-3 py-1 text-xs font-bold uppercase shadow-[2px_2px_0_0_#000000]

Paquete visual

Las imágenes e iconos de este estilo son archivos. Úsalos tal cual, o léelos como una especificación y dibuja los tuyos propios en el mismo lenguaje.

Archivo	Contenido
pack/hero.svg	Placa de héroe, 800 por 600. Una imagen abstracta en el lenguaje visual del estilo.
pack/pattern.svg	Baldosa de patrón, 80 por 80. Se repite en ambas direcciones.
pack/icons.svg	Sprite de iconos: inicio, buscar, corazón, estrella, campana, usuario, correo, calendario, imagen, rayo, reproducir, marcar, cerrar, controles deslizantes.

• Iconos: contorno, trazo 2.5 en un campo de 24px, extremos cuadrados, uniones en inglete, contenedor: cuadrado. Usa: <svg class="icon"><use href="pack/icons.svg#home"/></svg>. Un icono toma currentColor.
• Familia de iconos: el sprite está extraído de Phosphor (Bold) por Phosphor Icons, licencia MIT. Razón: Una línea pesada con un peso contundente que coincide con los bordes gruesos. Es un sustituto de código abierto para una demostración. Para un producto, usa la biblioteca de iconos de la marca y elige la familia según las reglas a continuación.
• Tipo de visualización: peso 700, tracking -0.03em, interlineado 0.95, mayúsculas: ninguna.
• Pesos: visualización 700, subtítulo 700, cuerpo 500, negrita en texto 700, etiquetas y botones 700. El estilo usa 2 pesos (500, 700) y ningún otro. La visualización es 200 más pesada que el cuerpo. El acento es peso: una palabra más pesada es el acento, por lo que los pasos entre los pesos son claros.
• Tipo de cuerpo: 17px, interlineado 1.5.
• Página: héroe dividido, alineado a la izquierda, densidad compacta, inclinación de acento -1°.
• Color de texto: --color-text es solo para el campo de lectura principal. En cada campo, usa su token: --color-on-bg, --color-on-surface, --color-on-primary, --color-on-accent.

Cómo elegir un paquete de iconos

Un paquete de iconos es una tipografía para imágenes. Elígelo con el mismo cuidado que la cara de texto. Estas reglas son válidas tanto para un conjunto de código abierto como para una biblioteca con licencia.

1. El trazo coincide con el asta. Coloca un icono junto al texto del cuerpo a tamaño de texto. La línea del icono y el asta de una letra tienen el mismo peso.
2. Los terminales y las esquinas siguen el token de radio. Los extremos planos y las uniones en inglete van con un radio de cero. Los extremos redondos y las uniones redondas van con un radio suave.
3. El modo de relleno sigue la tecnología de la época. Las eras de impresión cortan formas sólidas. Las eras de pantalla con profundidad rellenan y sombrean la forma. Las interfaces de productos actuales dibujan un contorno.
4. Las metáforas no son más jóvenes que el estilo. Cada imagen es un objeto que la época conocía. Un icono con una metáfora posterior rompe el período.
5. Una familia, una cuadrícula. Todos los iconos provienen de una familia y una variante, dibujados en un campo. No mezcles familias en una superficie.
6. La familia cubre el producto. Enumera cada concepto que el producto necesita antes de comprometerte. Una familia que no tiene un icono para uno de ellos es la familia equivocada.
7. El color es un token. Un icono toma currentColor. Un segundo tono proviene de un token, no del archivo.
8. La licencia permite su uso. Lee la licencia del conjunto. Da crédito donde la licencia lo solicite. Un producto con una marca utiliza su biblioteca con licencia y aplica las mismas reglas para elegir la familia.

Alternativas de linaje

Cuando el usuario solicite una variación, no improvises. Mezcla hacia el vecino nombrado aquí y carga su habilidad.

• Si el usuario pide más tranquilo: muévete hacia flat-design (Diseño Plano). Reduce el borde a 1px, elimina la sombra desplazada y atenúa los rellenos al 60% de saturación; mantén los campos planos y la cuadrícula.

• Si el usuario pide más ordenado: muévete hacia swiss-international (Estilo Internacional Suizo). Reduce la paleta a negro, blanco y un rojo, establece un radio de 0px y texto alineado a la izquierda en una cuadrícula de 12 columnas; mantén las reglas de 2px.

• Si el usuario pide más parecido a una app: muévete hacia bento-grid-ui (UI de Cuadrícula Bento). Empaqueta el contenido en una cuadrícula rectangular de celdas de tamaño mixto con un espacio de 16px; mantén el borde de 3px y la sombra dura.

• Si el usuario pide más pulido: muévete hacia material-design (Material Design). Cambia a un radio de 8px, un borde de 1px y una sombra suave de 0 2px 4px rgba(0, 0, 0, 0.2); mantén un acento llamativo.

• Proviene de (ve aquí para una versión más ortodoxa): flat-design

• Rechaza (el polo opuesto; no mezcles): corporate-memphis