zinc-950: o hero escuro que a IA cospe por padrão em 2026

Abra dez landing pages de SaaS Series-A lançadas nos últimos seis meses. Oito delas carregam na mesma tela: um fundo em algum ponto entre #09090b e #0a0a0a, um headline branco de 5xl a 7xl num tracking apertado, um subtítulo num cinza dessaturado, uma única cor de destaque brilhando atrás do H1 como um sol distante, e um botão Get started com uma borda em gradiente sutil. O hero é escuro. O hero é *sempre* escuro agora.

Dois anos atrás o padrão gerado por IA era o gradiente azul-roxo no branco — a assinatura from-blue-500 to-purple-600 do Tailwind sobre a qual eu já escrevi antes. Esse vício ficou tão notório que os geradores, os prompts e os founders se copiando uns aos outros migraram todos. O novo porto seguro é o quase-preto. Dark mode passa a ideia de "empresa séria de infra", esconde uma multidão de pecados de layout e — o ponto crítico — é o que todo modelo produz hoje quando você pede "um hero de SaaS limpo e moderno". O slop não foi embora. Ele só mudou de comprimento de onda.

A paleta exata em que todo gerador cai

Peça pro Claude, pro v0, pro Lovable ou pro Bolt um hero escuro de SaaS e você recebe um conjunto de valores notavelmente estreito. Não "escuro" no abstrato — esses tokens específicos do Tailwind, nesse arranjo específico:

/* 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 */

É isso. É toda a lógica de cor da página. O motivo de ser *zinc* especificamente, e não slate, gray, neutral ou stone — sendo que o Tailwind entrega os cinco — merece uma pausa. O zinc tem um leve subtom azul-frio: zinc-950 é #09090b, onde o canal azul 0b fica um degrau acima do vermelho e do verde 09. Parece mais "projetado" que o neutral chapado (#0a0a0a, perfeitamente balanceado) e menos dramático que o slate (#020617, bem azulado). Ele virou a cor-base padrão do shadcn/ui e, como o shadcn é a monocultura de design, o zinc pegou carona.

Isso não é um palpite sobre gosto. É um padrão literalmente selecionado por você. Rode o scaffold e observe:

$ 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

Aperte Enter e seu components.json passa a marcar "baseColor": "zinc" para sempre. Milhões de repositórios hoje carregam aquela linha que ninguém escolheu. O padrão se propagou por memória muscular, não por decisão.

O accent gira um pouquinho — indigo #6366f1, violet #8b5cf6, emerald #10b981 ou um cyan #22d3ee — mas o movimento é idêntico: exatamente um tom saturado contra o zinc, usado no botão primário, nos hovers de link e num glow. Designers chamam isso de "one-accent dark" e é, de verdade, um sistema sólido. O problema não é o sistema. O problema é que 80% das páginas rodam o *mesmo* sistema com os *mesmos* tokens.

Por que as máquinas correm pro quase-preto

Existem quatro razões mecânicas, e nenhuma delas é "porque fica melhor".

1. Dark mode perdoa espaçamento ruim. Numa página branca, cada elemento desalinhado, cada gap inconsistente, cada sombra ligeiramente errada grita. Fundos claros não têm onde se esconder. Em #09090b, o contraste carrega tanto peso sozinho que uma inconsistência boba de padding de 18px contra 24px some no vazio. Geradores produzem layouts estruturalmente medíocres; dark mode é a camuflagem dessa mediocridade. O modelo basicamente aprendeu que output escuro recebe menos follow-up do tipo "isso parece quebrado".

2. Os dados de treino penderam pro escuro. Linear, Vercel, Resend, Clerk, Railway, Supabase — as landing pages que foram printadas, postadas no Dribbble e tuitadas como "meta de design" ao longo de 2024-2025 eram esmagadoramente escuras. Alimente um modelo com dez mil exemplos de "landing page de SaaS linda" onde a maioria das mais bem avaliadas é quase-preta, e "landing page de SaaS linda" *vira* quase-preta nos pesos. Você não está recebendo gosto. Está recebendo o centro estatístico da economia de prints.

3. Texto branco sobre escuro bate o WCAG sem esforço. #fafafa em #09090b dá uma razão de contraste de 19:1 — não tem como reprovar numa auditoria de acessibilidade. No branco, escolher um texto de corpo acessível mas que não machuque os olhos é uma decisão de verdade (#374151? #4b5563?). No escuro, corpo de texto zinc-400 sobre zinc-950 chega a 7.76:1, confortavelmente acima do AA, e lê como "suave" sem o designer pensar nisso. O caminho de menor resistência é também o que está em conformidade.

4. Um accent é o jeito mais barato de parecer intencional. Um único neon contra o cinza *lê* como decisão de design mesmo quando nenhuma decisão foi tomada. O gerador não precisa montar uma paleta, gerenciar uma cor secundária ou equilibrar quente contra frio. Ele escolhe um indigo, salpica no CTA, e a página parece "pensada". É o equivalente visual de um tom de voz confiante encobrindo o fato de não ter nada a dizer.

Se você quer sentir o quão mecânico isso é, rode o prompt você mesmo e faça o diff dos outputs. Mesmo bg-zinc-950, mesmo subtítulo text-zinc-400, mesmo nav bg-gradient-to-b from-zinc-900, mesmo glow shadow-[0_0_120px] shadow-indigo-500/20. Catalogue essa convergência como um dos 73 padrões — dark-default agora é o padrão zero.

Os cinco sinais mortais de um hero escuro gerado

Quando eu audito um site em 30 segundos, os heroes escuros se entregam rápido:

