Maximalism

El maximalismo es la respuesta a que todo el software se parezca: más color, más tipografías, más capas, más textura. La apuesta es la memoria — que alguien recuerde la interfaz al día siguiente.

La diferencia entre maximalismo y desorden es que el primero está compuesto: hay jerarquía, solo que expresada con abundancia en vez de con vacío.

Cómo se ve

Edición limitada Hazlo. Ruidoso. tres tipografías, dos acentos, cero disculpas Quiero uno

Cómo se compone sin que sea ruido

Tres reglas hacen casi todo el trabajo:

1. Una sola zona de caos. El fondo puede tener degradados y formas; el bloque de contenido se mantiene ordenado. Si todo compite, nada destaca.

2. Jerarquía por contraste extremo, no por acumulación. El título va en 2.1 rem y peso 900; el texto de apoyo en 0.8 rem monoespaciado. Ese salto es el que ordena la lectura.

3. Tipografías con papeles distintos. Tres familias como máximo, y cada una con una función fija: una para titular, una para texto, una para detalle. Si dos hacen lo mismo, sobra una.

src/styles/maximalism.css

.hero-max {
  background-color: #150d2e;
  background-image:
    radial-gradient(circle at 15% 20%, rgb(236 72 153 / 0.45), transparent 45%),
    radial-gradient(circle at 85% 75%, rgb(250 204 21 / 0.35), transparent 45%);
}

.titular-max {
  font-size: clamp(2rem, 6vw, 4rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.boton-max {
  color: #150d2e;
  background: #f472b6;
  border: 2px solid #150d2e;
  /* Sombra dura, sin difuminar: el recurso más reconocible del estilo. */
  box-shadow: 5px 5px 0 #facc15;
}

La sombra dura (box-shadow sin desenfoque) es la firma del estilo y además es barata: no cuesta nada al navegador, a diferencia de un desenfoque.

Cuándo usarlo

• Sí en páginas de aterrizaje, portafolios, lanzamientos, campañas, productos de nicho con personalidad.
• Sí cuando el objetivo es que te recuerden, no que completes un formulario.
• No en la parte de la aplicación donde la gente trabaja. Un maximalismo bonito en la portada y un panel sobrio dentro es una combinación perfectamente válida.
• No si no hay alguien con criterio visual manteniéndolo: se degrada rápido cuando cada persona añade su color.

Accesibilidad

Es donde más fácil se rompe, y el problema casi nunca es el color de fondo sino el texto encima de un degradado:

• Comprueba el contraste en la zona más clara del fondo, no en el promedio. Un texto blanco sobre el degradado rosa-amarillo del ejemplo falla justo donde el amarillo es más intenso.
• Si el fondo tiene mucha variación, pon una capa de color sólido semitransparente debajo del texto.
• Los tamaños grandes ayudan: WCAG permite 3:1 en texto grande (18.66 px en negrita o 24 px normal).
• Las animaciones de fondo tienen que respetar prefers-reduced-motion.

src/styles/maximalism.css

/* Capa de apoyo para garantizar contraste sobre un fondo variable. */
.texto-sobre-degradado {
  background: rgb(21 13 46 / 0.7);
  padding: 1rem 1.5rem;
  border-radius: 8px;
}