Bento grid: o novo hero do slop de IA em 2026

Abra nas suas abas as homepages das últimas dez startups de devtools que levantaram Series A. Conte quantos heros são um grid de tiles arredondados — uma célula larga em cima, duas ou três células quase quadradas embaixo, todo canto com raio de 1rem, toda superfície com um gradiente sutil pousado sobre vidro fosco. Você vai perder a conta lá pela sétima. Esse grid já tem nome. É o bento.

Antes ele significava algo específico. Hoje significa, na maioria das vezes, que uma IA montou isso — ou que um humano só viu coisas montadas por IA.

De onde ele veio de verdade

A Apple não inventou o bento grid, mas é por causa da Apple que sua designer conhece a palavra. Os slides da keynote da WWDC de junho de 2022 dispuseram os destaques de features em caixas de tamanhos diferentes — uma grande para o recurso principal, satélites menores para as specs de apoio — e a imprensa de design imediatamente recorreu à metáfora da marmita japonesa: compartimentos de tamanhos variados, cada um com uma coisa só, o conjunto lido como uma refeição equilibrada. Lá pelas páginas de marketing do iPhone 15 e pelos grids de features do macOS, o bento já era a linguagem oficial da casa para dizer "aqui tem um conjunto denso de features e a gente dirigiu artisticamente cada célula".

Essa última frase é a parte que todo mundo deixou cair. Os bentos da Apple são dirigidos por arte. Cada célula tem uma ilustração feita sob medida, um render custom, um corte ajustado na mão. O grid é uma moldura para o trabalho, não um substituto dele. A assimetria carrega peso: a célula grande é grande porque aquela feature importa mais, a foto sangra de um jeito específico porque alguém decidiu que devia ser assim.

Aí o negócio foi abstraído num primitivo de layout, e o trabalho escorreu pelo ralo.

A trajetória até virar padrão

O caminho da keynote ao slop é curto e rastreável.

Da Apple para a camada Dribbble. Poucos meses depois da WWDC 2022, "bento grid" virou uma tag no Dribbble com milhares de shots — a maioria grids vazios com gradientes de placeholder, conteúdo zero, cosplay puro de layout. A metáfora se desgrudou da refeição e virou uma forma.

Do Dribbble para o ecossistema de templates. Starter kits de Next.js e lojas de template do ecossistema Vercel passaram a entregar o padrão como uma seção pronta pra encaixar. Os componentes de marketing do Tailwind UI têm uma categoria literalmente chamada Bento grids — essa é a fonte canônica, copia-e-cola, de onde um milhão de sites puxou. O grid deixou de ser algo que você projetava e virou algo que você importava.

Dos templates para os geradores. Aqui está o ponto de inflexão. Quando o v0, o Lovable e o Bolt treinaram em cima dessa camada de template e passaram a fazer scaffolding contra ela, o bento virou *saída padrão*. Peça pro v0 uma "features section para uma landing page de SaaS" e existe uma chance real de você receber um grid-cols-3 de cards arredondados com uma célula hero em col-span-2, cada uma embrulhada num bg-gradient-to-br por cima de um backdrop-blur. Ninguém pediu um bento. O modelo recorreu à "features section moderna" de maior probabilidade, e a resposta de maior probabilidade é justamente aquilo de que o conjunto de treino estava saturado.

É esse o mecanismo inteiro por trás de por que todo site gerado por IA parece igual: o gerador devolve o centro estatístico do seu corpus, e o corpus são os marketplaces de template. O bento agora faz parte da mesma impressão digital que a Inter, o #3b82f6 e o gradiente azul-roxo.

O padrão exato

Aqui está a marca registrada, renderizada como o código em que ela quase sempre compila. Se você já auditou mais de cinco builds de IA, vai reconhecer cada linha.

<section class="grid grid-cols-1 md:grid-cols-3 gap-4 max-w-6xl mx-auto px-6">
  <!-- the obligatory big cell -->
  <div class="md:col-span-2 md:row-span-2 rounded-3xl p-8
              bg-gradient-to-br from-slate-900 to-slate-800
              border border-white/10 backdrop-blur-md
              shadow-2xl">
    <h3 class="text-2xl font-semibold tracking-tight">Lightning fast</h3>
    <p class="text-slate-400 mt-2">Built for speed and scale.</p>
  </div>

  <div class="rounded-3xl p-6 bg-gradient-to-br from-slate-900 to-slate-800
              border border-white/10 backdrop-blur-md">…</div>
  <div class="rounded-3xl p-6 bg-gradient-to-br from-slate-900 to-slate-800
              border border-white/10 backdrop-blur-md">…</div>
  <div class="rounded-3xl p-6 bg-gradient-to-br from-slate-900 to-slate-800
              border border-white/10 backdrop-blur-md">…</div>
