Belleza y brutalismo: cómo diseñé blakecrosley.com en la intersección

Diseñé blakecrosley.com sin colores, sin degradados, sin ilustraciones y sin elementos decorativos. Solo tipografía blanca sobre negro absoluto (#000000), con capas de opacidad al 5%, 10%, 40% y 65% creando toda la jerarquía visual. El sitio obtiene 100/100 en rendimiento de Lighthouse y logra lo que denomino “belleza honesta”: claridad estructural con oficio preciso.¹

TL;DR

El brutalismo en diseño digital reduce las interfaces a honestidad estructural: tipografía cruda, cuadrículas visibles, decoración mínima. La belleza añade refinamiento: relaciones cromáticas armoniosas, espaciado preciso, microinteracciones. Los productos modernos más convincentes (Linear, Notion, Arc Browser) operan en la intersección. Construí blakecrosley.com en esa misma intersección, y este artículo documenta las decisiones específicas de CSS, lo que eliminé, y por qué la tensión entre honestidad y oficio produce mejores interfaces que cualquiera de los dos principios por separado.

Mi sistema de diseño: el brutalismo como base

La no-paleta de colores

La mayoría de los sistemas de diseño comienzan con una paleta de colores. El mío comienza con la ausencia de una:

:root {
  --color-bg-dark:        #000000;
  --color-bg-elevated:    #111111;
  --color-bg-surface:     #1a1a1a;
  --color-text-primary:   #ffffff;
  --color-text-secondary: rgba(255,255,255,0.65);
  --color-text-tertiary:  rgba(255,255,255,0.4);
  --color-border:         rgba(255,255,255,0.1);
  --color-border-subtle:  rgba(255,255,255,0.05);
  --color-accent:         #ffffff;
}

Sin colores de marca. Sin colores semánticos más allá de niveles de opacidad. Toda la jerarquía visual opera a través de cuatro niveles de transparencia: 100% (primario), 65% (secundario), 40% (terciario) y 10% (bordes estructurales). Esto es brutalista en principio: el material (luz sobre oscuridad) se utiliza directamente en lugar de decorarse.²

La decisión fue deliberada. Durante mis 16 estudios de diseño de productos, noté que los productos que más respetaba (Linear, Vercel, Raycast) usaban paletas contenidas donde la tipografía y el espaciado realizaban el trabajo jerárquico. Los productos con más de 8 colores semánticos frecuentemente usaban el color como sustituto de la claridad estructural.

La tipografía como jerarquía primaria

Sin color para transmitir jerarquía, la tipografía lo transmite todo:

:root {
  --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
                 "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --font-size-display:  5rem;     /* 80px - hero headlines */
  --font-size-7xl:      3.875rem; /* 62px */
  --font-size-base:     1rem;     /* 16px - body text */
  --font-size-xs:       0.75rem;  /* 12px - metadata */
}

Fuentes del sistema, no fuentes web personalizadas. Esta es tanto una decisión brutalista (usar el material nativo de la plataforma) como una decisión de rendimiento (cero latencia de carga tipográfica, contribuyendo a puntuaciones perfectas en Lighthouse). El tamaño de display (80px) con interletrado ajustado (-0.03em) otorga gravedad a los titulares sin decoración. El texto del cuerpo a 16px con interlineado generoso (1.7) prioriza la legibilidad sobre la densidad.³

El sistema de espaciado de 8 puntos

Cada valor de espaciado deriva de una base de 8 puntos:

:root {
  --spacing-xs:  0.5rem;  /* 8px */
  --spacing-sm:  1rem;    /* 16px */
  --spacing-md:  1.5rem;  /* 24px */
  --spacing-lg:  2rem;    /* 32px */
  --spacing-xl:  3rem;    /* 48px */
  --spacing-2xl: 4rem;    /* 64px */
  --spacing-3xl: 6rem;    /* 96px */
  --spacing-4xl: 8rem;    /* 128px */
}

Sin valores arbitrarios. Si un espaciado no existe en el sistema, el diseño está equivocado, no el sistema. Aprendí esto de la manera difícil cuando usé --spacing-2xs en un margen de subtítulo (un token que no existía) y la maquetación se rompió silenciosamente. La solución fue cambiar a --spacing-xs, no crear un nuevo token.⁴

Lo que eliminé (y por qué)

Sin degradados

Los degradados cumplen dos propósitos: interés visual y simulación de profundidad. En un sitio construido alrededor del contenido (artículos de blog, descripciones de proyectos), los degradados compiten con el contenido por la atención visual. Eliminé todos los degradados y dejé que el contenido fuera el interés visual.

Sin ilustraciones ni íconos

Sin SVGs decorativos, sin ilustraciones hero, sin bibliotecas de íconos. La fotografía sirve como el único elemento visual no tipográfico (fotos personales en la página de inicio). Cada foto tiene un contenedor con proporción 4/3 y solo border-radius — sin sombras, sin superposiciones, sin tratamientos de color.

Sin sombras (estado predeterminado)

Los elementos en estado predeterminado tienen cero sombra. Los estados hover añaden profundidad sutil:

.lab-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

Las sombras aparecen solo como retroalimentación funcional (este elemento es interactivo y usted está interactuando con él), nunca como decoración.

Sin modo claro

El sitio no tiene media query prefers-color-scheme. Opera exclusivamente en modo oscuro. Esta es una decisión deliberadamente intransigente: en lugar de mantener dos sistemas visuales e inevitablemente comprometer ambos, diseñé un solo sistema bien. El fondo negro absoluto (#000000 en lugar de #0a0a0a o #1a1a1a) otorga a la tipografía el máximo contraste.⁵

Donde entra la belleza

La estructura brutalista por sí sola produce hostilidad. La belleza en mi diseño proviene del oficio en la ejecución, no de la decoración:

Microinteracciones como retroalimentación funcional

Cada elemento interactivo tiene una transición, pero ninguna transición existe por placer estético:

:root {
  --transition-fast: 150ms ease;
  --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav a::after {
  transform: scaleX(0);
  transition: transform 0.25s ease;
}
.nav a:hover::after {
  transform: scaleX(1); /* Underline grows from left */
}

Los enlaces de navegación revelan un subrayado al pasar el cursor (funcional: confirma la interactividad). Las tarjetas de proyectos escalan a 1.08x (funcional: indica el área clicable). El menú hamburguesa móvil se anima hacia una X (funcional: comunica cambio de estado). Ninguna animación existe sin un propósito funcional.⁶

Animaciones de entrada para grupos de tarjetas

Las tarjetas entran con una animación escalonada de translateY(16px):

@keyframes socialCardIn {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

Esto cumple un propósito funcional: comunica que el contenido se ha cargado y dirige la atención hacia los elementos recién visibles. El escalonamiento (cada tarjeta retrasada 100ms) crea un ritmo que ayuda a los usuarios a recorrer el grupo. La animación es de 500ms con una curva cubic-bezier — lo suficientemente rápida para no retrasar la interacción, lo suficientemente suave para sentirse elaborada.

El encabezado con glassmorphism

El único elemento cercano a lo decorativo:

.header {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-overlay); /* rgba(0,0,0,0.8) */
}

El encabezado difuminado cumple un propósito funcional: indica que el contenido se desplaza detrás de la navegación, estableciendo el encabezado como una capa persistente. Pero el desenfoque también añade oficio visual — es uno de los pocos momentos donde el diseño prioriza la belleza junto a la función.

Productos que encuentran el mismo equilibrio

Linear: estructura brutalista, ejecución bella

La interfaz de gestión de proyectos de Linear es densa, orientada al teclado y asume usuarios profesionales. Sin ilustraciones, sin incorporación gradual. La estructura es brutalista. La ejecución es bella: tipografía precisa, tema oscuro armonioso, animaciones fluidas a 60fps. Cada píxel cumple un propósito. El propósito se cumple con oficio.⁷

Notion: bloques crudos, sistema refinado

Notion expone su modelo de datos subyacente (bloques) directamente a los usuarios. La honestidad estructural es brutalista. El refinamiento aparece en el diseño de interacción: arrastrar y soltar fluido, edición en línea responsiva y una paleta de comandos que hace que el sistema de bloques se sienta sin esfuerzo.⁸

Arc Browser: navegación brutalista, acabado bello

Arc expone el sistema subyacente de gestión de pestañas del navegador (pestañas verticales, espacios de trabajo, vistas divididas). La honestidad estructural es brutalista. La ejecución visual (temas con degradados, animaciones fluidas) hace que la gestión de pestañas sea agradable en lugar de clínica.⁹

El punto de equilibrio

El enfoque más efectivo utiliza principios brutalistas para la estructura y principios de belleza para la ejecución:

Conclusiones clave

Para diseñadores: - Utilice principios brutalistas para la estructura (maquetación, arquitectura de información, color) y principios de belleza para la ejecución (tipografía, espaciado, microinteracciones); la combinación produce interfaces que son honestas y agradables - Elimine cada elemento decorativo y pregunte qué se rompe; si nada se rompe, la decoración era innecesaria - Diseñe para un modo bien en lugar de dos modos adecuadamente; mi enfoque exclusivamente oscuro produce un sistema más coherente que un alternador claro/oscuro comprometido

Para desarrolladores: - Implemente tokens de diseño como propiedades personalizadas de CSS sin valores arbitrarios; si un espaciado no existe en el sistema, corrija el diseño en lugar de añadir un valor único - Trate las microinteracciones como retroalimentación funcional; una transición hover de 150ms comunica interactividad, mientras que una animación de entrada de 2 segundos no comunica nada útil

Para líderes de producto: - Adapte la posición estética al contexto del usuario; las herramientas profesionales se inclinan hacia lo brutalista, los productos de consumo se inclinan hacia lo bello, y los mejores productos encuentran la intersección

Referencias