El hero oscuro zinc-950 es el nuevo "por defecto" de la IA en 2026

Abre diez landings de SaaS con ronda Serie A lanzadas en los últimos seis meses. Ocho cargan exactamente la misma pantalla: un fondo en algún punto entre #09090b y #0a0a0a, un titular blanco de 5xl a 7xl con tracking apretado, un subtítulo en un gris desaturado, un color de acento brillando detrás del H1 como un sol lejano, y un botón Get started con un borde de degradado sutil. El hero es oscuro. El hero es *siempre* oscuro ahora.

Hace dos años el valor por defecto que escupía la IA era el degradado azul-violeta sobre blanco: la firma from-blue-500 to-purple-600 de Tailwind de la que ya he escrito antes. Esa marca se volvió tan reconocible que los generadores, los prompts y los founders copiándose entre ellos migraron en bloque. El nuevo refugio seguro es el casi negro. El modo oscuro se lee como "empresa seria de infraestructura", esconde un sinfín de pecados de maquetación y, sobre todo, es lo que cualquier modelo produce hoy cuando le pides "un hero de SaaS limpio y moderno". La morralla no desapareció. Cambió de longitud de onda.

La paleta exacta a la que aterriza cualquier generador

Pídele a Claude, v0, Lovable o Bolt un hero oscuro de SaaS y obtendrás un abanico de valores asombrosamente estrecho. No "oscuro" en abstracto, sino estos tokens concretos de Tailwind, en esta disposición concreta:

/* The 2026 dark-default stack */
background:      #09090b;  /* zinc-950 — the canvas */
surface:         #18181b;  /* zinc-900 — cards, nav */
border:          #27272a;  /* zinc-800 — hairline borders */
heading:         #fafafa;  /* zinc-50  — never pure #fff */
body:            #a1a1aa;  /* zinc-400 — the subhead */
muted:           #71717a;  /* zinc-500 — captions, footer */
accent:          #6366f1;  /* indigo-500 — the one pop */

Eso es todo. Esa es toda la lógica cromática de la página. Que sea *zinc* en concreto y no slate, gray, neutral ni stone (las cinco escalas que trae Tailwind) merece una pausa. El zinc tiene un subtono frío azulado muy leve: zinc-950 es #09090b, donde el canal azul 0b se sitúa justo por encima del rojo y el verde 09. Parece más "diseñado" que un neutral plano (#0a0a0a, perfectamente equilibrado) y menos lúgubre que un slate (#020617, muy azulado). Se convirtió en el color base por defecto de shadcn/ui y, como shadcn es el monocultivo del diseño, el zinc viajó de polizón.

Esto no es una suposición sobre el gusto. Es un valor por defecto literalmente elegido por ti. Lanza el scaffold y mira:

$ npx shadcn@latest init
✔ Which color would you like to use as the base color?
  › Neutral
    Gray
  ❯ Zinc          # top of the list, pre-highlighted
    Stone
    Slate

Pulsa Enter y tu components.json queda con "baseColor": "zinc" para siempre. Millones de repos arrastran ya esa línea que nadie eligió. El valor por defecto se propagó por memoria muscular, no por decisión.