• O glow radial atrás do H1. Um radial-gradient ou um blob borrado posicionado em absolute, quase sempre indigo-500/20 ou purple-600/30, plantado no centro exato atrás do headline. É o equivalente do gradiente azul-roxo em dark mode — um gesto padrão de "faz parecer premium" aplicado sem razão.
• text-zinc-400 em toda palavra que não é heading. Subtítulo, descrições de feature, footer — tudo o mesmo cinza. Designers de verdade variam peso e cor do corpo conforme a hierarquia. Geradores escolhem um cinza apagado e aplicam em todo lugar.
• A borda superior tênue que na verdade é um gradiente. border-t border-white/10 mais um fio bg-gradient-to-r from-transparent via-white/20 to-transparent. A Vercel fez primeiro e fez lindamente; agora está em toda barra de nav.
• Nav fixa com backdrop-blur-md sobre zinc-950/80. O header de vidro translúcido — um vício de backdrop-blur que eu já desmontei por conta própria. Tranquilo isolado, uma digital em escala.
• Geist ou Inter, tracking-tight, 7xl. O headline é font-geist ou Inter, tracking-tight (ou tracking-tighter), text-7xl font-semibold. Eu já defendi que Geist é a nova digital do Inter — pareado com zinc-950, é assinatura quase certa de página gerada.

Identifique três desses cinco e você está quase certamente olhando para output, não para design.

Escuro é bom. Escuro gerado é que é o problema.

Quero ser preciso: não há nada de errado com uma landing page escura. O hero escuro da Linear é uma das melhores landing pages da internet. A questão é que "hero escuro de SaaS" colapsou num único template, e entregar esse template avisa a todo visitante que já viu outras quatro abas hoje que você foi no padrão. Veja como manter o escuro e perder a digital.

1. Saia do zinc-950 por alguns graus

A mudança de maior alavancagem. #09090b é o vício. Empurre sua base para um tom em que o gerador de ninguém cai por padrão:

/* 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;

Um carvão quente #100e0c lê de um jeito completamente diferente do zinc frio — pôster de tipografia em letterpress, não clone de Vercel — e o custo é um valor hex custom. O override é uma única linha; se você está no shadcn, nem precisa sair do globals.css:

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

Configure uma vez e nunca mais digite zinc-950.

2. Faça o corpo de texto *não* ser um único cinza chapado

Troque o text-zinc-400 monótono por uma escala pequena e deliberada. Varie a luminosidade *e* o calor conforme o papel:

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

Cinzas quentes sobre preto quente criam uma coesão que o zinc frio-sobre-frio nunca cria, e a diferença aparece no primeiro meio segundo. Inter e zinc são o mesmo reflexo preguiçoso — um pra tipo, outro pra cor — e o mesmo esforço mata os dois.

3. Mate o glow radial ou mereça-o

Se tem um glow atrás do seu H1 e ele é indigo-500/20, apague. Se você quer luz no hero, faça-a direcional e física — uma única fonte fora de eixo, uma lasca cônica de borda dura, um gradiente texturizado com grão — não o "blur premium" centralizado padrão. Melhor ainda: troque o glow ambiente por um objeto real. Um render em wireframe, um screenshot do produto inclinado a 12° com sombra de verdade, uma visualização de dados de fato. O glow é decoração ocupando o lugar de conteúdo. Conteúdo ganha.

4. Escolha um accent que não esteja na prateleira do Tailwind

Indigo #6366f1, violet #8b5cf6 e emerald #10b981 são os três accents padrão porque são as swatches -500 do Tailwind. Saia da prateleira:

/* 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 */

Mesmo só empurrar o indigo #6366f1 para um custom #5b6cff ou #7c5cff já quebra o reconhecimento por correspondência exata. Um laranja queimado #ff6b35 sobre carvão quente é uma página que ninguém viu quatro vezes hoje. Se você quer um método de verdade para escolher, escrevi um texto inteiro sobre escolher um accent que não seja o azul do Tailwind.

5. Adicione uma coisa que o gerador nunca produziria

Esse é o movimento que separa design de output. Um gerador produz a média. Então adicione o fora-da-média: uma assimetria, uma decisão tipográfica, uma textura. Coloque o headline numa serifada (Fraunces, Instrument Serif) contra o escuro — instantaneamente editorial, instantaneamente não-shadcn. Adicione grão de filme real via um overlay SVG feTurbulence a 4% de opacidade. Quebre o grid: deixe o texto do hero sair pela margem esquerda e o visual sangrar pela borda direita. Vá atrás de um accent com mix-blend-mode: difference que o modelo não tem motivo nenhum para produzir. Uma decisão genuína vale mais que dez padrões polidos.

/* 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;
}

O padrão maior

Dark-default é a mesma doença do gradiente azul-roxo, do corpo de texto em Inter, do card rounded-2xl, da nav com backdrop-blur — um gerador encontrando um ótimo local e a web inteira pulando em cima até o ótimo virar clichê. A correção nunca é "para de usar dark mode". É a mesma de sempre: tome pelo menos uma decisão que o modelo não tomaria.

Quase-preto é, de fato, uma tela forte. #09090b direto do config do Tailwind é uma confissão de que você deixou a máquina decidir. Os quinze minutos que leva para tirar sua base do zinc, montar uma escala de cinza quente em três passos, trocar o accent da swatch padrão e adicionar uma textura real são todo o abismo entre "parece gerado por IA" e "parece projetado". Esse abismo é a única coisa que um visitante com cinco abas abertas de fato percebe — e em 2026, todo visitante tem cinco abas abertas.

O hero é escuro. Tudo bem. Só faça com que seja o *seu* escuro.