</section>

As marcas que compõem isso, cada uma já sendo um indício por si só, juntas viram uma confissão:

• rounded-3xl em tudo. 1.5rem de raio em cada canto de cada célula. Não rounded-xl, não uma mistura — o mesmo travesseirinho uniforme em todos os tiles, porque o modelo não tem motivo nenhum pra variar.
• bg-gradient-to-br from-x-900 to-x-800. O gradiente diagonal de dois pontos entre dois tons vizinhos da *mesma* rampa de slate/zinc/neutral. slate-900 é #0f172a, slate-800 é #1e293b — um delta tão pequeno que produz um brilho quase imperceptível, que lê como "premium" numa thumbnail e como "nada" de perto. O mesmo reflexo documentado na assinatura do gradiente azul-roxo do Tailwind, só que dessaturado para a turma do dark mode.
• border border-white/10 + backdrop-blur-md. Glassmorphism por padrão. Raramente há algo *atrás* da célula pra borrar — o backdrop-blur é decoração de culto à carga, um filtro aplicado num fundo sólido onde ele não faz nada além de forçar o navegador a promover o elemento à própria camada de composição (pintar, borrar a camada de baixo, recompor) sem nenhum resultado visível. O tique inteiro é dissecado em glassmorphism e o indício do backdrop-blur.
• shadow-2xl só na célula hero. A célula grande ganha a sombra pesada pra "se destacar". Ela flutua acima de uma seção plana sem nenhuma lógica de fonte de luz.
• col-span-2 row-span-2. A única decisão estrutural do bloco inteiro, e é sempre a célula do canto superior esquerdo, sempre 2x2, porque esse é o exemplo canônico de todo tutorial.
• Ritmo interno idêntico. Toda célula: ícone, título em text-2xl font-semibold tracking-tight, uma linha em text-slate-400. O ponto inteiro do bento era ter conteúdo diferenciado por compartimento. O bento de IA tem o *mesmo* andaime de conteúdo em toda caixa. É uma marmita em que todo compartimento tem o mesmo arroz.

O indício profundo é esse último. Um bento de verdade merece a própria assimetria — a célula grande é grande porque guarda um screenshot do produto, um gráfico ao vivo, um vídeo; as células pequenas guardam uma estatística, um logo, uma citação. O bento de slop deixa uma célula maior e aí põe dentro dela o mesmo

+

de todas as outras. A forma diz "essas coisas têm pesos diferentes". O conteúdo diz que são todas iguais. Essa contradição é a impressão digital.

Onde você vai topar com ele na natureza

Sem citar nomes nem apontar dedo. Os *lugares onde o padrão aparece* são mortalmente consistentes:

• Landing pages de demo day de batches da YC. Cohorts da primavera de 2026, tema escuro, o bento de features sentado bem embaixo de um título text-6xl em Geist. Geist mais bento é uma combinação barulhenta o suficiente pra datar um site numa janela de seis meses — veja Geist, a nova Inter.
• SaaS que é wrapper de IA. Qualquer coisa que seja uma camada fininha por cima de uma API entrega o bento como sua seção de "capacidades da plataforma", porque o gerador que construiu o wrapper também construiu a página.
• Os próprios marketplaces de template. Busque "bento" em qualquer loja de template de Next.js e você recebe dezenas de kits quase idênticos. O ouroboros: templates alimentam geradores, geradores normalizam o padrão, o padrão normalizado é reempacotado como template novo.
• Sites de portfólio de devs que acabaram de descobrir o v0. O bento é o novo "tenho um hero escuro com uma bolha de gradiente" — o sinal universal de quem está publicando o padrão.

O movimento de diagnóstico: abra o DevTools, inspecione a seção e olhe a lista de classes de três células irmãs. Se elas forem idênticas byte a byte exceto pelo col-span, você está olhando pra um bento gerado. É a mesma leitura de cinco segundos coberta em lendo o CSS para auditar um site.

Alternativas, com ponto de vista

