bento-grid-ui

Bento Grid UI

Uma página é mais fácil de escanear quando cada ideia está em seu próprio compartimento e os compartimentos formam uma grade regular e justaposta.

Uma grade retangular de células arredondadas com spans mistos, cada uma contendo uma ideia, com pequenos espaços iguais entre elas. As páginas de recursos da Apple tornaram este o layout padrão de produtos a partir de 2022.

Período: 2022–presente · Era: Contemporânea e Espacial · Domínio: Design Gráfico e de UI · Também chamado: Bento Layout, Bento Box Grid, Modular Card Grid

Quando carregar esta habilidade

Carregue-a quando o usuário pedir: "bento", "bento grid", "bento box layout", "card grid", "feature grid", "modular cards", "apple-style features", "tiled layout", "dashboard tiles".

Bom para: páginas de recursos de produtos, landing pages SaaS, portfólios pessoais, dashboards de aplicativos, páginas de notas de versão.

Não use quando:

• O conteúdo é prosa longa, porque células com no máximo 30 palavras fragmentam um argumento.
• Os itens têm uma ordem estrita ou uma classificação que o leitor deve seguir de cima para baixo.
• O conteúdo é irregular ou esparso, porque uma grade com menos de 5 células deixa buracos visíveis.

Diretrizes do sistema

Ao gerar layouts de UI ou gráficos no estilo Bento Grid UI, você DEVE:

1. Dividir a página em uma grade de 4 ou 12 colunas e permitir que cada célula ocupe 1, 2 ou 3 colunas e 1 ou 2 linhas.
2. Manter um gap uniforme de 12px a 16px entre todas as células e nunca misturar tamanhos de gap.
3. Dar a cada célula um raio de 20px a 28px e usar o mesmo raio em todas as células de uma página.
4. Colocar uma mensagem em cada célula: um título de no máximo 8 palavras, um visual ou um número.
5. Fazer a célula de destaque ter 2 por 2 e preencher as outras células com 1 por 1 ou 2 por 1, de modo que os tamanhos indiquem a ordem de importância.
6. Preencher as células com 2 a 4 matizes de uma mesma família, mais uma ou duas células na cor de destaque.
7. Alinhar os conteúdos das células ao mesmo padding interno de 24px e ancorar o texto no canto superior esquerdo ou inferior esquerdo.

Barreiras de proteção

Cada linha abaixo quebra o estilo. Verifique sua saída contra a lista antes de retorná-la.

• NUNCA: Gaps de tamanhos diferentes entre células em uma mesma grade.
• NUNCA: Buracos vazios na grade que quebrem o retângulo.
• NUNCA: Células com raios de canto diferentes em uma mesma página.
• NUNCA: Várias mensagens ou chamadas para ação em uma célula.
• NUNCA: Mais de 8 células no primeiro viewport.
• NUNCA: Bordas pesadas ou sombras fortes que lutem contra o empilhamento.
• NUNCA: Parágrafos com mais de 30 palavras dentro de uma célula.

Perfil vetorial

Eixo	Pontuação	1 significa	5 significa
Ornamentação	■■□□□ 2/5	puro minimalismo	maximalista
Dimensionalidade	■■□□□ 2/5	estritamente 2D	3D / espacial completo
Rigidez da grade	■■■■■ 5/5	caótico / orgânico	grade matemática estrita
Realismo esqueuomórfico	■■□□□ 2/5	digital abstrato	material fotorrealista
Expressividade tipográfica	■■■□□ 3/5	neutro / invisível	experimental / ilustrativo

Mantenha essas pontuações. Se uma solicitação mover um eixo em 2 pontos ou mais, você saiu do estilo: vá para "Fallbacks de linhagem".

Lógica espacial e de grade

