Guia de marca 2026

Componentes

Specs canônicas de anatomia, estados e regras de composição.

AppShell

Anatomia

  • ·Sidebar fixa 240px
  • ·Top Bar (breadcrumb + ações)
  • ·Page Header (título + ações)
  • ·Page Body

Proporções

Largura sidebar240px
Área de conteúdocalc(100% − 240px)
Skip linkobrigatório

Sidebar

Anatomia

  • ·Brand
  • ·Nav items
  • ·Group labels (uppercase)
  • ·Spacer
  • ·User info no rodapé

Nav item

Tamanho do ícone18px
Mobile <md (768px)
Mobile patterndrawer com overlay

Borda esquerda 1px na cor de accent + background sutil

Card

Variantes

  • Simples
  • Com header
  • Com footer
  • Com tabs
  • Completo

Regras

  • ·Separação por contraste de superfície, não por borda (default)
  • ·Border radius Large (16px)
  • ·Overflow hidden
  • ·Cards interativos ganham :focus-visible com anel da cor de accent

Por padrão sem borda. Se o usuário pedir borda explicitamente, executar com aviso 'padrão EnP é separação por contraste — aplicando borda conforme solicitado'.

Tabs

Especificações

Indicador ativoborder-bottom 2px na cor de CTA
Peso ativo600
Peso inativo400

Teclado: roving tabindex (setas navegam dentro do grupo, Tab entra/sai)

Proibições

  • ·border-radius em tabs (base deve ser reta)
  • ·background colorido em tab ativa
  • ·font-weight diferente de 400/600

FormField

Padrões

label sempre acima do input

NÃO usar placeholder — nem como label, nem como exemplo

Validação: no blur, não a cada tecla

Fórmula de erro: o que aconteceu + por que + como resolver

Estados

defaulthoverfocus-visibleactivedisabledloadingerrorsuccess

DataTable

Regras

Diferenciação de headerpeso (semibold) e cor, não tamanho
Divider na última linhanenhum
Açõesdireita
Mobilescroll horizontal

Modal

Implementação

Elemento<dialog> nativo com showModal()
Max-width padrão480px
Max-width wide640px
Z-index1055
Opacidade overlay0.7

Requisitos

Focus trapobrigatório
Esc fechaobrigatório

Modal de confirmação

verbo + objeto, nunca 'Sim/Não' ou 'OK/Cancelar'

Toast 'Item removido [Desfazer]' por 5s é melhor que modal. Modal só para ações genuinamente irreversíveis.

Empty State

Estrutura

  1. 1Reconhecer o estado
  2. 2Dar contexto/valor
  3. 3Oferecer ação

Copy proibido

'Nada aqui!''Sem resultados''Oops!'qualquer humor sem funçãoqualquer culpabilização

Responsividade

BreakpointMudança
lg (1024px)Grid de métricas: 4 → 2 colunas
md (768px)Sidebar → drawer; Split → stack vertical; DataTable → scroll horizontal
sm (480px)Grid de métricas: 2 → 1 coluna; Tabs → scroll horizontal

Acessibilidade

Nível WCAG

AA

Contraste texto

4.5:1 mín.

Toque mínimo

44px

Focus-visible

obrigatório

prefers-reduced-motion

obrigatório

Vitrine pública. Spec canônica vive em enp-design-system/skills/. Dados sincronizados via raw.githubusercontent.com (ISR 24h).