kennedys0/taste-style-bento

Use esta habilidade somente depois que um usuário escolher explicitamente ou uma configuração de projeto confirmada a especificar. Para novas solicitações de UI não explicadas, use um seletor de estilo como [estilo] em vez de decidir o gosto do usuário aqui. Marca existente, acessibilidade e substituições do usuário têm precedência sobre todos os exemplos abaixo. O seguinte guia de estilo não é permissão para começar a codificar UI antes da seleção de estilo.

Pacote de estilo: Bento Grid

ID: bento
Assinatura: Composição modular assimétrica de cartões com hierarquia de peso visual estrita, anatomia interna diversa dos blocos e ritmo espacial unificado.

Este é um pacote de estilo, não um padrão obrigatório. Carregue-o somente após seleção explícita ou estilo de projeto aplicável confirmado. As instruções do projeto podem substituir escolhas individuais. Preserve acessibilidade, utilidade e restrições de marca. Fontes são sugestões, não dependências obrigatórias. Uma grade uniforme 3×2 de cartões de recurso idênticos não se qualifica como Bento Grid.

Boa adequação / compensações

• Funciona bem para: Visões gerais de produtos, landing pages de portfólio, descoberta de recursos para desenvolvedores, resumos de dashboard e showcases de ecossistemas de hardware/software.
• Cuidado com: Dados tabulares lineares de alto volume ou fluxos de transação passo a passo onde a assimetria da grade distrai da progressão sequencial.
• Direções de referência:
  • Bento Escuro Matte Moderno: Fundo obsidiana/ardósia (#0B0D10) com cartões de grafite sutilmente elevados (#15191E), bordas translúcidas de 1px (rgba(255, 255, 255, 0.08)) e uma cor de destaque vibrante.
  • Bento Claro Arquitetônico Limpo: Tela branco off-white nítido (#F8F9FA) com azulejos de porcelana branca pura, divisores finos (rgba(0, 0, 0, 0.06)) e tipografia carvão escuro.

Portão de fidelidade da grade bento — obrigatório

Antes de considerar uma página de grade bento completa, a viewport de abertura deve ser visivelmente lida como uma composição modular assimétrica e curada. Se um usuário escolheu este estilo, uma grade uniforme de cartões idênticos (ícone + título + parágrafo) é uma FALHA direta, pois representa um template genérico de baixa qualidade.

Uma implementação bem-sucedida de grade bento demonstra todos os seguintes:

1. Peso Visual Assimétrico Claro: A grade apresenta uma hierarquia focal distinta: exatamente 1 bloco herói dominante (abrangendo 2×2 ou 2×1 colunas) que comunica a mensagem principal, 1–2 blocos secundários médios e 2–3 blocos terciários compactos.
2. Anatomia Interna Diversa dos Blocos: Cada bloco possui um layout interno único adaptado ao seu conteúdo específico. O bloco 1 pode apresentar um bloco de código interativo; o bloco 2 um widget de alternância ativo; o bloco 3 uma prévia visual ou diagrama; o bloco 4 uma leitura de métrica ao vivo. Layouts idênticos repetidos entre blocos falham.
3. Ritmo Espacial Unificado e Alinhamento de Calhas: As bordas dos blocos se alinham estritamente ao longo de uma grade CSS consistente (ex.: 3 ou 4 colunas) com calhas uniformes (16px–24px) e curvatura de canto correspondente (20px–28px).
4. Reestruturação Móvel Deliberada: Em viewports móveis, a bento multi-colunas se colapsa em uma única coluna lógica e priorizada por conteúdo, sem cortar conteúdo ou causar transbordamentos horizontais estranhos.
5. Hierarquia Interna Legível: Cada bloco tem um título claro e sucinto (18px–24px) e conteúdo de alto contraste, evitando paredes de texto minúsculo comprimido em caixas pequenas.

Teste da primeira viewport: Em uma captura de tela de desktop, identifique o bloco herói dominante, as apresentações internas variadas dos blocos e o alinhamento unificado da grade sem ler o título da página. Se todos os blocos parecerem idênticos, redesenhe a hierarquia da grade.

Exceção explícita de layout bento — blocos assimétricos são incentivados

Substituição específica do bento: A precaução universal anti-slop contra excesso de cartões ou desordem de dashboard NÃO DEVE ser interpretada como uma proibição de layouts multi-bloco aqui. Uma grade bento autêntica é fundamentalmente modular e compartimentada, funcionando como uma caixa de bentô japonesa onde cada compartimento serve um prato distinto.

• Tratamentos de layout permitidos: Extensões assimétricas de coluna/linha da grade (grid-column: span 2; grid-row: span 2;), elevações sutis de cartão ao passar o mouse, mini controles interativos incorporados (alternâncias, abas de código) e brilhos de borda ambiente em blocos ativos.
• Limite anti-slop: Sem aninhamento de cartão dentro de cartão dentro de um bloco bento. Um bloco já é um contêiner de informação; use hierarquia tipográfica, divisores e espaçamento para estrutura interna em vez de aninhar outro cartão dentro dele.
• Interpretação anti-slop: Avalie layouts bento pela variedade de conteúdo, densidade de informação e hierarquia de leitura, não pela contagem de cartões. Grades de recursos uniformes são baixa qualidade; composições bento assimétricas curadas são design autêntico.

Tipografia e estilo de escrita

Sans serif contemporâneo e refinado: DM Sans, Manrope, Inter ou system sans. Títulos herói principais: 28–44 px (peso 700); títulos de bloco: 18–22 px (peso 600); corpo: 14–15 px; legendas/etiquetas: 12–13 px. Mantenha o texto do corpo breve e escaneável.

Direção de cor

• Modo Escuro (Matte Moderno Padrão):
  • Base da Tela: Ardósia escura obsidiana (#0B0D10).
  • Fundo do Bloco: Ardósia elevada (#15191E).
  • Tipografia Primária: Porcelana nítida (#F4F4F6).
  • Texto Secundário / Suave: Cinza frio equilibrado (#9CA3AF — passa WCAG AA 4.5:1).
  • Borda Fina: Traço branco translúcido (rgba(255, 255, 255, 0.08)).
• Modo Claro (Arquitetônico Limpo):
  • Base da Tela: Branco off-white nítido (#F8F9FA).
  • Fundo do Bloco: Porcelana branca pura (#FFFFFF).
  • Tipografia Primária: Tinta carvão escuro (#111827).
  • Texto Secundário / Suave: Cinza ardósia (#6B7280 — passa WCAG AA 4.5:1).
  • Borda Fina: Traço escuro translúcido (rgba(0, 0, 0, 0.08)).
• Cor de Destaque da Marca: Cor de assinatura de alto contraste (ex.: Violeta Elétrico #8B5CF6, Ciano #06B6D4, ou Esmeralda #10B981) atendendo contraste mínimo de 3:1 contra preenchimentos de blocos escuros e claros.
• Regra de Acoplamento de Tema e Anti-colisão: Tela, superfícies de blocos, tipografia e bordas DEVEM se adaptar em pares sincronizados. Ao alternar para o modo escuro, o texto deve clarear; ao alternar para o modo claro, o texto deve escurecer. Nunca permita texto escuro (#111827) em blocos escuros ou texto branco (#FFFFFF) em blocos claros.

Layout e geometria

CSS Grid: grid-template-columns: repeat(3, 1fr) ou repeat(4, 1fr); gaps: 16px–24px. Raios de cartão: 20px–28px. Todas as bordas dos blocos devem se alinhar rente ao longo das faixas horizontais e verticais da grade.

Superfícies, profundidade, textura

• Bloco Bento: Fundo sólido com traço fino sutil (1px solid var(--taste-bento-border)) e sombra ambiente suave (0 8px 24px rgba(0, 0, 0, 0.12)).
• Interação de Hover: Elevação sutil (transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18)).

Anatomia do componente e interação

• Bloco Herói (2×2 ou 2×1): Proposta de valor principal, visual rico ou prévia de código ao vivo, CTA proeminente.
• Bloco de Ação Interativa: Alternância integrada, filtro rápido ou bloco de comando copiável.
• Bloco de Métrica / Status: Número tabular limpo com rótulo concreto e dados reais.
• Bloco de Showcase: Captura de tela de alta fidelidade, prévia de ativo ou diagrama arquitetônico.

Movimento

140–220 ms suave ease-out. Elevação contida do bloco no hover. Sem animações concorrentes distrativas em múltiplos blocos simultaneamente.

Receita opcional Anime.js v4

• Decisão de movimento: Entrada escalonada sutil de blocos ou elevação suave no hover.
• Duração inicial: 180ms (0 = imediato); ajuste conforme a tarefa e preferência do usuário.
• Evitar: giro de bloco, escala errática, distrações de loop flutuante.
• Dependência: CSS/nativo por padrão. Use Anime.js v4 apenas se a interação solicitada justificar. Siga o references/motion-engine.md do Taste Engine quando disponível; habilidade independente segue os princípios de movimento reduzido e sem loop decorativo acima.

Redação de UI e microcópia

Direta, impactante e informativa. Exemplos: “Implantação instantânea”, “Configuração zero”, “Latência de 48ms”. Evite palavras da moda vagas como “Sinergia de próxima geração”.

Tokens iniciais (sugestões, não um tema completo)

Token	Padrão modo escuro	Padrão modo claro
--taste-bento-bg	#0b0d10	#f8f9fa
--taste-bento-surface	#15191e	#ffffff
--taste-bento-text	#f4f4f6	#111827
--taste-bento-text-muted	#9ca3af	#6b7280
--taste-bento-border	1px solid rgba(255, 255, 255, 0.08)	1px solid rgba(0, 0, 0, 0.08)
--taste-bento-radius	24px	24px
--taste-bento-gap	20px	20px
--taste-bento-shadow	0 8px 24px rgba(0, 0, 0, 0.25)	0 8px 24px rgba(0, 0, 0, 0.06)
--taste-bento-accent	#8b5cf6	#7c3aed
--taste-bento-font-body	DM Sans, Manrope, system-ui, sans-serif	DM Sans, Manrope, system-ui, sans-serif
--taste-bento-motion-duration	180ms	180ms

Tokens representam uma direção e não são garantidos copiar e colar para cada paleta/plataforma. Defina --taste-bento-* no nível do projeto, garanta contraste de cor e adapte através de tokens de tema em vez de espalhar valores literais.

Composição do herói (primeira viewport completa)

Quando um portfólio/landing page/página inicial voltada ao público tem um herói: use uma composição de cabeçalho+herói de uma tela visível. Altura base em min-height: 100svh com fallback 100vh, subtraindo o cabeçalho real apenas quando ele está em fluxo normal; deixe o herói expandir para acessibilidade e telas móveis curtas. Não aplique isso a dashboards privados ou outras telas de tarefa; substituições diretas do usuário vencem. Direção específica do estilo: Organize a seção superior como uma grade bento herói onde a história principal do produto ocupa o bloco 2×2 primário e pontos de prova de suporte o cercam. Não force 8 cartões minúsculos na primeira viewport apenas para preencher altura. Consulte o roteador references/hero-layout.md quando presente. Uso independente segue os mesmos princípios responsivos e anti-slop.

Portão de qualidade específico do estilo

• Faça: Verifique o domínio visual claro do bloco herói; garanta que cada bloco tenha um layout interno distinto; verifique o colapso da grade no móvel; mantenha espaçamento de lacuna consistente; verifique a alternância de contraste do modo escuro/claro: garanta que tela, superfícies de blocos, tipografia e bordas alternem em pares acoplados e passem WCAG AA (pelo menos 4.5:1).
• Não faça: Não gere modelos idênticos repetidos de 3 ou 4 cartões; evite cartões aninhados dentro de blocos; evite gráficos em miniatura ilegíveis ou rótulos de métrica falsos; não permita colisões de tema como texto escuro em blocos escuros, texto branco em blocos brancos ou bordas invisíveis.
• Confirme consistência em desktop e móvel; foco de teclado visível (:focus-visible); estados de carregamento, vazio, desabilitado, erro e sucesso; comportamento de movimento reduzido (prefers-reduced-motion).
• Não injete suposições específicas de estilo em projetos não relacionados. Ao combinar estilos, nomeie explicitamente o estilo primário e os recursos emprestados.

Portão anti-slop universal (autocontido)

Cada elemento deve ganhar seu lugar. Conteúdo antes da decoração. Não decore incerteza. Não invente saldos, métricas, depoimentos, usuários, logotipos, aprovação, status verificado/ao vivo/online, atividade falsa ou confirmações de sucesso; use estados honestos de vazio/carregamento/erro. Dados de demonstração são aceitáveis apenas se solicitados e visivelmente rotulados.

Não adicione camadas decorativas de cartão dentro de cartão: uma superfície aninhada deve representar uma interação distinta ou limite de informação. Evite grades de 3 recursos geradas automaticamente, dashboards de 4 estatísticas, alegações falsas de herói, gráficos sem propósito, spam de emblemas/chips/ícones, arte decorativa não relacionada e loops aleatórios meramente para preencher a viewport. Prefira agrupamento com tipografia, espaçamento, alinhamento e divisores. Pares iguais precisam de equilíbrio visual intencional.

Redação anti-slop: sem genéricos "Desbloqueie seu potencial", "Experimente o futuro", "Acelere seu fluxo de trabalho", alegações "perfeitas" ou equivalentes traduzidos. Títulos devem comunicar conteúdo real, CTAs devem nomear a ação, e texto de vazio/erro/sucesso deve descrever estados reais e próximos passos. Evite urgência falsa, contagens inventadas, hype vago de IA, emojis gratuitos e paredes inacessíveis de letras maiúsculas. Adapte a redação a este estilo e ao idioma do usuário sem alterar a verdade.

Integridade de contraste de tema e modo: Quando um usuário solicita modo escuro ou modo claro (ou constrói um alternador de tema), as cores de fundo e primeiro plano DEVEM inverter em pares sincronizados em todas as superfícies, texto, bordas, inputs e emblemas semânticos. Nunca deixe texto preto em fundo escuro, texto branco em fundo branco ou pílulas de status ilegíveis de baixo contraste. Todos os estados devem atender ao contraste WCAG AA (mínimo 4.5:1 para texto normal/corpo, 3:1 para títulos grandes e limites interativos).

Responsivo e movimento: componha móvel deliberadamente, verifique rótulos longos, estados de foco e contraste acessível; sem corte de texto para caber em um layout da moda. Estático por padrão; use movimento para interações significativas, respeite preferências de movimento reduzido, evite decoração de bounce/flutuação/pulsar sem um estado real.

Descobertas Críticas/Altas bloqueiam conclusão: dados/status fabricados, ações quebradas, controles inacessíveis/cortados, cópia enganosa, colisões de contraste de tema ou falha móvel significativa devem ser corrigidos. Relate o que foi realmente verificado; não reivindique testes que não foram executados.

Não é um veto estético: cores expressivas, sombras, gradientes, layouts de cartão ou tratamentos decorativos são legítimos quando são partes intencionais da estética selecionada e passam verificações de usabilidade. Não force silenciosamente o minimalismo.

Anti-slop: específico do estilo

Composição curada, não grades de cartão geradas automaticamente.

• Rejeite: Grades uniformes de cartões idênticos, cartões aninhados dentro de cartões, métricas falsas sem unidades, ícones de placeholder sem significado claro, blocos vazios adicionados apenas para equilibrar uma grade CSS e colisões de cores de modo escuro/claro onde o texto permanece ilegível contra a superfície do bloco.
• Em vez disso: Projete cada bloco em torno de recursos distintos reais ou ações do usuário com pesos assimétricos e títulos escaneáveis.
• Verificação de cópia: Cada título de bloco deve comunicar função real