El acento rota un poco (índigo #6366f1, violeta #8b5cf6, esmeralda #10b981 o un cian #22d3ee), pero la jugada es idéntica: exactamente un tono saturado contra el zinc, usado para el botón principal, los hover de los enlaces y un resplandor. Los diseñadores lo llaman "oscuro de un solo acento" y es, de verdad, un sistema sólido. El problema no es el sistema. El problema es que el 80% de las páginas ejecutan el *mismo* sistema con los *mismos* tokens.

Por qué las máquinas tiran hacia el casi negro

Hay cuatro razones mecánicas, y ninguna es "porque queda mejor".

1. El modo oscuro perdona el mal espaciado. En una página blanca, cada elemento desalineado, cada hueco incoherente, cada sombra un pelín desviada grita. Los fondos claros no tienen dónde esconderse. Sobre #09090b, el contraste hace tanto trabajo pesado que una incoherencia torpe de padding de 18px frente a 24px se desvanece en el vacío. Los generadores producen maquetaciones estructuralmente mediocres; el modo oscuro es el camuflaje de esa mediocridad. El modelo ha aprendido, de hecho, que la salida oscura recibe menos quejas del tipo "esto se ve roto".

2. Los datos de entrenamiento se inclinaron hacia lo oscuro. Linear, Vercel, Resend, Clerk, Railway, Supabase: las landings que se capturaron, se subieron a Dribbble y se tuitearon como "metas de diseño" durante 2024 y 2025 eran abrumadoramente oscuras. Aliméntale a un modelo diez mil ejemplos de "landing de SaaS preciosa" donde la mayoría de las mejor valoradas son casi negras, y "landing de SaaS preciosa" *se convierte* en casi negra dentro de los pesos. No estás obteniendo gusto. Estás obteniendo el centro estadístico de la economía de las capturas de pantalla.

3. El texto blanco sobre oscuro cumple WCAG sin esfuerzo. #fafafa sobre #09090b da un ratio de contraste de 19:1: es imposible suspender una auditoría de accesibilidad. Sobre blanco, elegir un texto de cuerpo accesible pero que no resulte agresivo es una decisión real (¿#374151? ¿#4b5563?). Sobre oscuro, el texto de cuerpo zinc-400 sobre zinc-950 aterriza en 7,76:1, cómodamente por encima de AA, y se lee "suave" sin que el diseñador piense en ello. El camino de menor resistencia es además el que cumple.

4. Un solo acento es la forma más barata de parecer intencional. Un único neón contra el gris *se lee* como una decisión de diseño aunque no se haya tomado ninguna. El generador no tiene que construir una paleta, gestionar un color secundario ni equilibrar cálidos contra fríos. Elige un índigo, lo espolvorea sobre el CTA y la página parece "pensada". Es el equivalente visual de un tono de voz seguro que disimula el no tener nada que decir.

Si quieres sentir lo mecánico que es, lanza el prompt tú mismo y compara las salidas. El mismo bg-zinc-950, el mismo subtítulo text-zinc-400, la misma nav bg-gradient-to-b from-zinc-900, el mismo resplandor shadow-[0_0_120px] shadow-indigo-500/20. Catalogué esta convergencia como uno de los 73 patrones: el oscuro por defecto es ya el patrón cero.

Las cinco delatoras de un hero oscuro generado

Cuando audito un sitio en 30 segundos, los heroes oscuros se entregan rápido:

• El resplandor radial detrás del H1. Un radial-gradient o una mancha borrosa posicionada en absoluto, casi siempre indigo-500/20 o purple-600/30, plantada justo en el centro tras el titular. Es el equivalente en modo oscuro del degradado azul-violeta: un gesto por defecto de "que parezca premium" aplicado sin motivo.
• text-zinc-400 para todas las palabras que no son titular. Subtítulo, descripciones de features, pie de página: todo el mismo gris. Los diseñadores de verdad varían el peso y el color del texto de cuerpo según la jerarquía. Los generadores eligen un gris apagado y lo aplican en todas partes.
• El borde superior tenue que en realidad es un degradado. border-t border-white/10 más una fina línea bg-gradient-to-r from-transparent via-white/20 to-transparent. Vercel lo hizo primero y de forma preciosa; ahora está en cualquier barra de navegación.
• Nav fija con backdrop-blur-md sobre zinc-950/80. La cabecera de cristal translúcido: una delatora del backdrop-blur que he desmontado por su cuenta. Está bien aislada; a escala, es una huella dactilar.
• Geist o Inter, tracking-tight, 7xl. El titular es font-geist o Inter, tracking-tight (o tracking-tighter), text-7xl font-semibold. Ya defendí que Geist es la nueva huella de Inter: emparejado con zinc-950, es una firma casi segura de página generada.

Detecta tres de esas cinco y estás casi con total certeza ante una salida, no ante diseño.

El oscuro es bueno. El oscuro generado es el problema.

Quiero ser preciso: no hay nada malo en una landing oscura. El hero oscuro de Linear es una de las mejores landings de internet. El problema es que "hero oscuro de SaaS" ha colapsado en una sola plantilla, y publicar esa plantilla le dice a cualquier visitante que hoy ya ha visto otras cuatro pestañas que tiraste del valor por defecto. Así es como conservas el oscuro y pierdes la huella.

1. Aléjate del zinc-950 unos grados

El cambio con mayor retorno de todos. #09090b es la delatora. Empuja tu base hacia un tinte que ningún generador ponga por defecto:

/* Generated default */
--bg: #09090b;        /* zinc-950 — instantly recognized */

/* Warm near-black — feels like print, not infra */
--bg: #0c0a09;        /* stone-950, a hair of warmth */
--bg: #100e0c;        /* custom warm charcoal */

/* True ink — deeper, bluer, less "Tailwind" */
--bg: #06070a;        /* near-navy black */

/* Off-black with a green cast — distinctive, rare */
--bg: #0a0c0a;

Un carbón cálido #100e0c se lee de forma completamente distinta al zinc frío (póster de letterpress, no clon de Vercel) y el coste es un único valor hex personalizado. La sobreescritura es una sola línea; si usas shadcn ni siquiera tienes que salir de globals.css:

:root {
  --background: 24 22% 6%;   /* warm charcoal, HSL — was zinc's 240 10% 4% */
}

Configúralo una vez y no vuelvas a escribir zinc-950 nunca más.

2. Haz que el texto de cuerpo *no* sea un único gris plano

Sustituye el monótono text-zinc-400 por una escala pequeña y deliberada. Varía la luminosidad *y* la calidez según el rol:

--text-strong:  #f5f3f0;  /* warm white, not #fafafa */
--text-body:    #b8b2a8;  /* warm gray for paragraphs */
--text-muted:   #6b665e;  /* captions, metadata */

Los grises cálidos sobre negro cálido crean una cohesión que el zinc frío sobre frío nunca logra, y la diferencia se ve en la primera medio segundo. Inter y zinc son el mismo reflejo perezoso: uno para la tipografía, otro para el color, y el mismo esfuerzo mata a ambos.

3. Elimina el resplandor radial o gánatelo

Si hay un resplandor detrás de tu H1 y es indigo-500/20, bórralo. Si quieres luz en el hero, hazla direccional y física: una única fuente fuera de eje, una astilla cónica de bordes duros, un degradado con textura de grano, no el "blur premium" centrado por defecto. Mejor aún: sustituye el resplandor ambiental por un objeto real. Un render wireframe, una captura del producto inclinada 12° con una sombra real, una visualización de datos de verdad. El resplandor es decoración haciendo las veces de contenido. Gana el contenido.

4. Elige un acento que no esté en la estantería de Tailwind

El índigo #6366f1, el violeta #8b5cf6 y el esmeralda #10b981 son los tres acentos por defecto porque son las muestras -500 de Tailwind. Baja de la estantería:

/* Off-default accents that still pop on dark */
--accent: #ff6b35;   /* burnt orange — warm, rare on dark */
--accent: #d4ff3f;   /* acid lime — aggressive, memorable */
--accent: #f5d0c5;   /* dusty peach — soft, editorial */
--accent: #5eead4;   /* teal, indigo's hue shifted ~15° off-swatch */

Incluso desplazar el índigo #6366f1 a un #5b6cff o #7c5cff personalizado rompe el reconocimiento por coincidencia exacta. Un naranja quemado #ff6b35 sobre carbón cálido es una página que nadie ha visto cuatro veces hoy. Si quieres un método de verdad para elegir, escribí una pieza entera sobre cómo escoger un acento que no sea el azul de Tailwind.

5. Añade una cosa que el generador jamás produciría

Esta es la jugada que separa el diseño de la salida. Un generador produce la media. Así que añade lo no-medio: una asimetría, una decisión tipográfica, una textura. Pon el titular en una serif (Fraunces, Instrument Serif) contra el oscuro: editorial al instante, nada-shadcn al instante. Añade grano de película real con un overlay SVG feTurbulence al 4% de opacidad. Rompe la rejilla: deja que el texto del hero cuelgue del margen izquierdo y que el visual se desangre por el borde derecho. Tira de un acento con mix-blend-mode: difference que el modelo no tiene ningún motivo para producir. Una decisión genuina vale más que diez valores por defecto pulidos.

/* Grain overlay — texture the generators never add */
.grain::after {
  content: "";
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,...feTurbulence...");
  opacity: 0.04;
  mix-blend-mode: overlay;
  pointer-events: none;
}

El patrón de fondo

El oscuro por defecto es la misma enfermedad que el degradado azul-violeta, el texto de cuerpo en Inter, la tarjeta rounded-2xl, la nav con backdrop-blur: un generador que encuentra un óptimo local y toda la web amontonándose encima hasta que el óptimo se convierte en cliché. La solución nunca es "deja de usar el modo oscuro". Es la misma solución de siempre: toma al menos una decisión que el modelo no tomaría.

El casi negro es, de verdad, un lienzo potente. #09090b sacado tal cual de la config de Tailwind es una confesión de que dejaste decidir a la máquina. Los quince minutos que cuesta desplazar tu base fuera del zinc, construir una escala de gris cálido de tres pasos, cambiar el acento por algo distinto a la muestra por defecto y añadir una textura real son toda la distancia que separa "parece generado por IA" de "parece diseñado". Esa distancia es lo único que un visitante con cinco pestañas abiertas nota de verdad, y en 2026 todos los visitantes tienen cinco pestañas abiertas.

El hero es oscuro. Bien. Solo haz que sea *tu* oscuro.