Bento UI

"Tudo em seu devido lugar. Uma grade altamente estruturada e modular de compartimentos distintos."

Quando Usar

Use este sub-estilo quando a solicitação do usuário corresponder à estética descrita acima. Esta é uma referência filha da habilidade design-it e não deve ser acionada diretamente.

Princípios Fundamentais

1. Estrutura de Grade Rígida: Toda a UI é construída sobre uma grade responsiva e multicolunada (geralmente 3x3, 4x4 ou alvenaria irregular).
2. Compartimentos Arredondados: Cada pedaço distinto de conteúdo fica dentro de um card (compartimento) com um raio de borda consistente, geralmente grande.
3. Espaçamento Igual: O espaço entre os compartimentos deve ser perfeitamente consistente em todos os lugares.

DNA Visual

• Cores: Altamente adaptável, mas fica incrivelmente premium com Minimalist Slate ou Yacht Club. Frequentemente usa um fundo ligeiramente off-white ou cinza claro para fazer os compartimentos brancos se destacarem.
• Tipografia: Estilo Apple (por exemplo, SF Pro, Inter). Títulos geralmente são em negrito e posicionados no canto superior esquerdo ou inferior esquerdo de cada compartimento.
• Visuais: Frequentemente depende de imagens de alta qualidade, de ponta a ponta, ou ícones 3D únicos e grandes dentro de células de grade específicas para quebrar cards com muito texto.

Implementação Web

• CSS Grid é obrigatório. Flexbox é muito difícil de manter a estrutura 2D rígida.
• Exemplo de CSS:

.bento-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 24px;
  padding: 24px;
  background-color: var(--bg-primary); /* Slightly darker than cards */
}

.bento-card {
  background-color: #fff;
  border-radius: 32px; /* Very large border radius */
  padding: 32px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.04);
  /* Optional: subtle 1px border for crispness */
  border: 1px solid rgba(0,0,0,0.05);
  
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Creating spans for different bento sizes */
.bento-span-2 { grid-column: span 2; }
.bento-span-2-row { grid-row: span 2; }
.bento-large { grid-column: span 2; grid-row: span 2; }

Implementação em Aplicativos

SwiftUI

struct BentoGrid: View {
    let columns = [
        GridItem(.flexible(), spacing: 16),
        GridItem(.flexible(), spacing: 16)
    ]
    
    var body: some View {
        ScrollView {
            LazyVGrid(columns: columns, spacing: 16) {
                // 2x1 Span (Full width)
                BentoCard(title: "Hero", color: .blue)
                    .frame(height: 180)
                
                // 1x1 Spans
                BentoCard(title: "Stats", color: .green)
                    .frame(height: 180)
                BentoCard(title: "Graph", color: .purple)
                    .frame(height: 180)
                
                // 1x2 Span (Tall)
                BentoCard(title: "Activity", color: .orange)
                    .frame(height: 376) // (180 * 2) + 16 spacing
                
                // 1x1 Spans next to the tall one
                VStack(spacing: 16) {
                    BentoCard(title: "A", color: .pink).frame(height: 180)
                    BentoCard(title: "B", color: .cyan).frame(height: 180)
                }
            }
            .padding(16)
        }
        .background(Color(.systemGroupedBackground))
    }
}

struct BentoCard: View {
    let title: String
    let color: Color
    var body: some View {
        RoundedRectangle(cornerRadius: 24)
            .fill(Color(.secondarySystemGroupedBackground))
            .overlay(
                Text(title).font(.headline).foregroundColor(color),
                alignment: .topLeading
            )
            .padding(16)
            // Soft bento shadow
            .shadow(color: .black.opacity(0.04), radius: 12, x: 0, y: 4)
    }
}

• Use LazyVGrid para grades uniformes.
• Para layouts bento irregulares complexos (como spans 1x2), você geralmente precisa misturar VStack e HStack dentro das células da grade para simular os spans.
• Mantenha consistência absoluta com cornerRadius (geralmente 24-32pt) e spacing (geralmente 16pt).

Flutter

import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

class BentoScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[100],
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16),
        child: StaggeredGrid.count(
          crossAxisCount: 4, // 4 colunas no total
          mainAxisSpacing: 16,

…