• Mecânica da grade: Uma grade de 4 colunas em desktop com gaps de 16px e linhas de 200px a 280px; células ocupam 1 a 3 colunas e 1 a 2 linhas, e a grade se colapsa para 1 ou 2 colunas abaixo de 768px.
• Proporção de espaço em branco: Gaps ocupam 5–8% da área; o espaço aberto vai para dentro das células, onde o padding é de 24px a 32px; a escala de espaçamento é 8, 12, 16, 24, 32 e 64px.
• Regras de alinhamento: As bordas das células se alinham à grade em ambos os eixos; o texto dentro de uma célula é alinhado à esquerda e ancorado no topo ou na base; todo o bloco bento é centralizado em um contêiner de 1120px a 1280px.
• Geometria do contêiner: As células são retângulos arredondados com raio de 24px e sem margem externa; as proporções das células são 1:1, 2:1 e 1:2, e os visuais internos são cortados com o mesmo raio.

Tipografia

• Classificações: sans neo-grotesca · sans geométrica
• Tracking: Tamanhos de exibição levam -0.03em; corpo fica em 0; legendas pequenas levam +0.01em.
• Entrelinha: Exibição 1.05 a 1.15; corpo 1.45; legendas 1.3.
• Regras de hierarquia:
  • Defina o título da célula de destaque em 40px a 56px, outros títulos em 20px a 28px e legendas em 14px.
  • Use peso 600 para títulos e 400 para legendas; use uma cor suave com 4.5:1 para linhas secundárias.
  • Limite um título a 8 palavras e uma legenda a 20 palavras, porque a célula tem pouco espaço.
  • Combine um número grande em 64px ou mais com uma legenda de 14px para cada métrica chave.

Pares de fontes

Exibição	Corpo	Nota
Inter Tight	Inter	Tamanhos de exibição Tight para títulos curtos de células.
Geist	Geist	Uma única família nos pesos 400, 500 e 600.
Plus Jakarta Sans	Inter	Uma face de exibição mais quente para produtos de consumo.

Cor e iluminação

• Estrutura da paleta: Uma página neutra, células em dois a quatro matizes de uma mesma família com baixa saturação, e uma ou duas células de destaque que cobrem cerca de 15% da grade.
• Regras de contraste: Tinta na Célula dá cerca de 17:1 e Grafite na Célula dá cerca de 5:1; texto branco no Azul de Destaque dá cerca de 4.7:1, o que passa WCAG AA para texto do corpo; mantenha cada par de células em 4.5:1 ou melhor.
• Tratamento de superfície: Preenchimentos planos ou quase planos; as células podem conter uma fotografia, um render de produto ou um gradiente de dois matizes próximos, e uma célula nunca mistura mais de um tipo de superfície.
• Luz e sombra: Principalmente nenhuma; uma sombra opcional 0 1px 2px rgba(0, 0, 0, 0.06) ou uma borda de 1px rgba(0, 0, 0, 0.06) separa células brancas da página.

Paleta

Nome	Hex	Função
Página	#F5F5F7	fundo da página
Célula	#FFFFFF	preenchimento padrão da célula
Matiz de Célula	#E8E8ED	preenchimento secundário da célula
Tinta	#1D1D1F	texto
Grafite	#6E6E73	texto secundário
Azul de Destaque	#0071E3	célula de destaque e links
Noite	#000000	preenchimento de célula escura

Materialidade e textura

• Simulação de superfície: Nenhuma; as células leem como compartimentos de uma lancheira laqueada, mas a superfície é cor plana ou imagem e não imita nenhum material.
• Regras de borda: Sem borda por padrão; uma borda sólida de 1px rgba(0, 0, 0, 0.06) aparece onde uma célula branca fica sobre uma página branca; modo escuro usa 1px rgba(255, 255, 255, 0.1).
• Desfoque e elevação: Desfoque é 0px por padrão; elevação é limitada a uma sombra 0 1px 2px na página e uma elevação 0 12px 32px rgba(0, 0, 0, 0.12) no hover.

Ornamentação e iconografia

• Iconografia: Ícones simples com traço de 1.5px a 2px e pontas redondas em 24px a 32px, em Tinta ou branco em células de destaque; no máximo um ícone por célula.
• Ilustração: Renders de produto, capturas de tela de UI e números grandes, cortados no raio da célula; gradientes abstratos preenchem células vazias.
• Elementos decorativos: célula de destaque em 2 por 2 · numerais de métricas superdimensionados · recortes de capturas de tela de UI · pílulas de tags · células de gradiente

