UX/UI — Referência & Sistema

Form Validation Patterns

Padroes de validacao de formularios com feedback visual claro e mensagens orientadas a acao. Validacao inline em tempo real com indicadores de sucesso e erro.

Contextual Help & Inline Documentation

Padroes de ajuda contextual que orientam o usuario sem tirá-lo do fluxo. Icones de ajuda com popovers, banners informativos e links para documentacao detalhada.

Bulk Actions & Multi-select

Selecao multipla em tabelas e listas com barra de acoes flutuante. Permite executar operacoes em massa como excluir, mover, alterar status ou exportar itens selecionados.

Copy to Clipboard Patterns

Botoes e interacoes de copiar com feedback visual instantaneo. Icone muda para check apos copiar, com toast opcional de confirmacao.

Changelog & Version History

Timeline de versoes e atualizacoes do sistema. Badges de status, diff visual de mudancas, e release notes com categorias de alteracao.

Dashboard Widgets & KPI Cards

Cards de metricas para dashboards com valores, tendencias, sparklines e comparacao com periodo anterior. Projetados para visualizacao rapida de KPIs.

Error Pages (404, 500, Maintenance)

Paginas de erro estilizadas com ilustracoes, mensagens amigaveis e acoes claras de recuperacao. Manter a identidade visual mesmo em situacoes de falha.

File Upload & Drag-Drop Zone

Zona de upload com drag-and-drop, progress bar individual por arquivo, preview de imagem/PDF, limites de tamanho e estados de erro e sucesso.

Comparison Tables & Pricing

Tabelas de comparacao de planos ou produtos com destaque visual para a opcao recomendada. Badges, check/cross icons e CTA por coluna.

Status Page & System Health

Dashboard de status dos servicos do sistema com indicadores de uptime, historico de incidentes e badges de estado operacional.

Iconografia

A Sysled utiliza ícones no estilo outline (contorno) com espessura de 1.5px a 2px, alinhados ao estilo clean e moderno da marca. A biblioteca recomendada é a Lucide Icons ou Heroicons, ambas open-source e com estilo consistente.

Diretrizes de Ícones

Responsividade

Todas as interfaces da Sysled devem ser responsivas, adaptando-se fluidamente a diferentes tamanhos de tela. A abordagem recomendada é mobile-first, construindo a experiência base para telas menores e progressivamente aprimorando para telas maiores.

Diretrizes de Adaptação

Imagens e gráficos devem utilizar srcset para servir resoluções adequadas a cada dispositivo. Tabelas de dados devem implementar scroll horizontal em telas pequenas ou reorganizar-se em formato de cards. Menus de navegação devem colapsar em formato hamburger abaixo de 1024px. Modais devem ocupar tela cheia em mobile.

Badges, Tags & Chips

Componentes compactos para comunicar status, categorias, contagens e filtros ativos. Essenciais para dashboards industriais, listas de pedidos e monitoramento de equipamentos na plataforma SYSLED.

Status Badges

Indicadores visuais para representar o estado atual de um item. Usam cores semanticas com dot animado para estados ativos.

Notification Badges (Contadores)

Indicam quantidade de itens pendentes. Usados em icones de navegacao, tabs e botoes.

Tags & Labels

Para categorizar itens em listas, tabelas e cards. Suportam icone e acao de remover.

Chips com Acao (Removiveis)

Usados em filtros ativos, seletores multi-valor e campos de busca. O usuario pode remover clicando no X.

Badges em Contexto — Exemplo Tabela

Como badges e tags aparecem dentro de componentes reais da plataforma.

Variantes de Tamanho

Especificacoes

Paleta de Cores Semanticas

Do's & Don'ts

Avatar & User Presence

Sistema de representacao visual de usuarios na plataforma. Inclui avatares individuais, grupos empilhados, indicadores de presenca online/offline e user cards compactos.

Avatar Individual — Tamanhos

Avatares usam imagem, iniciais como fallback, ou icone generico. Sempre circulares.

Fallback — Variantes de Cor

Quando nao ha foto, usar iniciais do nome com cores geradas a partir do hash do user ID. Paleta fixa de 8 cores:

Indicador de Presenca (Online Status)

Dot posicionado no canto inferior-direito do avatar. Usa borda branca para separar do fundo.

Avatar Group (Stack)

Avatares empilhados com sobreposicao de -8px. Usado para mostrar membros de equipe, responsaveis por tarefa, etc.

User Card — Mini Profile

Card compacto para hover/popover com informacoes basicas do usuario. Usado em mentions, assignees e comentarios.

Avatar em Contexto — Comentario

Especificacoes

Cores de Presenca

Regras de Fallback

Do's & Don'ts

Theming & White-Label System

Arquitetura de tokens semânticos e temas dinâmicos para suportar múltiplas marcas (white-label) no ecossistema SYSLED — de clientes OEM a unidades regionais com identidade visual própria.

// theme.config.json
{
  "name": "sysled-default",
  "displayName": "SYSLED Industrial",
  "colors": {
    "brand-primary": "#0066CC",
    "brand-accent": "#FF6600",
    "bg-primary": "#FFFFFF",
    "bg-surface": "#F0F4F8",
    "bg-elevated": "#FFFFFF",
    "text-primary": "#1A1A2E",
    "text-secondary": "#64748B",
    "border": "#E2E8F0",
    "success": "#10B981",
    "warning": "#F59E0B",
    "error": "#EF4444"
  },
  "typography": {
    "heading": "Montserrat",
    "body": "Inter",
    "mono": "JetBrains Mono"
  },
  "radius": {
    "sm": "6px",
    "md": "10px",
    "lg": "16px",
    "full": "100px"
  },
  "logo": {
    "light": "/assets/logo-light.svg",
    "dark": "/assets/logo-dark.svg",
    "icon": "/assets/logo-icon.svg"
  }
}

