kennedys0/taste-style-enterprise

Use esta skill apenas depois que um usuário escolher explicitamente ou uma configuração de projeto confirmada especificá-la. Para solicitações de UI novas e não explicadas, use um seletor de estilo como taste-style-selector em vez de decidir o gosto do usuário aqui. Sobressaem-se a todos os exemplos abaixo as substituições existentes de marca, acessibilidade e do usuário. O guia de estilo a seguir não é uma permissão para começar a codificar a UI antes da seleção do estilo.

Pacote de estilo: Enterprise / Data-first

ID: enterprise
Assinatura: Cockpits operacionais densos em informação, alinhamento de dados tabulares, tokens de status semânticos, produtividade por teclado e arquitetura de fluxo de trabalho confiável.

Este é um pacote de estilo, não um padrão obrigatório. Carregue-o apenas após seleção explícita ou confirmação do estilo aplicável do projeto. 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. Um template de card de consumidor com 3 números de KPI falsos e um gráfico de pizza decorativo não se qualifica como Enterprise Data-first.

Boa adequação / trade-offs

• Funciona bem para: Plataformas B2B SaaS, consoles administrativos operacionais, monitores de infraestrutura em nuvem, portais fintech e de trading, backends de logística e cadeia de suprimentos e ferramentas de produtividade intensivas em dados.
• Tenha cuidado com: Páginas de marketing para o consumidor onde o ritmo narrativo e a marca visual emocional têm prioridade sobre a varredura tabular densa.
• Direções de referência:
  • Console de Nuvem Moderno (estilo Linear / Stripe / Vercel): Base neutra em ardósia nítida (#0F1117 escuro ou #F9FAFB claro), linhas de tabela compactas de 36px, figuras tabulares (font-variant-numeric: tabular-nums), divisores finos (#E5E7EB ou #262933) e tokens de status semânticos.
  • Mesa de Operações de Alta Densidade: Mesa branca e limpa com linhas compactas de 32px, barras de filtro de pesquisa com atalhos de teclado (⌘K), cabeçalhos de tabela fixos e painéis mestre-detalhe responsivos.

Portão de fidelidade de dados Enterprise — obrigatório

Antes de considerar uma página enterprise completa, a viewport de abertura deve ser visivelmente lida como um cockpit de dados funcional, denso e profissional. Se um usuário escolheu este estilo, um template de consumidor superdimensionado com cartões de métrica decorativos e estrutura tabular zero escaneável é um FRACASSO direto.

Uma implementação enterprise data-first bem-sucedida demonstra todos os seguintes:

1. Arquitetura Tabular Densa em Informação: Registros e entidades principais são apresentados em tabelas de dados estruturadas e escaneáveis ou listas mestre-detalhe compactas com alturas de linha consistentes (32px–40px) e cabeçalhos de coluna explícitos.
2. Numerais Tabulares e Alinhamento Justificado: Todos os números, valores financeiros, métricas e carimbos de data/hora impõem font-variant-numeric: tabular-nums. Colunas numéricas alinham-se estritamente à direita; colunas de texto alinham-se à esquerda.
3. Tokens de Status Semânticos com Contraste Legível: Indicadores de status (Saudável, Degradado, Falhou, Pendente) usam pílulas de token semântico calibradas com texto escuro acessível em fundos levemente coloridos (ex.: Sucesso: fundo #ECFDF5 com texto #065F46, passando WCAG AA 4.5:1).
4. Facilidades de Produtividade e Atalhos: Barras de pesquisa apresentam dicas de acionamento por teclado (⌘K ou /), cabeçalhos de tabela apresentam indicadores de classificação (▲/▼) e barras de ação em lote aparecem ao selecionar registros.
5. Completude de Estado Verdadeiro: Tabelas incluem barras de paginação reais (mostrando Mostrando 1–25 de 1.420 itens), tratamento responsivo de rolagem horizontal e estados dedicados de vazio/carregamento/erro.

Teste da primeira viewport: Em uma captura de tela de desktop, identifique a tabela de dados densa, cabeçalhos classificáveis, barra de filtro e números tabulares sem ler o título da página. Se parecer com uma página de marketing de consumo com grandes cartões vazios, reconstrua-a como uma visão operacional funcional.

Exceção explícita de densidade Enterprise — tabelas de dados são obrigatórias

Substituição específica do Enterprise: A precaução universal anti-slop contra desordem de painel ou múltiplas caixas de métrica NÃO DEVE ser interpretada como uma ordem para ocultar tabelas de dados, barras de ferramentas de filtro ou indicadores de status aqui. Em software enterprise autêntico (Stripe, Datadog, AWS, Bloomberg), dados densos escaneáveis são o principal requisito da interface.

• Tratamentos enterprise permitidos: Tabelas de dados compactas (linhas de 32px–40px), grades de metadados de várias colunas, barras de ferramentas de filtro, barras de pesquisa com emblemas de atalho de teclado, barras de ação em lote e pílulas de status semântico.
• Limite anti-slop: Nunca invente métricas de receita falsas, mini sparklines decorativas sem escalas de eixo ou gráficos de pizza animados que não transmitam nenhum dado operacional. Campos de dados reais, estados vazios e indicadores de status verdadeiros são obrigatórios.
• Interpretação anti-slop: Avalie layouts enterprise por escaneabilidade, densidade de informação e eficiência de tarefa, não tentando remover controles operacionais necessários. Densidade tabular que acelera o trabalho é design autêntico.

Tipografia e estilo de texto

UI sans neutra e altamente legível: Inter, Source Sans 3, SF Pro ou system sans. Monoespaçada para identificadores e hashes: JetBrains Mono ou monoespaçada do sistema. Corpo e células de tabela: 13–14 px (altura da linha 1.45); cabeçalhos de coluna: 12 px maiúsculo (peso 600, tracking 0.05em); métricas: 20–28 px com figuras tabulares.

Direção de cor

• Modo Claro (Console de Nuvem Moderno):
  • Base da Tela: Ardósia neutra suave (#F9FAFB).
  • Superfície / Tabela: Branco puro (#FFFFFF).
  • Tinta Primária / Tipografia: Ardósia escura (#111827).
  • Texto Secundário / Suave: Ardósia equilibrada (#6B7280).
  • Bordas Finas: #E5E7EB.
  • Destaque de Linha ao Passar o Mouse: #F8FAFC.
• Modo Escuro (Cockpit na Nuvem):
  • Base da Tela: Ardósia escura (#0F1117).
  • Superfície / Tabela: Carvão elevado (#161922).
  • Tinta Primária / Tipografia: Ardósia nítida (#F9FAFB).
  • Texto Secundário / Suave: Cinza equilibrado (#9CA3AF).
  • Bordas Finas: #232733.
  • Destaque de Linha ao Passar o Mouse: #1F2430.
• Marca Primária: Azul enterprise escuro (#2563EB claro / #3B82F6 escuro).
• Tokens de Status Semânticos (Calibrados WCAG AA para Ambos os Modos):
  • Sucesso (Saudável): Claro: #065F46 sobre #ECFDF5 (borda #A7F3D0); Escuro: #34D399 sobre rgba(16, 185, 129, 0.15) (borda rgba(16, 185, 129, 0.35)).
  • Aviso (Degradado): Claro: #92400E sobre #FEF3C7 (borda #FDE68A); Escuro: #FBBF24 sobre rgba(245, 158, 11, 0.15) (borda rgba(245, 158, 11, 0.35)).
  • Erro (Falhou): Claro: #991B1B sobre #FEE2E2 (borda #FECACA); Escuro: #F87171 sobre rgba(239, 68, 68, 0.15) (borda rgba(239, 68, 68, 0.35)).
  • Neutro (Pendente / Inativo): Claro: #374151 sobre #F3F4F6 (borda #E5E7EB); Escuro: #9CA3AF sobre rgba(156, 163, 175, 0.12) (borda rgba(156, 163, 175, 0.25)).
• Regra de Acoplamento de Tema: Canvas, tabelas, tinta de texto e emblemas semânticos DEVEM se adaptar juntos. Nunca exiba texto do modo escuro em tabelas claras ou texto verde escuro do modo claro em fundos de console escuros.

Layout e geometria

Ritmo base de 4px com incrementos de densidade de 8/12/16px; raios de canto sutis de 4px–6px; alturas de linha de tabela consistentes (36px padrão, 32px compacto). Layouts mestre-detalhe dividem-se flexivelmente no desktop e empilham-se limpos no mobile.

Superfícies, profundidade, textura

As superfícies são limpas, planas e orientadas por borda. Sombras de elevação são reservadas estritamente para menus flutuantes, dicas de ferramentas e diálogos modais (0 4px 12px rgba(0, 0, 0, 0.08)). Sem efeitos decorativos de vidro ou argila em grades de dados.

Anatomia do componente e interação

• Tabela de Dados: Linha de cabeçalho fixa, realce de linha alternado ou ao passar o mouse (#F8FAFC), colunas numéricas justificadas à direita, texto justificado à esquerda.
• Barra de Filtro e Pesquisa: Campo de pesquisa integrado com emblema ⌘K, menus suspensos de filtro de múltipla seleção e seletor de intervalo de datas.
• Emblema de Status Semântico: Pílula arredondada compacta com ponto indicador colorido e texto acessível.
• Rodapé de Paginação: Intervalo de página atual, seletor de itens por página e botões de próximo/anterior.

Movimento

Transições de feedback lineares mínimas de 100–140 ms. Priorize estabilidade sólida e zero movimento durante a atualização de dados ou filtragem de tabela.

Receita opcional Anime.js v4

• Decisão de movimento: Flash de realce de linha sutil na atualização de dados ou transição deslizante de gaveta.
• Duração inicial: 120ms (0 = imediato); ajuste à tarefa e preferência do usuário.
• Evitar: transições de página decorativas, gráficos saltitantes, carregadores giratórios em consultas rápidas.
• Dependência: CSS/nativo por padrão. Siga references/motion-engine.md do Taste Engine quando disponível; skill independente segue os princípios de movimento reduzido e sem loop decorativo acima.

Redação de UI e microcópia

Objetiva, precisa e amigável à auditoria. Exemplos: "1.420 registros encontrados", "Filtrar por status", "Exportar CSV", "Última atualização há 2 min". Evite slogans vagos de IA conversacional.

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

Token	Padrão modo claro	Padrão modo escuro
--taste-ent-bg	#f9fafb	#0f1117
--taste-ent-surface	#ffffff	#161922
--taste-ent-ink	#111827	#f9fafb
--taste-ent-muted	#6b7280	#9ca3af
--taste-ent-border	1px solid #e5e7eb	1px solid #232733
--taste-ent-radius	6px	6px
--taste-ent-row-height	36px	36px
--taste-ent-accent	#2563eb	#3b82f6
--taste-ent-font-body	Inter, -apple-system, system-ui, sans-serif	Inter, -apple-system, system-ui, sans-serif
--taste-ent-motion-duration	100ms	100ms

Tokens representam uma direção e não são garantia de copiar e colar para cada paleta/plataforma. Defina --taste-ent-* no nível do projeto, garanta contraste de cor e adapte via 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 painéis privados ou outras telas de tarefa; substituições diretas do usuário vencem. Direção específica do estilo: Ancora a view de abertura com um resumo de cockpit funcional: barra de filtro chave, visão geral de dados ao vivo e uma ação operacional imediata. Evite inflação de cartão de consumidor e lacunas vazias. Veja 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 numerais tabulares (tabular-nums) e alinhamento à direita em dados numéricos; garanta que os emblemas semânticos atendam ao contraste WCAG AA em ambos os modos claro e escuro; forneça barras de paginação e filtro de pesquisa completas; teste cabeçalhos de tabela fixos; verifique a alternância de modo escuro/claro para que todas as linhas, bordas e texto alternem em pares sincronizados.
• Não faça: Não substitua tabelas de dados por grades de cartão de consumidor; evite sparklines decorativas sem escala; não invente números de métrica falsos que não tenham contraparte de back-end; evite colisões de contraste de tema, como texto verde escuro em fundos escuros ou texto escuro em linhas de tabela escuras.
• Confirme consistência desktop e mobile; 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 a incerteza. Não invente saldos, métricas, depoimentos, usuários, logotipos, aprovação, status verificado/ativo/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 card-dentro-de-card: uma superfície aninhada deve representar um limite de interação ou informação distinto. Evite grades de 3 características geradas automaticamente, painéis de 4 estatísticas, reivindicações falsas de herói, gráficos sem propósito, spam de emblemas/chips/ícones, arte decorativa não relacionada e loops aleatórios apenas para preencher a viewport. Prefira agrupar com tipografia, espaçamento, alinhamento e divisores. Pares iguais precisam de equilíbrio visual intencional.

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

Integridade de contraste de tema e modo: Quando um usuário solicitar modo escuro ou modo claro (ou construir um alternador de tema), as cores de fundo e primeiro plano DEVEM alternar em pares sincronizados em todas as superfícies, texto, bordas, entradas 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: compor mobile deliberadamente, verificar rótulos longos, estados de foco e contraste acessível; sem corte de texto para caber em um layout moderno. Estático por padrão; use movimento para interações significativas, respeite preferências de movimento reduzido, evite decoração saltitante/flutuante/pulsante sem um estado real.

Conclusão do bloco de achados Críticos/Altos: status/dados fabricados, ações quebradas, controles inacessíveis/cortados, texto enganoso, colisões de contraste de tema ou falha móvel significativa devem ser corrigidos. Relate o que foi realmente verificado; não afirme 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 nas verificações de usabilidade. Não restrinja...