O bento não está proibido. Ele está *gasto como padrão*. A correção não é banir o grid; é tomar uma decisão de layout de verdade em vez de aceitar o autocomplete. Aqui está o que eu uso, e quando.

1. A coluna única editorial com uma âncora de verdade

A maioria das landing pages tem uma feature que importa e quatro que dão apoio. Um bento finge que são pares. Não são. Comece pela única — full-bleed, um asset forte (uma captura real do produto, um gráfico de verdade, um loop curto), espaço em branco generoso — e depois liste o resto como linhas tipográficas simples. Sem tiles.

<section class="max-w-3xl mx-auto px-6 space-y-24">
  <figure class="space-y-6">
    <img src="/real-product-capture.png" class="w-full" alt="…" />
    <figcaption class="text-lg leading-relaxed">…</figcaption>
  </figure>

  <ul class="divide-y divide-neutral-800">
    <li class="py-6 grid grid-cols-[8rem_1fr] gap-6 items-baseline">
      <span class="font-mono text-sm uppercase tracking-widest text-neutral-500">Sync</span>
      <p>…</p>
    </li>
    <!-- repeat -->
  </ul>
</section>

A linha de rótulo-e-corpo em grid-cols-[8rem_1fr] lê como uma ficha técnica ou uma revista bem diagramada. É impossível confundir com um bento porque não tem tile nem raio. Ela diz que alguém escolheu uma hierarquia.

2. Assimetria que é de fato assimétrica

Se você quer um grid, mereça a assimetria com conteúdo, não com col-span. Use um grid quebrado e deslocado em que as células tenham *formas genuinamente diferentes* ditadas pelo que está dentro delas — uma célula alta pra um mock vertical de celular, uma célula larga pra uma timeline, um quadradinho pra um número único. Varie o raio (rounded-sm na célula de dado, nenhum na célula de imagem). Varie o tratamento. No momento em que duas células diferem em mais do que só tamanho, a leitura de "grid gerado" evapora.

3. Largue o container de vez

O movimento mais subutilizado de 2026: nenhum card. Features como texto, bem diagramado, com uma cor de destaque que não seja #3b82f6 e uma tipografia que não seja Inter nem Geist. Tipo, espaço em branco e uma única régua de fio fino e deliberada fazem mais por "pensado" do que qualquer quantidade de backdrop-blur. O slop está no *reflexo de containerizar* — na crença de que todo pedaço de conteúdo precisa de uma caixa de vidro arredondada. Resista a isso e você já fez a maior parte do caminho de saída. Se você ainda não tem uma cor de destaque em mente, como escolher uma cor de destaque que não seja o azul do Tailwind é a próxima parada.

4. Se for manter o bento, quebre ele de propósito

Mantenha os compartimentos mas viole o template em três pontos específicos: (a) ponha a célula grande embaixo à direita, não no canto superior esquerdo, pra ela ser lida contra a memória muscular; (b) deixe uma célula sangrar pra fora da calha do grid ou sobrepor a vizinha; (c) dê a cada célula um *tipo de conteúdo* diferente, não um tamanho diferente do mesmo tipo de conteúdo. Um bento com uma métrica ao vivo, uma citação, um screenshot e um mapa é um bento. Um bento com quatro títulos é uma toalha de mesa.

O fio condutor de sair do slop de IA para uma assinatura é exatamente esse: a saída padrão nunca está errada, ela só é *média*, e média agora é um sinal de detecção. O bento foi de "grid de feature pensado da Apple" a "a forma que o v0 devolve quando não tem nada específico a dizer" em menos de quatro anos. O grid não piorou. A intenção foi extraída dele.

O teste

Antes de publicar um bento, faça uma pergunta a cada célula: *esse conteúdo sobreviveria a ser tirado da caixa e diagramado como texto puro?* Se a resposta for "sim, nada se perde", a caixa é decoração e o bento não está fazendo trabalho nenhum — você tem um grid de slop. Se a resposta for "não, o screenshot, o gráfico ou o número precisa da moldura", mantenha a célula.

Rode esse teste pelo grid inteiro. As células que reprovarem não deviam ser tiles. As células que passarem provavelmente nem precisavam combinar com o raio e o gradiente das outras, pra começar.

Uma marmita bento, a de verdade, é memorável porque cada compartimento guarda algo diferente e certo. O motivo de a versão de IA ler como slop é que ela manteve a caixa e esqueceu da refeição.