Notification Preferences UI

Interface de configuração de notificações — canais (push, e-mail, SMS, in-app), frequência, agrupamento por categoria e controle granular por tipo de evento industrial.

Design System Governance & Changelog

Processos, papéis e documentação para manter o Design System SYSLED vivo, consistente e evolutivo — do pedido de novo componente ao versionamento semântico e changelog público.

Print & PDF Export Styles

Padrões de formatação para impressão e exportação PDF de documentos operacionais — Ordens de Serviço, Relatórios de Inspeção, Laudos Técnicos e Resumos de Manutenção. Layout otimizado para papel A4, com tipografia legível, hierarquia clara, cabeçalho corporativo e rodapé com rastreabilidade.

Page Layout — Ordem de Serviço

Layout A4 portrait com margens seguras para impressão. Cabeçalho com logo e dados da planta, corpo estruturado em seções, rodapé com paginação e hash de verificação.

Tipografia & Cores para Print

Regras de adaptação da UI para mídia impressa. Cores são convertidas para alto contraste P&B, gradients são substituídos por solid fills, e a tipografia é ajustada para legibilidade em papel.

@media print {
  /* Reset colors to high-contrast B&W */
  body { color: #000; background: #fff; }
  h1, h2, h3 { color: #000 !important; }

  /* Remove non-printable UI */
  .sidebar, .topbar, .fab,
  .toast, .modal-overlay,
  button:not(.print-btn) { display: none; }

  /* Page margins & breaks */
  @page {
    size: A4 portrait;
    margin: 20mm 15mm 25mm 15mm;
  }
  .page-break { break-before: page; }
  table, figure { break-inside: avoid; }

  /* Badges: border instead of bg color */
  .badge {
    background: transparent;
    border: 1.5px solid currentColor;
  }
}

Export Toolbar

Barra de ação para exportação de documentos. Permite escolher formato, orientação, conteúdo incluído e opções de cabeçalho/rodapé antes da geração.

Templates de Relatório

Modelos pré-definidos para os documentos mais comuns do SYSLED. Cada template tem layout, seções e formatação otimizados para seu propósito.

Anatomia — Página PDF

Especificações

Do's & Don'ts

Performance Budget & Metrics

Orçamentos de performance e métricas-alvo para garantir que a plataforma SYSLED carregue rapidamente em ambientes industriais — redes corporativas com latência variável, tablets em chão de fábrica e conexões 4G instáveis. Define limites para Core Web Vitals, bundle sizes, tempos de resposta de API e rendering budget por componente.

Core Web Vitals — Metas

Métricas do Google que impactam diretamente a experiência do operador. Cada métrica tem threshold verde (bom), amarelo (precisa melhorar) e vermelho (ruim).

Bundle Size Budget

Limites de tamanho por chunk e por rota para manter o carregamento rápido. Monitorado via CI/CD — builds que excedem o budget são bloqueados.

API Response Times

Tempos máximos de resposta por tipo de endpoint. Endpoints que excedem o P95 acionam alertas de monitoramento.

Component Render Budget

Tempo máximo de renderização por componente para manter 60fps. Componentes que excedem 16ms por frame causam jank visível para o operador.

CI/CD — Performance Gate

Pipeline de CI que valida budgets automaticamente a cada PR. Builds que violam limites são bloqueados com relatório detalhado de regressão.

Especificações

Do's & Don'ts

Error Codes & System Messages

Catálogo padronizado de códigos de erro, mensagens de sistema, alertas operacionais e feedback textual da plataforma SYSLED. Cada mensagem segue um formato consistente com código rastreável, tom de voz adequado ao contexto industrial, ação sugerida e nível de severidade.

Anatomia — Mensagem de Erro

Estrutura padrão para todas as mensagens de erro no SYSLED. Inclui ícone de severidade, código rastreável, título objetivo, descrição com contexto e ação sugerida.

Níveis de Severidade

4 níveis de severidade com cores, ícones e comportamentos distintos. Cada nível define persistência, som e prioridade visual.

Catálogo de Códigos

Referência completa dos códigos de erro do SYSLED, organizados por categoria. Formato: SYS-XYYY onde X = severidade (1-5) e YYY = código sequencial.

Mensagens de Sistema — Exemplos

Exemplos reais de mensagens do SYSLED, demonstrando tom de voz, formatação e ações sugeridas por contexto.

Tom de Voz — Mensagens

Diretrizes de escrita para manter consistência em todas as mensagens do sistema.

Especificações

Do's & Don'ts

Design System Glossary & Index

Referência unificada de termos, conceitos e componentes do SYSLED Design System. Inclui glossário técnico com definições objetivas, índice completo das 100 seções organizadas por arquivo, mapa de tokens e quick-reference cards para consulta rápida durante o desenvolvimento.

Glossário de Termos

Definições padronizadas dos termos usados ao longo do brandbook e no dia a dia do desenvolvimento SYSLED.

Índice Completo — 100 Seções

Mapa de todas as seções do brandbook, organizadas por arquivo/parte. Cada entrada é um link navegável.

Quick Reference — Design Tokens

Cartões de referência rápida com os tokens mais usados no dia a dia do desenvolvimento.

Brandbook em Números

Especificações do Design System

Do's & Don'ts — Design System