Movimento e interatividade

• Nascido na tela: sim
• Física de transição: Células entram em um escalonamento de 40ms a 60ms, aparecendo e subindo 12px; no hover uma célula escala para 1.02 e sua sombra se aprofunda; vizinhos não se movem.
• Easing: cubic-bezier(0.25, 0.1, 0.25, 1)
• Duração (ms): 350
• Hover e ativo: Hover escala a célula para 1.02 e adiciona uma sombra 0 12px 32px rgba(0, 0, 0, 0.12); ativo escala para 0.98; foco adiciona um anel Azul de Destaque de 2px com deslocamento de 2px.

Primer de código e tokens

Defina data-style="bento-grid-ui" no elemento raiz e cole os tokens. O arquivo tokens.css tem os mesmos tokens e um conjunto de regras de referência.

[data-style="bento-grid-ui"] {
  --color-bg: #F5F5F7;
  --color-surface: #FFFFFF;
  --color-text: #1D1D1F;
  --color-muted: #6E6E73;
  --color-primary: #1D1D1F;
  --color-accent: #0071E3;
  --color-border: rgba(0, 0, 0, 0.06);
  --font-sans: "Inter", system-ui, sans-serif;
  --font-display: "Inter Tight", "Inter", system-ui, sans-serif;
  --border-radius: 24px;
  --border-width: 1px;
  --shadow-elevation: 0 1px 2px rgba(0, 0, 0, 0.06);
  --backdrop-filter: none;
  --space-unit: 8px;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration: 350ms;
  --grid-gap: 16px;
  --cell-padding: 24px;
  --color-on-bg: #1D1D1F;
  --color-on-surface: #1D1D1F;
  --color-on-primary: #F5F5F7;
  --color-on-accent: #FFFFFF;
  --color-muted-on-bg: #6E6E73;
  --color-muted-on-surface: #6E6E73;
  --color-link: #1D1D1F;
  --color-link-on-surface: #0071E3;
  --display-weight: 600;
  --subhead-weight: 500;
  --body-weight: 400;
  --strong-weight: 600;
  --label-weight: 500;
  --display-tracking: -0.03em;
  --display-leading: 1.05;
  --display-case: none;
  --body-leading: 1.5;
  --body-size: 16px;
  --icon-stroke: 1.75;
}

Padrões Tailwind:

Elemento	Classes
página	bg-[#F5F5F7] text-[#1D1D1F] font-sans antialiased p-4 md:p-8
grade	mx-auto grid max-w-6xl grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 auto-rows-[240px]
cartão	rounded-3xl border border-black/[0.06] bg-white p-6 shadow-[0_1px_2px_rgba(0,0,0,0.06)] transition duration-[350ms] hover:scale-[1.02] hover:shadow-[0_12px_32px_rgba(0,0,0,0.12)]
cartão de destaque	rounded-3xl bg-[#0071E3] p-8 text-white sm:col-span-2 sm:row-span-2
título	font-semibold text-2xl leading-[1.1] tracking-[-0.03em]

Pacote visual

As imagens e ícones deste estilo são arquivos. Use-os como estão, ou leia-os como uma especificação e desenhe os seus próprios na mesma linguagem.

Arquivo	Conteúdo
pack/hero.svg	Placa hero, 800 por 600. Uma imagem abstrata na linguagem visual do estilo.
pack/pattern.svg	Ladrilho de padrão, 80 por 80. Repete em ambas as direções.
pack/icons.svg	Sprite de ícones: home, search, heart, star, bell, user, mail, calendar, image, bolt, play, check, close, sliders.

• Ícones: contorno, traço 1.75 em um campo de 24px, pontas redondas, junções redondas, contêiner: arredondado. Use: <svg class="icon"><use href="pack/icons.svg#home"/></svg>. Um ícone pega currentColor.
• Família de ícones: o sprite é cortado do Lucide (Regular) por Lucide Contributors, licença ISC. Motivo: Uma linha redonda simples em um peso: discreta em uma célula, o padrão das interfaces de produtos atuais. É um substituto de código aberto para uma demonstração. Para um produto, use a biblioteca de ícones da marca e escolha a família pelas regras abaixo.
• Tipo de exibição: peso 600, tracking -0.03em, entrelinha 1.05, caixa: nenhuma.
• Pesos: exibição 600, subtítulo 500, corpo 400, negrito no texto 600, rótulos e botões 500. O estilo usa 3 pesos (400, 500, 600) e nenhum outro. A exibição é 200 mais pesada que o corpo. O destaque é o tamanho: uma palavra maior é o destaque, então os pesos permanecem poucos.
• Tipo de corpo: 16px, entrelinha 1.5.
• Página: hero empilhado, alinhado à esquerda, densidade compacta, inclinação de destaque 0°.
• Cor do texto: --color-text é apenas para o campo de leitura principal. Em cada campo, use seu token: --color-on-bg, --color-on-surface, --color-on-primary, --color-on-accent.

Como escolher um pacote de ícones

Um pacote de ícones é uma tipografia para imagens. Escolha-o com o mesmo cuidado que a face de texto. Estas regras valem para um conjunto de código aberto e para uma biblioteca licenciada.

1. O traço combina com a haste. Coloque um ícone ao lado do texto do corpo no tamanho do texto. A linha do ícone e a haste de uma letra têm o mesmo peso.
2. Terminais e cantos seguem o token de raio. Pontas retas e junções em ângulo reto vão com um raio de zero. Pontas redondas e junções redondas vão com um raio suave.
3. O modo de preenchimento segue a tecnologia da era. Eras de impressão cortam formas sólidas. Eras de tela com profundidade preenchem e sombreiam a forma. As interfaces de produtos atuais desenham um contorno.
4. As metáforas não são mais jovens que o estilo. Cada imagem é um objeto que a época conhecia. Um ícone com uma metáfora posterior quebra o período.
5. Uma família, uma grade. Todos os ícones vêm de uma família e uma variante, desenhados em um campo. Não misture famílias em uma superfície.
6. A família cobre o produto. Liste cada conceito que o produto precisa antes de se comprometer. Uma família que não tem ícone para um deles é a família errada.
7. A cor é um token. Um ícone pega currentColor. Um segundo tom vem de um token, não do arquivo.
8. A licença permite o uso. Leia a licença do conjunto. Dê crédito onde a licença pedir. Um produto com uma marca usa sua biblioteca licenciada e aplica as mesmas regras para escolher a família.

Fallbacks de linhagem

Quando o usuário pedir uma variação, não improvise. Misture-se em direção ao vizinho nomeado aqui e carregue sua habilidade.

• Se o usuário pedir mais ordenado: mova-se em direção a swiss-international (Estilo Internacional Suíço). Defina o raio para 0px, remova os preenchimentos das células e divida as células com regras de 1px; mantenha a grade de 12 colunas e a escala tipográfica.

• Se o usuário pedir mais vítreo: mova-se em direção a glassmorphism (Glassmorphism). Preencha as células com rgba(255, 255, 255, 0.18) e backdrop-filter blur(20px) sobre uma página gradiente; mantenha os gaps e o raio.

• Se o usuário pedir mais ousado: mova-se em direção a neo-brutalism-ui (Neo-Brutalismo UI). Adicione uma borda preta de 3px e uma sombra 4px 4px 0 0 #000000, e preencha as células com matizes planos e fortes; mantenha a grade e o gap de 16px.

• Se o usuário pedir mais plano: mova-se em direção a flat-design (Flat Design). Remova as sombras e bordas, e use preenchimentos sólidos de células sem fotografia; mantenha o raio de 24px e o gap.

• Veio de (vá aqui para uma versão mais ortodoxa): flat-design, swiss-international

• Mistura bem com: glassmorphism, swiss-international

• Mais próximo por perfil vetorial: bauhaus, material-design, swiss-international

Alvo emocional

Curiosidade ordenada: o espectador sente que o produto é organizado, compacto e fácil de escanear em segundos.

Palavras-chave: limpo · modular · escaneável · organizado · moderno · premium · focado no produto · layout de grade · ui kit · design system