Sistema de Layout Bento Grid
Propósito
O Sistema de Layout Bento Grid fornece uma metodologia para organizar conteúdos díspares (como métricas-chave de desempenho, ilustrações visuais, widgets interativos, citações e teasers de recursos de produto) em uma grade modular e unificada. Inspirado nas tradicionais bento boxes japonesas, ele estabelece um equilíbrio assimétrico em alturas e larguras variadas de células. Este sistema resolve o problema de fragmentação visual em dashboards, landing pages e portfólios, aplicando regras proporcionais rigorosas, padding interno consistente e escalas tipográficas estruturadas. Ele transforma o que poderia facilmente se tornar um layout caótico em uma hierarquia visual polida, escaneável e acessível.
Casos de Uso
- Vitrines de Recursos SaaS: Apresentar uma mistura diversa de capacidades do produto, estatísticas de desempenho, integrações de sistema e prévias interativas de UI em uma única seção de landing page.
- Dashboards de Dados e Métricas: Agrupar indicadores-chave de desempenho (KPIs), gráficos e resumos operacionais em blocos visuais de alta densidade.
- Portfólios e Estudos de Caso: Exibir trabalhos criativos, imagens de projetos, citações de clientes e fluxos de design em uma apresentação dinâmica e não linear.
- Coleções de E-commerce: Destacar produtos em destaque, coleções por tempo limitado, banners promocionais e prova social em um layout editorial de alto impacto.
Quando NÃO Usar
- Listas de Conteúdo Uniforme: Se a página compreende elementos repetidos idênticos (ex.: listagens padrão de postagens de blog ou grades de produtos), use
card-ui-systemouresponsive-grid-system. - Narrativa Puramente Hierárquica: Para layouts que dependem de uma narrativa linear e sequencial (ex.: "Passo 1, Passo 2, Passo 3"), use
step-progress-systemousection-composition-system. - Dados Tabulares Complexos de Alto Volume: Se os usuários precisam comparar valores técnicos exatos ou ler linhas de dados alfanuméricos, use
data-table-ui-system. - Artigos Orientados por Conteúdo: Para páginas editoriais onde o foco principal é texto fluido e ininterrupto, use
article-layout-system.
Entradas
- Inventário e Prioridade de Conteúdo: Uma lista de itens para colocar na grade bento, classificados por hierarquia (1 Herói Central, 2-3 de Suporte, 2-4 Destaques).
- Taxonomia de Ativos Visuais: O tipo de ativo em cada célula (imagem estática, ilustração animada, slider interativo, texto simples, métrica numérica).
- Colunas Alvo e Breakpoints: Sistema de colunas para desktop (tipicamente uma grade mestra de 4 colunas), adaptação para tablet (tipicamente 2 colunas) e regras de empilhamento para mobile.
- Escala de Espaçamento Fluido: Tokens de margem e padding fluido para gutters e layouts internos de células (do
fluid-spacing-system). - Design Tokens da Marca: Escala tipográfica, raios de borda, estilos de borda, escalas de preenchimento de fundo e tokens de elevação (do
elevation-and-depth-systemefluid-typography-system).
Saídas
- Mapa Geométrico da Grade Bento: Um blueprint de coordenadas proporcionais especificando spans de coluna (
grid-column: span X) e spans de linha (grid-row: span Y) para cada célula. - Especificações da Anatomia Interna do Card: Regras para espaçamento estrutural, aninhamento de conteúdo e alinhamento dentro de diferentes proporções de células.
- Ordem do DOM e Mapa de Acessibilidade: Uma sequência de tabulação lógica mostrando como a estrutura fonte HTML mantém a acessibilidade em posições visuais irregulares.
- Plano de Empilhamento Responsivo: Especificações precisas de transição mostrando como a grade assimétrica simplifica para telas de tablet e mobile.
Fluxo de Trabalho
1. Estabelecer a Geometria da Grade e Colunas
Comece definindo a grade de coordenadas subjacente.
- Estrutura Mestra da Grade: Padronize uma grade CSS de 4 colunas para layouts de desktop (1200px+). Isso fornece excelentes fatores matemáticos para larguras de células (1/4, 2/4, 3/4 ou 4/4).
- Alturas de Track Assimétricas: Defina a altura das linhas explicitamente ou use
grid-auto-rows: minmax(180px, auto)para estabelecer uma base proporcional quadrada ou retangular horizontal (proporção 1:1 ou 2:1 por unidade). - Gutters Fluidos: Use um token de espaçamento fluido para o gap da grade (ex.:
gap: clamp(16px, 2vw, 24px)) para manter as células visualmente separadas, mas firmemente unidas.
2. Mapear e Alocar Conteúdo por Hierarquia Visual
Não espalhe itens aleatoriamente. Classifique cada célula em um de três níveis estruturais:
- A Célula Herói Central (Span 2x2 ou 3x2 tracks): Ocupa aproximadamente 40–50% da área da grade. Hospeda o ativo visual, vídeo ou métrica mais importante. Ela dita o ponto de entrada visual de toda a seção.
- Células de Suporte (Span 2x1 ou 1x2 tracks): Destacam recursos intermediários ou estatísticas-chave. São mais altas ou mais largas que os blocos básicos para acomodar texto estruturado junto com um gráfico.
- Células de Destaque (Span 1x1 tracks): Reservadas para pequenos elementos visuais, métricas simples de valor único, ícones ou badges. Elas completam a grade para manter o confinamento retangular.
3. Projetar a Anatomia Interna de uma Célula Bento
Aplique restrições de espaçamento interno rigorosas para manter as células coesas:
- Padding Unificado: Aplique padding interno consistente em todas as células, tipicamente um token de padding fluido (ex.:
padding: var(--space-m)). Exceção: Células de Destaque (1x1) podem usar padding ligeiramente mais justo (--space-s). - Modos de Alinhamento Interno: Use flexbox (
display: flex; flex-direction: column; justify-content: space-between) dentro das células para alinhar verticalmente blocos de texto ao topo e acentos visuais (métricas, gráficos) ao fundo. - Fundo e Bordas: Padronize um border-radius uniforme (ex.:
border-radius: 16pxa24px) em todas as células. Use um preenchimento de fundo sutil (ex.: um tom neutro, fundo de vidro fosco translúcido ou superfície de cartão de baixo contraste) para estabelecer limites de cartão distintos.
4. Organizar a Ordem do DOM para Acessibilidade de Teclado e Leitor de Tela
Layouts de grade irregulares podem causar incompatibilidade entre a ordem visual de leitura e a ordem física do DOM.
- Fluxo de Leitura Natural: Sequencie os elementos no documento HTML em uma ordem lógica da esquerda para a direita, de cima para baixo, como seriam lidos.
- Evitar Modificação de Ordem: Nunca use
orderem CSS ou posicione células arbitrariamente de uma forma que pule elementos focalizáveis. Se a célula 1 está no canto superior esquerdo e a célula 2 no canto superior direito, elas devem aparecer nessa sequência no DOM, mesmo que o layout CSS Grid as distribua de forma diferente. - Títulos Semânticos: Dê a cada célula rica em conteúdo uma tag de título clara e descritiva (tipicamente
<h3>ou<h4>), correspondendo ao contorno do<h2>da seção pai.
5. Definir Empilhamento Responsivo e Breakpoints
Garanta que a grade lide graciosamente com a escala da viewport:
- Desktop (1200px+): Layout de 4 colunas. Spans assimétricos de coluna e linha.
- Tablet (768px - 1199px): Mude para uma grade de 2 colunas. Remapeie os spans para que células 1x1 ocupem 1 coluna e células 2x1 ocupem ambas as colunas (2 colunas em largura total).
- Mobile (abaixo de 767px): Colapse a grade inteiramente em uma pilha vertical de 1 coluna (
grid-template-columns: 1fr). Remova alturas de linha explícitas (grid-auto-rows: auto) e deixe os elementos fluírem naturalmente, com altura determinada pelo padding interno e tamanho do conteúdo.
Regras de Decisão
Quando Span Colunas vs. Linhas
| Tipo de Conteúdo do Item | Regra de Decisão de Span | Geometria Recomendada para Desktop |
|---|---|---|
| Métrica de Alto Impacto / Recurso Principal | Span ambas colunas e linhas para criar um centro focal. | grid-column: span 2; grid-row: span 2; |
| Visuais Amplos / Linhas do Tempo / Gráficos | Span colunas horizontalmente; mantenha altura em 1 linha para atrair os olhos horizontalmente. | grid-column: span 2; grid-row: span 1; |
| Lista de Texto Longa / Imagens Altas | Span linhas verticalmente; mantenha largura em 1 coluna para atrair os olhos para baixo. | grid-column: span 1; grid-row: span 2; |
| Métricas Únicas / Badges / Ícones | Não span. Mantenha como bloco quadrado padrão. | grid-column: span 1; grid-row: span 1; |
Escala Tipográfica em Células Bento
- Tamanho Adaptativo: Não use o mesmo tamanho tipográfico para todos os cards. Mantenha a escala tipográfica proporcional ao tamanho do card.
- Card Herói: Use
font-size: clamp(1.5rem, 4cqi, 2.25rem)(usando unidades de consulta de contêinercqise suportado) para títulos. - Card de Destaque (1x1): Limite o título a
font-size: clamp(1rem, 2.5cqi, 1.25rem)e mantenha as descrições breves (máx. 2 linhas) ou omita descrições inteiramente em favor de um ícone + métrica.
Confinamento de Conteúdo vs. Sangria
- Layout Contido: Coloque o conteúdo inteiramente dentro do padding do card, com um mínimo de
16pxde espaço de respiro entre o texto e as bordas. Melhor para cards ricos em texto e informativos. - Layout com Sangria: Deixe elementos visuais (screenshots de produto, mockups 3D detalhados, gráficos complexos) sangrarem para as bordas inferior e/ou direita do card, mascarando o overflow (
overflow: hiddenna célula). O texto permanece com padding e legível no topo. Use isso para o Herói Central e cards visuais de suporte.
Restrições
- Visibilidade de Foco (WCAG 2.2 SC 2.4.11 / 2.4.13): Se qualquer célula for focalizável (ex.: atua como um card de link grande), ela deve ter um contorno
:focus-visibleexplícito e de alto contraste. Os indicadores de foco nunca devem ser cortados pelo contêiner da grade pai ou limites do card. - Alvos de Toque (WCAG 2.2 SC 2.5.8): Todos os elementos interativos dentro das células bento (botões, expansores, sliders) devem ter um tamanho mínimo de alvo de
24x24pxcom espaçamento circundante suficiente, preferindo44x44pxpara gatilhos mobile. - Alinhamento da Ordem de Leitura (WCAG 2.1 SC 1.3.2): A sequência de conteúdo analisada pelos leitores de tela deve corresponder ao significado semântico e à sequência visual da grade bento. A célula do canto superior esquerdo deve sempre aparecer antes das células do canto inferior direito no DOM fonte.
- Taxas de Contraste (WCAG AA): Todo o texto dentro dos cards bento deve atender a um contraste mínimo de
4.5:1contra o fundo do card. Evite usar cinzas sutis de baixo contraste para descrições dentro de cards matizados.
Padrões Comuns de Falha
- O Efeito "Gaveta de Tranqueiras Visual": Enfiar elementos arbitrários em uma grade bento apenas porque cabem. Cada célula deve servir a um propósito narrativo coeso para a página pai.
- Desconexão DOM-Visual: Dispor os cards visualmente em uma ordem, enquanto os deixa em uma sequência completamente diferente no HTML. A navegação por leitor de tela e teclado pula caoticamente ao redor da grade.
- A Explosão do Layout Mobile: Manter spans de coluna codificados em telas mobile, o que força os cards a encolherem, causando overflow de texto e tornando-os completamente ilegíveis.
- Conflito de Raios de Borda Excessivos: Usar um border-radius massivo nos cards enquanto mantém margens pequenas e afiadas, ou aninhar elementos internos com raios de borda que não correspondem à curva de canto concêntrica do card externo.
- Falta de uma Âncora Focal: Criar uma grade onde todas as células são exatamente do mesmo tamanho (ex.: todas 1x1 ou todas 2x1), o que elimina o ponto de entrada do layout e causa fadiga de escaneamento.
Critérios de Validação
- Geometria Unificada: A grade usa uma estrutura de coordenadas subjacente e consistente (idealmente um layout de 4 colunas no desktop) com gutters uniformes.
- Hierarquia Clara: Um único bloco "Herói" é visualmente dominante e estabelece um ponto de entrada de layout claro.
- Ordem de Tabulação Natural: A tabulação através dos elementos da grade move-se previsivelmente da esquerda para a direita, de cima para baixo, correspondendo ao layout visual.
- Empilhamento Mobile: O layout transita limpidamente para uma pilha de coluna única em viewports mobile (< 768px) sem overflow horizontal.
- Consistência de Espaçamento Interno: O padding da célula é idêntico em todos os cards semelhantes, com alinhamento vertical uniforme dos elementos.
- Conformidade de Contraste AA: As taxas de contraste para todos os blocos de texto e indicadores de status dentro de cada card atendem a pelo menos o padrão WCAG AA de 4.5:1.
- Segurança Interativa: Os alvos de toque para todos os widgets dentro dos cards bento atendem ao mínimo WCAG 2.2 de 24x24px.