# Bento grid

Também chamado de: layout bento box, UI bento, grade de keynote da Apple, tiles de grade de recursos  
Era: 2022 em diante (slides de eventos da Apple, depois toda landing page SaaS em 2023)  
Página: https://designforai.dev/pt/style/bento-grid

## Traços

- uma grade retangular de tiles em tamanhos mistos (1x1, 2x1, 2x2) com gutters iguais
- cada tile é um recurso autocontido: um título, um visual, uma estatística
- raio uniforme (16-24px) e gap uniforme (12-16px) seguram a bagunça
- os tiles alternam entre escuro, claro e um único preenchimento de acento
- o conteúdo dentro dos tiles é grande e escasso: um número, um ícone, um recorte de screenshot
- a grade é o hero; raramente há uma imagem hero separada
- o hover eleva ou escala levemente um tile; nada mais se move

Paleta: #0b0b0f página (variante escura) ou #f5f5f7 (clara), #1c1c22 tile, #ffffff tile claro, #3b82f6 tile de acento, #a1a1aa texto atenuado, #fafafa texto

Tipografia: Geist ou Manrope; títulos dos tiles 600 a 20-24px, estatísticas grandes 700 a 48-72px com -0.03em, legendas 400 a 14px

## Faça

- desenhe a grade com 4 ou 6 colunas no desktop e colapse para 1-2 no mobile; mantenha a ordem dos tiles significativa
- dê a cada tile exatamente uma mensagem; se precisar de duas, divida
- use o mesmo raio, gap e padding em todo tile, sem exceção

## Evite

- não coloque tiles só de texto em todo lugar; pelo menos um terço precisa de um visual
- não varie gutters nem raios entre tiles
- não empilhe duas grades bento em sequência; uma por seção da página

Conhecido por: Páginas de produto da Apple, página de recursos do Linear, Vercel, navegador Arc

## Semente CSS

```css
:root{--bg:#0b0b0f; --fg:#fafafa; --muted:#a1a1aa; --tile:#1c1c22; --accent:#3b82f6; --radius:20px; --gap:14px; --font:'Geist',sans-serif}
```

## Prompt

Construa a home como uma grade bento. Fundo da página #0b0b0f, texto #fafafa, atenuado #a1a1aa. Grade: CSS grid com 6 colunas e gap de 14px a 1200px, tiles ocupando células 2x1, 2x2, 3x1 e 1x1, colapsando para 2 colunas a 768px e 1 coluna a 480px. Cada tile: background #1c1c22, borda 1px rgba(255,255,255,0.06), border-radius 20px, padding 28px. Faça um tile em #3b82f6 com texto branco e um tile branco puro com texto #0b0b0f para contraste. Conteúdo do tile: um título 20px 600, uma linha de legenda 14px e ou uma estatística 64px 700 (-0.03em) ou um screenshot/ilustração recortado ancorado no canto inferior direito e cortado pelo raio do tile. Fonte Geist em tudo. Hover: translateY(-2px) e a borda clareia para rgba(255,255,255,0.14), 180ms ease-out. Nenhuma outra seção pode reusar a grade; abaixo dela use seções de texto simples.