Brutalism

El brutalismo web toma prestado el nombre de la arquitectura de hormigón visto: en vez de tapar el material, lo enseña. Aquí el material es el HTML — bordes duros, tipografías del sistema, enlaces subrayados en azul, cero degradados y cero sombras suaves.

No es descuido. Es una decisión de mostrar la estructura en lugar de esconderla bajo capas de estilo.

Cómo se ve

Archivo público 1.204 documentos. Sin cookies. Sin analítica. Sin JavaScript. Entrar → actualizado 2026-08-30

El CSS

Lo característico es lo que no hay:

src/styles/brutalism.css

.brutal {
  font-family: ui-monospace, "Courier New", monospace;
  color: #000;
  background: #fff;
  /* Bordes gruesos y sólidos, sin radio. */
  border: 3px solid #000;
  border-radius: 0;
  /* Sin difuminar: una sombra sólida desplazada. */
  box-shadow: 6px 6px 0 #000;
}

.brutal a {
  color: #0000ee; /* el azul por defecto del navegador, a propósito */
  text-decoration: underline;
}

.brutal button:hover {
  /* La interacción invierte, no atenúa. */
  color: #fff;
  background: #000;
}

Tres decisiones que definen el estilo:

Decisión	Efecto
border-radius: 0	Todo es rectangular; nada intenta ser un objeto
Sombra sin desenfoque	Profundidad declarada, no simulada
Tipografía del sistema o monoespaciada	Se ve “sin diseñar” a propósito

La ventaja que nadie menciona

El brutalismo es rápido. Sin degradados, sin desenfoques, sin sombras difuminadas y con tipografías del sistema, no hay fuentes que descargar ni composición cara. Una página brutalista bien hecha carga en una fracción de lo que carga una glassmorphista.

También suele ser accesible por accidente: el contraste negro sobre blanco es máximo, los enlaces se ven como enlaces y los bordes de los controles son inequívocos.

Cuándo usarlo

• Sí en portafolios, blogs personales, archivos, documentación, proyectos con postura editorial.
• Sí cuando la velocidad y la independencia importan más que la sofisticación visual.
• No en comercio electrónico o productos donde la confianza se construye con pulcritud: el estilo se lee como “sitio raro” para un público general.
• No como excusa para no diseñar. Un brutalismo bueno está tan compuesto como cualquier otro estilo; la diferencia está en el vocabulario, no en el esfuerzo.

Accesibilidad

Parte con ventaja, pero tiene dos trampas propias:

• El monoespaciado a tamaño pequeño cansa. Para textos largos conviene no bajar de 16 px y dar un line-height generoso (1.6 o más).
• Las mayúsculas sostenidas se leen peor. El text-transform: uppercase funciona en titulares cortos; en un párrafo entorpece la lectura y algunos lectores de pantalla deletrean palabras que interpretan como siglas.

src/styles/brutalism.css

.brutal :focus-visible {
  /* Coherente con el estilo y perfectamente visible. */
  outline: 4px solid #0000ee;
  outline-offset: 0;
}