SYSLED — UX/UI Patterns

31 — Command Palette (Cmd+K)

Command Palette (Cmd+K)

A command palette e um modal de busca global que permite acessar qualquer pagina, executar acoes e encontrar produtos em tempo real. Ativada por ⌘ K.

painel ESC

Produtos

Painel Solar 400W

SKU-001 · R$ 1.299

Painel Solar 550W Bifacial

SKU-012 · R$ 1.890

Paginas

Catalogo de Painels

Acoes

Novo Painel Solar

N

↑↓

navegar ↵ abrir

4 resultados

<div class="cmd-overlay"> <div class="cmd-modal"> <div class="cmd-search"> <svg>...search icon...</svg> <input type="text" placeholder="Buscar..." autofocus /> <kbd>ESC</kbd> </div> <div class="cmd-results"> <div class="cmd-category">Produtos</div> <div class="cmd-item selected"> <div class="cmd-icon"><svg/></div> <div class="cmd-info"> <div class="cmd-title">Painel Solar 400W</div> <div class="cmd-meta">SKU-001 · R$ 1.299</div> </div> <svg>...chevron...</svg> </div> </div> <div class="cmd-footer"> <kbd>↑↓</kbd> navegar <kbd>↵</kbd> abrir </div> </div> </div>

.cmd-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.4); z-index: 9999; display: flex; justify-content: center; padding-top: 15vh; } .cmd-modal { background: #FFFFFF; border-radius: 16px; width: 100%; max-width: 480px; box-shadow: 0 20px 60px rgba(0,0,0,0.2); overflow: hidden; } .cmd-item.selected { background: #EBF8FF; border-radius: 8px; } .cmd-item { padding: 8px 16px; margin: 2px 8px; display: flex; align-items: center; gap: 10px; cursor: pointer; border-radius: 8px; } .cmd-item:hover { background: #F8FAFC; }

Diretriz	Descricao
Ativacao	`Cmd+K` (Mac) / `Ctrl+K` (Win). Input com autofocus. ESC para fechar.
Categorias	Produtos, Paginas, Acoes. Cada uma com label uppercase cinza. Icone SVG por tipo.
Highlight	Termo buscado em `bold + color: #2B6CB0` nos resultados. Busca fuzzy tolerante.
Navegacao	Setas ↑↓ para navegar, Enter para abrir, ESC para fechar. Item selecionado com bg `#EBF8FF`.
Footer	Dicas de teclas + contagem de resultados. Max 8 resultados visiveis, scroll para mais.

32 — Accordion e Collapsible Sections

Accordion e Collapsible Sections

Accordions organizam conteudo em secoes expansiveis, economizando espaco vertical. Ideais para FAQs, configuracoes e paineis de detalhes.

Perguntas Frequentes

Qual a garantia dos paineis solares?

Todos os paineis solares Sysled possuem garantia de 25 anos de performance (80% da potencia nominal) e 12 anos de garantia contra defeitos de fabricacao. A garantia cobre defeitos de material e mao de obra.

Como faco para rastrear meu pedido?

Posso parcelar minha compra?

Qual o prazo de entrega?

<div class="accordion"> <div class="accordion-item open"> <button class="accordion-header"> <span>Qual a garantia dos paineis?</span> <svg class="accordion-chevron">...</svg> </button> <div class="accordion-body"> <p>Todos os paineis possuem garantia de 25 anos...</p> </div> </div> <div class="accordion-item"> <button class="accordion-header"> <span>Como rastrear meu pedido?</span> <svg class="accordion-chevron">...</svg> </button> <div class="accordion-body">...</div> </div> </div>

.accordion-item { background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 12px; margin-bottom: 6px; overflow: hidden; } .accordion-header { width: 100%; padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; background: none; border: none; cursor: pointer; font-family: 'Montserrat', sans-serif; font-size: 0.8rem; font-weight: 600; color: #0F172A; } .accordion-item.open .accordion-header { font-weight: 700; } .accordion-chevron { width: 16px; height: 16px; stroke: #94A3B8; transition: transform 0.2s ease; } .accordion-item.open .accordion-chevron { transform: rotate(180deg); stroke: #2B6CB0; } .accordion-body { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; } .accordion-item.open .accordion-body { max-height: 500px; }

Diretriz	Descricao
Chevron	Rotacao 180deg com `transition: 0.2s ease`. Aberto: azul `#2B6CB0`. Fechado: cinza `#94A3B8`.
Animacao	Body expande via `max-height` com transition 0.25s. Sem "pulo" — usar overflow hidden.
Modo exclusivo	Para FAQ: apenas 1 aberto por vez (fechar ao abrir outro). Para configuracoes: multiplos abertos simultaneos.
Acessibilidade	Usar `<button>` no header. `aria-expanded="true/false"`. `aria-controls` apontando para o body.
Espacamento	Gap de 6px entre items. Padding interno: 14px 16px. Border-radius: 12px.

33 — Timeline e Activity Log

Timeline e Activity Log

A timeline exibe o historico de acoes e eventos em ordem cronologica. Cada entrada mostra quem fez, o que fez, e quando — com icones por tipo de acao.

Hoje

Carlos Lima aprovou o pedido #1847

14:32 · Pedidos

Ana Costa editou o preco do Painel Solar 400W de R$ 1.199 para R$ 1.299

11:15 · Produtos

Sistema alertou estoque baixo do Sensor IP65 — 3 unidades restantes

09:42 · Estoque

Ontem

Admin adicionou Maria Silva como operadora

16:20 · Usuarios

<div class="timeline"> <div class="timeline-group"> <div class="timeline-date">Hoje</div> <div class="timeline-track"> <div class="timeline-event"> <div class="timeline-dot timeline-dot--success"> <svg>...check...</svg> </div> <div class="timeline-content"> <p><strong>Carlos Lima</strong> aprovou o pedido <strong>#1847</strong></p> <span class="timeline-meta">14:32 · Pedidos</span> </div> </div> </div> </div> </div>

.timeline-track { position: relative; padding-left: 32px; } .timeline-track::before { content: ''; position: absolute; left: 11px; top: 0; bottom: 0; width: 2px; background: #E2E8F0; } .timeline-dot { position: absolute; left: -32px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #FFFFFF; display: flex; align-items: center; justify-content: center; z-index: 1; } .timeline-dot--success { background: #D1FAE5; } .timeline-dot--edit { background: #EBF8FF; } .timeline-dot--alert { background: #FFF5F5; } .timeline-dot--user { background: #F8FAFC; } .timeline-meta { font-size: 0.6rem; color: #94A3B8; }

Diretriz	Descricao
Linha vertical	2px, cor `#E2E8F0`, posicionada 11px da esquerda (centro dos dots).
Dots	24px circulo com icone SVG 12px. Cores por tipo: sucesso (verde), edicao (azul), alerta (vermelho), usuario (cinza).
Agrupamento	Separar por "Hoje", "Ontem", "Esta semana", data completa. Label uppercase em cinza.
Conteudo	Formato: Quem fez o que + detalhes. Meta: hora + categoria. Nomes em bold.
Filtro	Permitir filtrar por tipo (Produtos, Pedidos, Estoque, Usuarios) via chips ou dropdown.

34 — Ratings, Reviews e Feedback

Ratings, Reviews e Feedback

Componentes de avaliacao capturam feedback do usuario. Incluem estrelas de rating, NPS score, thumbs up/down e modal de feedback com texto livre.

Avaliacao do Produto

4.0 (128 avaliacoes)

Este artigo foi util?

Ajude-nos a melhorar nossa documentacao.

NPS — Net Promoter Score

De 0 a 10, qual a chance de recomendar?

0

1

2

3

4

5

6

7

8

9

10

Detrator Neutro Promotor

<div class="star-rating" data-value="4"> <svg class="star filled">...</svg>  <svg class="star empty">...</svg>  <span class="rating-value">4.0</span> <span class="rating-count">(128 avaliacoes)</span> </div>  <div class="feedback-thumbs"> <button class="thumb thumb--up active">Sim (84)</button> <button class="thumb thumb--down">Nao (12)</button> </div>  <div class="nps-scale"> <button class="nps-btn nps-detractor">0</button> ... <button class="nps-btn nps-passive">7</button> <button class="nps-btn nps-promoter selected">9</button> ... </div>

.star { width: 22px; height: 22px; cursor: pointer; } .star.filled { fill: #ECC94B; stroke: #ECC94B; } .star.empty { fill: none; stroke: #E2E8F0; } .star:hover ~ .star { fill: none; stroke: #E2E8F0; } .thumb { display: flex; align-items: center; gap: 6px; padding: 8px 16px; border: 1.5px solid #E2E8F0; border-radius: 8px; font-weight: 600; cursor: pointer; } .thumb--up.active { background: #D1FAE5; border-color: #6EE7B7; color: #059669; } .nps-btn { width: 26px; height: 30px; border-radius: 5px; font-family: monospace; font-size: 0.6rem; cursor: pointer; } .nps-detractor { background: #FFF5F5; color: #DC2626; border: 1px solid #FED7D7; } .nps-passive { background: #FFFBEB; color: #D97706; border: 1px solid #FDE68A; } .nps-promoter { background: #D1FAE5; color: #059669; border: 1px solid #6EE7B7; } .nps-btn.selected { border-width: 2px; font-weight: 700; }

Componente	Especificacao
Estrelas	5 estrelas, 22px. Preenchida: `#ECC94B`. Vazia: stroke `#E2E8F0`. Hover: preview do rating.
Thumbs	Botoes com icone + contagem. Up ativo: verde. Down ativo: vermelho. Mutuamente exclusivos.
NPS	0-6 detrator (vermelho), 7-8 neutro (amarelo), 9-10 promotor (verde). Selecionado: border 2px + bold.
Feedback modal	Apos rating baixo (1-2 estrelas ou NPS 0-6), abrir modal com textarea "O que podemos melhorar?" + botao enviar.

35 — Data Entry Patterns (Multi-Step Form)

Formularios Multi-Step

Formularios complexos sao divididos em etapas para reduzir carga cognitiva. Cada step valida antes de avancar, com progresso visual e opcao de salvar rascunho.

Cadastro de Produto

Dados Basicos

Nome, SKU, categoria

2

Preco e Estoque

Valores e quantidades

3

Imagens

Fotos do produto

4

Revisao

Confirmar e publicar

Preco e Estoque

Defina os valores e quantidades do produto.

Preco de venda *

R$ 1.299,00

Preco de custo

R$ 890,00

Estoque inicial *

150

Estoque minimo

10

<div class="multistep-form">  <aside class="form-sidebar"> <h3>Cadastro de Produto</h3> <div class="progress-bar"> <div class="progress-fill" style="width: 50%"></div> </div> <div class="step-list"> <div class="step completed"> <div class="step-dot"><svg>check</svg></div> <div>Dados Basicos</div> </div> <div class="step current"> <div class="step-dot">2</div> <div>Preco e Estoque</div> </div> <div class="step pending">...</div> </div> </aside>  <main class="form-content"> <h2>Preco e Estoque</h2> <div class="form-grid">...fields...</div> <div class="form-actions"> <button class="btn-draft">Salvar rascunho</button> <button class="btn-secondary">Voltar</button> <button class="btn-primary">Proximo</button> </div> </main> </div>

.multistep-form { display: grid; grid-template-columns: 220px 1fr; background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 16px; overflow: hidden; } .form-sidebar { background: #F8FAFC; border-right: 1px solid #E2E8F0; padding: 1.25rem; } .progress-bar { height: 4px; background: #E2E8F0; border-radius: 4px; overflow: hidden; } .progress-fill { height: 100%; background: linear-gradient(90deg, #2B6CB0, #48C9B0); border-radius: 4px; transition: width 0.3s ease; } .step.completed .step-dot { background: #48C9B0; color: #FFFFFF; } .step.current .step-dot { background: #2B6CB0; color: #FFFFFF; } .step.current { background: #EBF8FF; border-radius: 8px; } .step.pending .step-dot { background: #FFFFFF; border: 1.5px solid #E2E8F0; color: #94A3B8; } .btn-draft { background: none; border: none; color: #94A3B8; font-weight: 600; cursor: pointer; }

Diretriz	Descricao
Sidebar	Largura fixa 220px. Steps com dot (22px circulo): completo (verde + check), atual (azul + numero), pendente (cinza + numero).
Progress bar	Gradient `#2B6CB0` → `#48C9B0`. Largura proporcional ao step (25%, 50%, 75%, 100%). Transition 0.3s.
Navegacao	"Voltar" (secondary) + "Proximo: [nome]" (primary). Ultimo step: "Revisar e Publicar". Clicar em steps completos permite voltar.
Validacao	Validar campos obrigatorios antes de avancar. Mostrar erros inline. Nao permitir pular steps.
Rascunho	Botao "Salvar rascunho" no footer, estilo text cinza. Auto-save a cada 30s. Indicador "Rascunho salvo as 14:32".
Responsivo	Mobile: sidebar vira stepper horizontal no topo. Form ocupa largura total.

36 — Avatar Upload e Image Cropper

Avatar Upload e Image Cropper

O upload de avatar permite que usuarios personalizem seu perfil. Inclui preview circular, crop/zoom, indicador de progresso e fallback para iniciais quando nao ha imagem.

Avatar com Foto

CL

Carlos Lima

Administrador

Upload em Progresso

72%

Enviando foto...

Crop / Zoom

<div class="avatar-wrapper"> <div class="avatar avatar-xl"> <span class="avatar-initials">CL</span> </div> <button class="avatar-edit-btn"> <svg>...camera icon...</svg> </button> </div>  <div class="avatar-upload-progress" data-progress="72"> <svg class="progress-ring">...</svg> <span class="progress-text">72%</span> </div>

.avatar-wrapper { position: relative; width: 80px; height: 80px; } .avatar { border-radius: 50%; overflow: hidden; } .avatar-initials { font-family: 'Montserrat', sans-serif; font-weight: 700; color: #FFFFFF; background: linear-gradient(135deg, #2B6CB0, #48C9B0); } .avatar-edit-btn { position: absolute; bottom: 0; right: 0; width: 28px; height: 28px; border-radius: 50%; background: #2B6CB0; border: 3px solid #FFFFFF; color: #FFFFFF; cursor: pointer; } .progress-ring circle { stroke-dasharray: 72 100; stroke-linecap: round; transition: stroke-dasharray 0.3s; }

Diretriz	Descricao
Fallback	Sem foto: iniciais em gradient `#2B6CB0 → #48C9B0`. Font: Montserrat bold branco.
Edit button	Circulo 28px azul com icone camera, posicionado bottom-right com borda branca 3px.
Crop	Area circular com borda dashed azul. Slider de zoom com thumb 12px. Botoes Cancelar/Aplicar.
Progress	Ring SVG circular com stroke-dasharray proporcional. Percentual no centro. Cor `#2B6CB0`.
Formatos	Aceitar JPG, PNG, WebP. Max 5MB. Validar antes do upload. Mostrar erro inline se invalido.

37 — Color Picker e Swatch Selector

Color Picker e Swatch Selector

O color picker permite selecionar cores para personalizacao de temas, tags e categorias. Inclui paleta Sysled pre-definida, input hex/RGB e cores recentes.

#2B6CB0

rgb(43, 108, 176)

Paleta Sysled

Recentes

# 2B6CB0

.swatch { width: 28px; height: 28px; border-radius: 6px; cursor: pointer; transition: transform 0.1s; } .swatch:hover { transform: scale(1.15); } .swatch.selected { border: 2px solid #0F172A; box-shadow: 0 0 0 1px #FFFFFF inset; } .color-swatch-lg { width: 40px; height: 40px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }

Diretriz	Descricao
Swatches	28px com border-radius 6px. Grid 8 colunas. Selecionado: border 2px `#0F172A` + inset white shadow. Hover: scale 1.15.
Input	Campo hex com prefixo "#" fixo. Validacao: aceitar 3 ou 6 caracteres hex. Preview atualiza em tempo real.
Recentes	Ultimas 5 cores usadas. Swatches menores (24px). Persistir em localStorage.
Paleta	Cores Sysled pre-definidas (brand + neutrals). Sempre disponivel como primeira opcao.

38 — Date Picker e Range Selector

Date Picker e Range Selector

O date picker permite selecionar datas individuais ou ranges. Formato BR (dd/mm/aaaa), presets rapidos e navegacao por mes/ano.

Data Unica

Marco 2026

Dom Seg Ter Qua Qui Sex Sab

23 24 25 26 27 28 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

Range com Presets

01/03/2026

ate

07/03/2026

<div class="datepicker"> <div class="datepicker-header"> <button class="prev-month"><svg/></button> <span class="current-month">Marco 2026</span> <button class="next-month"><svg/></button> </div> <div class="datepicker-weekdays">...Dom-Sab...</div> <div class="datepicker-days"> <button class="day other-month">23</button> <button class="day">1</button> <button class="day selected">7</button> </div> </div>  <div class="date-presets"> <button class="preset active">Ultimos 7 dias</button> <button class="preset">Este mes</button> </div>

.day { padding: 6px; font-size: 0.65rem; border: none; background: none; border-radius: 8px; cursor: pointer; } .day:hover { background: #F8FAFC; } .day.selected { background: #2B6CB0; color: #FFFFFF; font-weight: 700; } .day.in-range { background: #EBF8FF; color: #2B6CB0; } .day.range-start, .day.range-end { background: #2B6CB0; color: #FFFFFF; font-weight: 700; } .day.other-month { color: #CBD5E0; } .preset.active { background: #2B6CB0; color: #FFFFFF; }

Diretriz	Descricao
Formato	Brasileiro: `dd/mm/aaaa`. Input com mascara. Icone calendario 14px.
Selecionado	Dia: circulo azul `#2B6CB0` + texto branco bold. Range: dias intermediarios com bg `#EBF8FF`.
Presets	Pills: "Ultimos 7 dias", "Ultimos 30 dias", "Este mes", "Personalizado". Ativo: bg azul.
Navegacao	Setas prev/next para mes. Click no titulo do mes para selecionar ano. Dias do mes anterior em cinza claro.

39 — Toast Positioning e Stacking

Toast Positioning e Stacking

Toasts empilham verticalmente na tela. Regras de posicao, timing de auto-dismiss, limite de stack e animacoes de entrada/saida garantem uma experiencia limpa.

Produto salvo

Painel Solar 400W atualizado.

Sincronizacao iniciada

Exportando dados para o ERP...

top-right (padrao)

<div class="toast-container toast-top-right"> <div class="toast toast-success"> <div class="toast-icon"><svg/></div> <div class="toast-content"> <div class="toast-title">Produto salvo</div> <div class="toast-message">Painel Solar 400W atualizado.</div> </div> <button class="toast-close"><svg/></button> </div> </div>

.toast-container { position: fixed; z-index: 9999; display: flex; flex-direction: column; gap: 8px; max-width: 360px; } .toast-top-right { top: 16px; right: 16px; } .toast-bottom-center { bottom: 16px; left: 50%; transform: translateX(-50%); } .toast { background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 10px; padding: 12px 14px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); animation: slideIn 0.25s ease; } @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* Auto-dismiss: 5s success, 8s info, persistent error */

Diretriz	Descricao
Posicao	Padrao: top-right. Mobile: bottom-center, full-width. Margem 16px das bordas.
Stacking	Max 3 toasts visiveis. 4o+: indicador compactado (barrinha). Gap de 8px. Mais recente no topo.
Auto-dismiss	Success: 5s. Info: 8s. Warning: 10s. Error: persistente (so fecha com X). Progress bar sutil no bottom.
Animacao	Entrada: slideIn 0.25s (da direita). Saida: fadeOut + slideUp 0.2s. Hover pausa o timer.
Icone	Circulo 20px com icone SVG 11px. Success: verde. Info: azul. Warning: amarelo. Error: vermelho.

40 — Skeleton Loading Patterns

Skeleton Loading Patterns

Skeletons mostram o layout do conteudo antes dele carregar, reduzindo a percepcao de espera. Cada tipo de componente tem seu skeleton correspondente que espelha o layout real.

Card Skeleton

Profile Skeleton

Table Skeleton

<div class="skeleton skeleton-text" style="width: 70%"></div> <div class="skeleton skeleton-text" style="width: 90%"></div> <div class="skeleton skeleton-circle" style="width: 48px"></div> <div class="skeleton skeleton-rect" style="height: 100px"></div>  <div class="card-skeleton"> <div class="skeleton skeleton-rect"></div> <div class="skeleton skeleton-text w-70"></div> <div class="skeleton skeleton-text w-90"></div> <div class="skeleton skeleton-text w-50"></div> </div>

@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .skeleton { background: linear-gradient( 90deg, #E2E8F0 25%, #F1F5F9 50%, #E2E8F0 75% ); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 6px; } .skeleton-text { height: 12px; margin-bottom: 8px; } .skeleton-circle { border-radius: 50%; aspect-ratio: 1; } .skeleton-rect { height: 100px; border-radius: 10px; } /* Dark mode */ [data-theme="dark"] .skeleton { background: linear-gradient( 90deg, #1E293B 25%, #334155 50%, #1E293B 75% ); }

Diretriz	Descricao
Shimmer	Gradient `#E2E8F0 → #F1F5F9 → #E2E8F0` animado em 1.5s infinite. Dark mode: `#1E293B → #334155`.
Matching	Skeleton deve espelhar o layout real: mesma altura, largura e posicao dos elementos que vai substituir.
Variantes	Text (12px h, border-radius 6px). Circle (aspect-ratio 1). Rect (border-radius 10px). Widths variaveis (50%, 70%, 90%).
Timing	Mostrar skeleton apos 200ms de loading (evitar flash em carregamentos rapidos). Transicao suave para conteudo real.

41 — Error Handling Patterns

Error Handling Patterns

Erros devem ser tratados de forma transparente, com mensagens claras, opcoes de retry e fallback UI quando possivel. O usuario nunca deve ficar preso sem saber o que aconteceu.

Retry Automatico

Falha ao carregar

Nao foi possivel conectar ao servidor.

Tentativa 2 de 3...

Modo Offline

Sem conexao

Voce esta offline. Alteracoes serao sincronizadas automaticamente quando a conexao voltar.

3 alteracoes pendentes

Fallback UI

Grafico indisponivel

Os dados serao exibidos quando o servico estiver online.

<div class="error-card"> <div class="error-icon"><svg>...retry...</svg></div> <h3>Falha ao carregar</h3> <p>Nao foi possivel conectar.</p> <span class="retry-count">Tentativa 2 de 3...</span> <button class="btn-primary">Tentar novamente</button> </div>  <div class="offline-bar"> <div class="status-dot offline"></div> <span>Sem conexao</span> </div>

.offline-bar { background: #FFF5F5; border: 1px solid #FED7D7; border-radius: 8px; padding: 8px 12px; display: flex; align-items: center; gap: 8px; } .status-dot { width: 8px; height: 8px; border-radius: 50%; } .status-dot.online { background: #48C9B0; } .status-dot.offline { background: #DC2626; } .fallback-ui { background: #F8FAFC; border: 1px dashed #E2E8F0; border-radius: 10px; padding: 1.25rem; text-align: center; color: #CBD5E0; }

Padrao	Descricao
Retry	Max 3 tentativas automaticas com backoff (1s, 3s, 5s). Mostrar contagem. Apos 3: botao manual "Tentar novamente".
Offline	Barra com dot vermelho + "Sem conexao". Contar alteracoes pendentes. Sincronizar automaticamente ao reconectar.
Fallback	Componente dashed border com icone cinza. Texto explicativo. Nao bloquear — permitir usar o resto da pagina.
Mensagens	Nunca jargao tecnico ("Error 500"). Sempre: o que aconteceu + o que fazer. Tom empatico, nunca culpar o usuario.

42 — Confirmation Dialogs e Destructive Actions

Confirmation Dialogs

Acoes destrutivas exigem confirmacao explicita. Quanto mais grave a acao, mais forte a friccao: de um simples "Confirmar?" ate digitar o nome do recurso.

Confirmacao Simples

Excluir produto?

Esta acao ira remover "Sensor IP65" permanentemente. Isto nao pode ser desfeito.

Type-to-Confirm

Excluir catalogo inteiro?

Isto removera 847 produtos permanentemente.

Digite EXCLUIR para confirmar

<div class="confirm-dialog"> <div class="confirm-icon danger"><svg/></div> <h3>Excluir produto?</h3> <p>Esta acao ira remover "Sensor IP65" permanentemente.</p> <div class="confirm-actions"> <button class="btn-secondary">Cancelar</button> <button class="btn-danger">Excluir</button> </div> </div>  <label>Digite <strong>EXCLUIR</strong> para confirmar</label> <input type="text" class="confirm-input" /> <button class="btn-danger" disabled>Excluir tudo</button>

.btn-danger { background: #DC2626; color: #FFFFFF; border: none; border-radius: 8px; font-weight: 600; } .btn-danger:disabled { background: #FED7D7; color: #C53030; opacity: 0.6; cursor: not-allowed; } .confirm-icon.danger { width: 36px; height: 36px; border-radius: 10px; background: #FFF5F5; } .confirm-input { font-family: monospace; border: 1.5px solid #E2E8F0; border-radius: 8px; padding: 8px 12px; }

Nivel	Quando usar
Simples	Excluir 1 item. Modal com titulo + descricao + Cancelar/Excluir. Botao vermelho.
Type-to-confirm	Acoes em massa ou irreversiveis (excluir catalogo, reset dados). Digitar palavra exata para habilitar botao.
Undo window	Para exclusoes leves: toast com "Desfazer" por 10 segundos em vez de modal. Nao pedir confirmacao.
Botao destrutivo	Sempre vermelho (`#DC2626`). Disabled ate confirmacao. Nunca ser o primeiro botao focado — Cancelar recebe foco.

43 — Search Results e Highlight

Search Results e Highlight

Resultados de busca mostram correspondencias com o termo destacado, ordenados por relevancia. Incluem "Voce quis dizer?", contagem e filtros laterais.

Resultados para "painl solar"

Voce quis dizer: painel solar?

12 resultados encontrados (0.08s)

Painel Solar Monocristalino 400W

Ativo

Painel solar de alta eficiencia 21.5%, ideal para instalacoes residenciais e comerciais...

SKU-001 R$ 1.299 Estoque: 142

Painel Solar Bifacial 550W

Painel bifacial com captacao dupla face, potencia 550W...

SKU-012 R$ 1.890

<div class="search-results"> <div class="search-header"> <p>Resultados para "<strong>painl solar</strong>"</p> <p class="did-you-mean">Voce quis dizer: <a>painel solar</a>?</p> <span class="result-count">12 resultados (0.08s)</span> </div> <div class="result-item"> <h3><mark>Painel</mark> <mark>Solar</mark> 400W</h3> <p>Descricao com <mark>highlight</mark>...</p> <div class="result-meta">SKU-001 · R$ 1.299</div> </div> </div>

mark { background: #FEF9C3; color: inherit; padding: 1px 2px; border-radius: 2px; } .did-you-mean a { color: #2B6CB0; font-weight: 600; text-decoration: underline; } .result-item { padding: 14px 20px; border-bottom: 1px solid #F1F5F9; cursor: pointer; } .result-item:hover { background: #F8FAFC; }

Diretriz	Descricao
Highlight	Tag `<mark>` com background `#FEF9C3` (amarelo claro). Border-radius 2px. Cor herda do contexto.
Did you mean	Correcao ortografica abaixo da barra. Link azul underline. Aparece quando fuzzy match encontra resultado melhor.
Meta	Contagem + tempo de busca. Cada resultado: titulo bold, snippet com highlight, metadata (SKU, preco).
Zero results	Usar empty state com sugestoes: "Tente termos mais genericos" ou "Remover filtros".

44 — Progress Indicators

Progress Indicators (Upload, Import, Export)

Indicadores de progresso comunicam o andamento de operacoes demoradas. Barras determinadas mostram percentual exato; indeterminadas indicam que algo esta acontecendo.

Importacao CSV

catalogo_2026.csv

423 de 847 linhas processadas

50%

Tempo estimado: ~2 min

Etapas de Processamento

Validando arquivo

Mapeando colunas

Importando dados...

Gerando relatorio

Upload de Arquivo

foto_painel_400w.jpg

2.4 MB de 3.1 MB

78%

logo_sysled.png

1.2 MB — Concluido

<div class="progress-bar"> <div class="progress-fill" style="width: 50%"></div> </div>  <div class="process-step completed"> <div class="step-dot"><svg>check</svg></div> <span>Validando arquivo</span> </div> <div class="process-step active"> <div class="step-dot pulsing"></div> <span>Importando dados...</span> </div>  <div class="upload-item"> <div class="file-icon"><svg/></div> <div class="file-info">nome.jpg · 2.4MB</div> <span class="upload-percent">78%</span> </div>

.progress-bar { height: 6px; background: #E2E8F0; border-radius: 6px; overflow: hidden; } .progress-fill { height: 100%; background: linear-gradient(90deg, #2B6CB0, #48C9B0); border-radius: 6px; transition: width 0.3s ease; } .step-dot.pulsing { background: #2B6CB0; animation: pulse 1.5s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .upload-item.completed { border-color: #6EE7B7; background: #D1FAE5; }

Tipo	Especificacao
Barra determinada	6px height, gradient `#2B6CB0 → #48C9B0`. Percentual + texto de contagem. Transition 0.3s.
Steps	Dots 20px: completo (verde + check), ativo (azul pulsante), pendente (border cinza). Texto com peso visual por estado.
Upload	Icone do tipo de arquivo. Nome + tamanho. Barra 4px. Percentual. Botao cancelar (X). Completo: borda verde.
Tempo estimado	Mostrar "Tempo estimado: ~2 min" quando possivel. Atualizar em tempo real. Nao mostrar se nao souber calcular.

45 — Responsive Navigation Patterns

Responsive Navigation Patterns

A navegacao se adapta ao viewport. Desktop: sidebar expandida. Tablet: sidebar colapsada. Mobile: bottom tab bar ou hamburger menu.

Desktop (sidebar 240px)

Dashboard

Produtos

Pedidos

Tablet (sidebar 56px)

Mobile (bottom tab)

Home

Produtos

Pedidos

Mais

<aside class="sidebar sidebar-expanded"> <nav class="sidebar-nav"> <a class="nav-item active"> <svg class="nav-icon"/> <span class="nav-label">Dashboard</span> </a> </nav> </aside>  <nav class="bottom-tab-bar"> <a class="tab-item active"> <svg class="tab-icon"/> <span class="tab-label">Home</span> </a> </nav>

/* Desktop: sidebar 240px */ @media (min-width: 1024px) { .sidebar { width: 240px; } .nav-label { display: inline; } .bottom-tab-bar { display: none; } } /* Tablet: sidebar 56px */ @media (min-width: 768px) and (max-width: 1023px) { .sidebar { width: 56px; } .nav-label { display: none; } .bottom-tab-bar { display: none; } } /* Mobile: sem sidebar, com bottom tab */ @media (max-width: 767px) { .sidebar { display: none; } .bottom-tab-bar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: #FFFFFF; border-top: 1px solid #E2E8F0; padding: 8px 0; z-index: 100; } .tab-item { flex: 1; text-align: center; } .tab-item.active { color: #2B6CB0; } }

Breakpoint	Navegacao
≥1024px	Sidebar expandida 240px. Icone + label. Background `#0F172A`. Item ativo com bg azul transparente.
768-1023px	Sidebar colapsada 56px. Apenas icones. Tooltip no hover com nome da pagina.
<768px	Bottom tab bar fixo. Max 5 items. Icone + label pequeno. Item ativo: azul. "Mais" para menu extra.
Transicao	Sidebar: `width transition 0.2s`. Labels: fade in/out. Bottom bar: slide up on mount.
Safe area	Mobile: respeitar `env(safe-area-inset-bottom)` para dispositivos com notch/gesture bar.

46 — Micro-copy e Placeholder Guidelines

Micro-copy e Placeholder Guidelines

Micro-copy sao os pequenos textos que guiam o usuario: placeholders, labels, helper texts, mensagens de erro e textos de botoes. Devem ser claros, concisos e uteis.

Correto

Email corporativo *

nome@empresa.com

Usado para login e recuperacao de senha.

Quantidade

0

Insira um valor entre 1 e 9999.

Evitar

Email

Digite seu email aqui...

Sem helper text

Quantidade

0

Erro: campo invalido

<div class="form-group"> <label class="form-label"> Email corporativo <span class="required">*</span> </label> <input type="email" placeholder="nome@empresa.com" /> <span class="helper-text">Usado para login e recuperacao de senha.</span> <span class="error-text">Insira um email valido.</span> </div>

.helper-text { font-size: 0.6rem; color: #94A3B8; margin-top: 4px; } .error-text { font-size: 0.6rem; color: #DC2626; margin-top: 4px; }

Elemento	Regra
Labels	Descritivos: "Email corporativo", nao "Email". Incluir `*` vermelho para obrigatorios. Montserrat 0.65rem bold.
Placeholders	Exemplo real, nao instrucao: `nome@empresa.com`, nao "Digite seu email". Cor `#94A3B8`.
Helper text	Explicar por que a informacao e necessaria ou formato esperado. Inter 0.6rem `#94A3B8`. Abaixo do input.
Errors	Dizer o que corrigir: "Insira um valor entre 1 e 9999", nao "Campo invalido". Inter 0.6rem `#DC2626`.
Botoes	Acao especifica: "Salvar produto", nao "Submeter". "Excluir pedido", nao "OK". Verbos no infinitivo.
Tom	Direto e humano. Sem jargao tecnico. Sem culpar o usuario. Sem "por favor" excessivo.

47 — Spacing & Layout Tokens Visuais

Spacing & Layout Tokens Visuais

Tokens de espacamento aplicados em contexto real. O sistema usa multiplos de 4px para manter ritmo vertical e horizontal consistente em todos os componentes.

Espacamento em um Card

16px

Painel Solar 400W

mb-8

Monocristalino, eficiencia 21.5%

py-8 px-16

gap-8

--space-1: 4px

--space-2: 8px

--space-3: 12px

--space-4: 16px

--space-6: 24px

--space-8: 32px

<div class="card" style="padding: var(--space-4);"> <h3 style="margin-bottom: var(--space-2);">Titulo</h3> <p style="margin-bottom: var(--space-3);">Descricao</p> <div style="display: flex; gap: var(--space-2);"> <button style="padding: var(--space-2) var(--space-4);">Acao</button> </div> </div>

:root { --space-1: 4px; /* micro gaps, icon padding */ --space-2: 8px; /* inline gaps, button padding-y */ --space-3: 12px; /* between related elements */ --space-4: 16px; /* card padding, section gaps */ --space-5: 20px; /* between groups */ --space-6: 24px; /* section padding */ --space-8: 32px; /* large sections */ --space-10: 40px; /* page margins */ --space-12: 48px; /* hero spacing */ --space-16: 64px; /* page sections */ } /* Usage: sempre usar tokens, nunca valores magicos */

Token	Uso
4px	Micro gaps: entre icone e texto inline, padding de badges, gap de dots.
8px	Gaps padrao: entre botoes, padding vertical de inputs, gap de flex items relacionados.
12-16px	Padding interno de cards, espacamento entre titulo e descricao, gap de grid items.
24-32px	Entre secoes dentro de uma pagina, padding de modais, gaps de grid maiores.
40-64px	Margens de pagina, espacamento entre secoes hero, padding de containers full-width.

48 — Z-Index Scale e Layering

Z-Index Scale e Layering

A hierarquia de z-index define quais elementos ficam acima de outros. Usar valores pre-definidos evita conflitos e garante que modais sempre cubram dropdowns, que cobrem conteudo base.

z-0 — Base (conteudo)

z-10 — Sticky (header, bulk bar)

z-20 — Dropdown / Popover

z-30 — Modal overlay

z-40 — Modal / Dialog

z-50 — Toast / Tooltip

<header style="z-index: var(--z-sticky);">...</header> <div class="dropdown" style="z-index: var(--z-dropdown);">...</div> <div class="tooltip" style="z-index: var(--z-tooltip);">...</div> <div class="modal-overlay" style="z-index: var(--z-overlay);">...</div> <div class="modal" style="z-index: var(--z-modal);">...</div> <div class="toast" style="z-index: var(--z-toast);">...</div>

:root { --z-base: 1; /* conteudo normal */ --z-dropdown: 100; /* dropdowns, popovers, date pickers */ --z-tooltip: 200; /* tooltips */ --z-sticky: 300; /* sticky headers, bulk action bars */ --z-overlay: 500; /* dark overlay behind modals */ --z-modal: 1000; /* modals, dialogs, drawers */ --z-toast: 9999; /* toasts, notifications */ } /* NUNCA usar valores arbitrarios (z-index: 999999) */ /* SEMPRE usar tokens para evitar conflitos */

Camada	Valor	Elementos
Base	0	Conteudo da pagina, cards, tabelas.
Sticky	10	Headers fixos, bulk action bars, sticky columns.
Dropdown	20	Dropdowns, popovers, date pickers, autocomplete.
Modal Overlay	30	Overlay escurecido atras de modais.
Modal	40	Modais, dialogs, drawers, sidepanels.
Toast	50	Toasts, tooltips, notificacoes flutuantes.

49 — Shadow & Elevation System

Shadow & Elevation System

Sombras criam hierarquia visual e profundidade. Cada nivel de elevacao tem uma sombra progressiva, de flat (sem sombra) ate overlay (sombra forte).

Flat

none

Inputs, badges

Raised

sm

Cards, headers

Floating

md

Dropdowns, popovers

Overlay

lg

Modais, dialogs

:root { --shadow-none: none; --shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --shadow-md: 0 4px 12px rgba(0,0,0,0.1); --shadow-lg: 0 12px 40px rgba(0,0,0,0.15); --shadow-xl: 0 20px 60px rgba(0,0,0,0.2); } /* Dark mode: sombras mais fortes */ [data-theme="dark"] { --shadow-sm: 0 1px 3px rgba(0,0,0,0.3); --shadow-md: 0 4px 12px rgba(0,0,0,0.4); --shadow-lg: 0 12px 40px rgba(0,0,0,0.5); }

Nivel	Valor	Uso
Flat	`none` + border	Inputs, badges, inline elements. Usar border `#E2E8F0` para definicao.
Raised (sm)	`0 1px 3px rgba(0,0,0,0.08)`	Cards, sticky headers, table headers. Elevacao sutil.
Floating (md)	`0 4px 12px rgba(0,0,0,0.1)`	Dropdowns, popovers, notifications. Destaque do conteudo base.
Overlay (lg)	`0 12px 40px rgba(0,0,0,0.15)`	Modais, drawers, command palette. Foco total no elemento.

50 — Focus States e Keyboard Navigation

Focus States e Keyboard Navigation

Focus states sao essenciais para acessibilidade por teclado. Todo elemento interativo deve ter um ring de foco visivel e consistente. Usar :focus-visible para evitar ring em cliques de mouse.

Focus Ring

Input com foco

Link com foco

Tab Order

1

Skip to content link

2

Navegacao principal

3

Conteudo principal

4

Acoes / Botoes

Skip to Content

Pular para o conteudo principal

Aparece apenas quando o usuario pressiona Tab pela primeira vez. Posicionado no topo absoluto da pagina.

<a href="#main" class="skip-link">Pular para o conteudo</a>  <button>Acao</button>  <a href="#">Link</a>  <input type="text" />   <div class="modal" role="dialog" aria-modal="true">  </div>

/* Focus ring padrao - so aparece via teclado */ :focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(43, 108, 176, 0.4); } /* Links: outline em vez de box-shadow */ a:focus-visible { outline: 2px solid #2B6CB0; outline-offset: 2px; border-radius: 2px; } /* Remove focus ring em click de mouse */ :focus:not(:focus-visible) { outline: none; box-shadow: none; } /* Skip to content */ .skip-link { position: absolute; top: -100%; left: 16px; z-index: 9999; padding: 10px 16px; background: #2B6CB0; color: #FFFFFF; border-radius: 8px; } .skip-link:focus { top: 16px; }

Diretriz	Descricao
Focus ring	`box-shadow: 0 0 0 3px rgba(43,108,176,0.4)`. Visivel em todos os backgrounds. Usar `:focus-visible`.
Links	`outline: 2px solid #2B6CB0` com `outline-offset: 2px`. Nao usar box-shadow em links inline.
Tab order	Seguir ordem visual: skip-link → nav → conteudo → acoes. Nunca usar `tabindex > 0`.
Focus trap	Modais devem "prender" o foco dentro deles. ESC para fechar. Retornar foco ao elemento que abriu o modal.
Skip link	Invisivel ate receber foco. Primeiro elemento focavel da pagina. Leva ao `#main`.

51 — Responsive Typography Scale

Responsive Typography Scale

Escala tipografica responsiva que adapta tamanhos de fonte automaticamente com base no viewport. Usa clamp() para transicoes suaves entre breakpoints.

Display — 2rem

clamp(1.5rem, 1rem + 2vw, 2.5rem)

Heading 1 — 1.5rem

clamp(1.25rem, 0.9rem + 1.5vw, 1.75rem)

Heading 2 — 1.125rem

clamp(1rem, 0.85rem + 0.8vw, 1.25rem)

Body — 0.875rem — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula nisi eu turpis fringilla.

clamp(0.8rem, 0.75rem + 0.3vw, 0.9rem)

Caption — 0.7rem — Texto auxiliar e metadados

clamp(0.65rem, 0.6rem + 0.2vw, 0.75rem)

:root { --text-display: clamp(1.5rem, 1rem + 2vw, 2.5rem); --text-h1: clamp(1.25rem, 0.9rem + 1.5vw, 1.75rem); --text-h2: clamp(1rem, 0.85rem + 0.8vw, 1.25rem); --text-body: clamp(0.8rem, 0.75rem + 0.3vw, 0.9rem); --text-caption: clamp(0.65rem, 0.6rem + 0.2vw, 0.75rem); } <h1 style="font-size: var(--text-display)">Titulo</h1> <p style="font-size: var(--text-body)">Corpo do texto</p>

/* Responsive Typography Scale */ :root { --text-display: clamp(1.5rem, 1rem + 2vw, 2.5rem); --text-h1: clamp(1.25rem, 0.9rem + 1.5vw, 1.75rem); --text-h2: clamp(1rem, 0.85rem + 0.8vw, 1.25rem); --text-h3: clamp(0.9rem, 0.8rem + 0.5vw, 1.1rem); --text-body: clamp(0.8rem, 0.75rem + 0.3vw, 0.9rem); --text-small: clamp(0.7rem, 0.65rem + 0.2vw, 0.8rem); --text-caption: clamp(0.65rem, 0.6rem + 0.2vw, 0.75rem); /* Line-heights responsivos */ --leading-tight: 1.1; --leading-snug: 1.3; --leading-normal: 1.6; --leading-relaxed: 1.8; } /* Headings */ h1 { font-size: var(--text-display); line-height: var(--leading-tight); } h2 { font-size: var(--text-h1); line-height: var(--leading-snug); } h3 { font-size: var(--text-h2); line-height: var(--leading-snug); } p { font-size: var(--text-body); line-height: var(--leading-normal); }

Token	Min	Preferred	Max	Uso
--text-display	1.5rem	1rem + 2vw	2.5rem	Titulos de pagina, hero text
--text-h1	1.25rem	0.9rem + 1.5vw	1.75rem	Heading principal de secao
--text-h2	1rem	0.85rem + 0.8vw	1.25rem	Sub-headings
--text-body	0.8rem	0.75rem + 0.3vw	0.9rem	Corpo de texto, paragrafos
--text-caption	0.65rem	0.6rem + 0.2vw	0.75rem	Captions, timestamps, metadados

52 — Print Styles

Print Styles

Regras de impressao para garantir que relatorios, notas fiscais e documentos exportados fiquem legiveis em papel. Remove elementos interativos e otimiza tipografia para midia impressa.

SYSLED

Relatorio de Vendas

Emitido em

07/03/2026

Produto	Qtd	Total
Luminaria LED 24W	150	R$ 12.750,00
Painel Slim 18W	320	R$ 19.200,00
Fita LED 5m RGB	85	R$ 6.375,00
Total Geral		R$ 38.325,00

Pagina 1 de 1 — Gerado automaticamente pelo SYSLED ERP

<nav class="no-print">...</nav> <aside class="sidebar no-print">...</aside> <button class="no-print">Exportar</button>  <main class="print-area"> <header class="print-header"> <h1>SYSLED</h1> <span class="print-date">07/03/2026</span> </header> <table class="print-table">...</table> <footer class="print-footer">Pagina 1 de 1</footer> </main>

@media print { /* Reset */ * { color: #000 !important; background: #fff !important; box-shadow: none !important; } /* Ocultar elementos interativos */ .no-print, nav, .sidebar, .toast-container, button, .modal, .tooltip { display: none !important; } /* Tipografia otimizada para papel */ body { font-size: 12pt; line-height: 1.5; font-family: "Georgia", serif; } h1 { font-size: 18pt; } h2 { font-size: 14pt; } /* Tabelas */ table { border-collapse: collapse; width: 100%; page-break-inside: auto; } tr { page-break-inside: avoid; } th, td { border: 0.5pt solid #000; padding: 4pt 8pt; } /* Page breaks */ .page-break { page-break-before: always; } h2, h3 { page-break-after: avoid; } /* Links: mostrar URL */ a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #666 !important; } /* Rodape de pagina */ @page { margin: 2cm; @bottom-center { content: "SYSLED ERP — Pagina " counter(page); } } }

Regra	Especificacao
Elementos ocultos	Nav, sidebar, botoes, modais, tooltips, toasts. Usar class `.no-print`.
Cores	Preto e branco apenas. Sem gradientes ou sombras.
Fonte corpo	Georgia serif, 12pt, line-height 1.5 para legibilidade.
Tabelas	Bordas finas 0.5pt. `page-break-inside: avoid` em linhas.
Links	Mostrar URL apos o texto via `::after`.
Margens	2cm em todos os lados. Rodape com numero de pagina.

53 — Motion & Transition Tokens

Motion & Transition Tokens

Tokens de animacao padronizados para transicoes consistentes. Baseados em curvas de easing perceptualmente suaves, com duracoes proporcionais a complexidade do movimento.

Instant — 100ms

Hover, focus, toggle

Fast — 200ms

Fade, slide, tooltip

Normal — 300ms

Modal, drawer, expand

Slow — 500ms

Page transition, loading

Token	Valor	Uso
--duration-instant	100ms	Hover, focus ring, toggle switch, color change
--duration-fast	200ms	Fade in/out, tooltip, slide pequeno
--duration-normal	300ms	Modal open/close, accordion, drawer
--duration-slow	500ms	Page transitions, skeleton loading, onboarding
--ease-out	cubic-bezier(0.16, 1, 0.3, 1)	Elementos que entram (aparecem)
--ease-spring	cubic-bezier(0.34, 1.56, 0.64, 1)	Bounce sutil em modais e popovers
prefers-reduced-motion	reduce	Obrigatorio: desabilitar animacoes para acessibilidade

78 — Rich Text Editor (WYSIWYG)

Rich Text Editor

Componente de edição de texto rico para notas internas, descrições de ordens de produção, laudos de qualidade e comunicação entre equipes na plataforma SYSLED.

Preview — Editor Completo

B

I

U

S

H1

H2

H3

Markdown

Laudo de Inspeção — Prensa #12

Inspeção realizada em 08/03/2026 no turno da manhã. Equipamento apresentou vibração anormal no cilindro principal.

Ações recomendadas:

Substituir rolamento do cilindro

Calibrar sensor de pressão

Agendar revisão completa com @rafael.silva

"Equipamento liberado para operação com restrição de carga máxima em 80% até conclusão da manutenção."

// Sensor ID: PSR-012-A
pressao_atual: 142.7 bar
pressao_limite: 180.0 bar
status: "warning"

348 palavras • Salvo automaticamente

Descartar Salvar

Preview — Slash Commands

Digitando / no editor, abre um menu contextual de comandos rápidos.

Filtrar comandos...

H1

Heading 1

Título principal

Lista

Lista com marcadores

Checklist

Lista de tarefas

Bloco de Código

Dados técnicos, sensores

Imagem

Upload ou URL

@

Mencionar

Notificar um colega

Preview — Mention Autocomplete

Ao digitar @, abre lista de usuarios filtrada em tempo real.

RS

Rafael Silva

Técnico Manutenção

RA

Renata Almeida

Qualidade

RM

Roberto Moura

Supervisor Produção

Toolbar — Agrupamento de Ações

Grupo	Ações	Shortcut
Formatação	Bold, Italic, Underline, Strikethrough	⌘B, ⌘I, ⌘U, ⌘⇧X
Headings	H1, H2, H3	⌘⌥1, ⌘⌥2, ⌘⌥3
Listas	Bullet list, Numbered list, Checklist	⌘⇧8, ⌘⇧7, ⌘⇧9
Inserir	Link, Imagem, Código, Divisor	⌘K, —, ⌘⇧C, —
Blocos	Blockquote, Callout, Tabela	⌘⇧B, —, —
Social	Mention (@), Emoji	@, :

Especificações do Editor

Propriedade	Valor
Toolbar height	46px
Toolbar button size	30 × 30px, border-radius 6px
Content padding	20px 24px
Min height (content)	160px (expandível)
Font body	Inter, 0.88rem, line-height 1.7
Font heading	Montserrat, weight conforme nivel
Font code	JetBrains Mono, 0.72rem, bg #0F172A
Blockquote	border-left 3px #2B6CB0, bg rgba(blue, 0.04)
Mention style	color #2B6CB0, font-weight 600
Highlight (warn)	bg #FEF2F2, color #991B1B, radius 4px
Autosave	A cada 30s ou ao perder foco
Footer bar	Word count + save status + actions

Do's & Don'ts

DO

Autosave a cada 30s com indicador visual "Salvo automaticamente". Nunca perder conteúdo do usuario.

DON'T

Exibir todas as opções da toolbar de uma vez em mobile. Usar menu overflow (...) para ações menos comuns.

DO

Suportar Markdown nativo — quem digitar **texto** deve ver negrito automaticamente.

DON'T

Permitir HTML arbitrário no editor. Sanitizar input para prevenir XSS.

79 — Map & Geolocation UI

Map & Geolocation UI

Patterns de interface para mapas, rastreamento logístico, localização de máquinas e gestão de rotas na plataforma SYSLED. Essencial para monitoramento de frotas, entregas e ativos distribuídos.

Preview — Mapa com Pins de Equipamentos

● CNC Torno #04

● Caminhão #07

● Prensa #12 — ALERTA

8

8 ativos nesta area

+

−

Legenda

Online

Em Trânsito

Alerta

Offline

12 Online

3 Trânsito

1 Alerta

4 Offline

Atualizado há 30s

Preview — Location Card (Popup do Pin)

Card que aparece ao clicar em um pin no mapa. Mostra detalhes do ativo/veículo.

ONLINE — Operando

CNC Torno #04

Setor A — Galpão 2

OEE

92.4%

Uptime

18h 42m

Ver Detalhes

EM TRÂNSITO — ETA 14:30

Caminhão #07

Placa ABC-1234 — Motorista: João

Velocidade

67 km/h

Destino

Fábrica SP

Origem: Depósito RJ72%

Rastrear Rota

Preview — Geocoding Search Input

Campo de busca com autocomplete de endereços. Integra com APIs de geocoding (Google, Mapbox, etc).

Rua das Indústrias, 1 |

Rua das Indústrias, 1200

Distrito Industrial — Campinas, SP

Rua das Indústrias, 145

Zona Industrial — Jundiaí, SP

Rua das Indústrias, 87

Polo Industrial — Sorocaba, SP

Especificações dos Pins

Tipo	Cor	Tamanho	Animação	Uso
Online/Ativo	#10B981 (green)	36px pin	Nenhuma	Equipamento operando normalmente
Em Trânsito	#F59E0B (yellow)	36px pin	Nenhuma	Veículo em movimento
Alerta/Erro	#EF4444 (red)	36px pin	pulse-pin 2s infinite	Equipamento com falha
Offline	#94A3B8 (gray)	36px pin	Nenhuma	Sem comunicação
Cluster	#2B6CB0 (blue)	44px circle	Ring shadow 6px	Agrupamento de múltiplos ativos

Componentes do Mapa

Componente	Posição	Descrição
Zoom Controls	Top-right	Botões +/− empilhados, 32×32px, bg semi-transparente
Legenda	Bottom-left	Card com dots coloridos + labels, bg semi-transparente
Info Bar	Below map	Contadores por status + timestamp de atualização
Pin Tooltip	Below pin	Label com nome do ativo, bg #0F172A, font 0.62rem
Location Card	Popup on click	Card completo com KPIs, ações, barra de progresso
Search Input	Top/sidebar	Autocomplete com geocoding, border-focus #2B6CB0

Do's & Don'ts

DO

Clusterizar pins quando zoom < nível de rua. Mostrar contador no cluster para indicar quantidade de ativos.

DON'T

Mostrar centenas de pins individuais ao mesmo tempo — causa lentidão e poluição visual.

DO

Animar apenas pins de alerta/erro para chamar atenção. Status normais devem ser estáticos.

DON'T

Usar cores que não seguem a paleta semântica. Verde = ok, amarelo = trânsito/warning, vermelho = erro.

80 — Data Table Virtualization & Performance

Data Table Virtualization & Performance

Estratégias e padrões visuais para tabelas de dados massivos — virtualização de linhas, lazy loading, indicadores de carregamento parcial e otimizações de renderização para listas industriais com milhares de registros.

Tabela Virtualizada — 12.847 registros

Buscar em 12.847 registros...

Filtros 3

Exportar

Colunas

ID

Equipamento

Localização

Status

OEE

Ações

#0001

CNC Torno Horizontal T-400

Série: SL-2024-T400-0187

Galpão A — Linha 3

Online

94.2%

#0002

Prensa Hidráulica PH-200

Série: SL-2024-PH200-0043

Galpão B — Linha 1

Manutenção

67.8%

#0003

Robô Soldador RS-600

Série: SL-2023-RS600-0112

Galpão A — Célula 7

Online

88.5%

1 selecionado | Mostrando 1–50 de 12.847

Linhas por página:

50

1

2

3

...

257

Conceito de Virtualização — Viewport Rendering

Sem Virtualização

12.847 DOM nodes

Renderiza TODOS os itens no DOM

Com Virtualização

~50 DOM nodes

Renderiza apenas o viewport visível

< 16ms

Frame Budget

60fps target

50

Linhas Visíveis

padrão viewport

10

Overscan Buffer

linhas extras pré-render

97%

Redução DOM

12.847 → ~60 nodes

Redimensionar & Reordenar Colunas

Column Resize

Equipamento

min: 180px

Localização

min: 120px

Drag handle com cursor col-resize

Column Reorder (Drag & Drop)

ID

Status

Equip.

Drop zone

OEE

Feedback visual com ghost + drop indicator

Propriedade	Valor	Nota
Row Height	`48px` (compact) / `56px` (default) / `72px` (comfortable)	Consistente para cálculo de offset
Overscan	`10` linhas acima e abaixo	Evita flicker durante scroll rápido
Batch Size	`50` linhas por fetch	Balanceia rede × memória
Debounce Scroll	`16ms` (requestAnimationFrame)	Garante 60fps
Min Column Width	`80px`	Evita colunas ilegíveis
Resize Handle	`4px` visível / `12px` hit area	Acessibilidade do drag
Sort Indicator	Chevron `10×10` ao lado do header	Azul primário quando ativo
Selection	Checkbox `16×16` + row highlight	Background `primary/5%`
Skeleton Pulse	`1.5s ease-in-out infinite`	Opacity fade de 0.2 → 0.5
Pagination	Page buttons `28×28`, border-radius `6px`	Max 7 visíveis com ellipsis

Loading States para Tabelas

Initial Load

Full skeleton até primeiro fetch

Scroll Loading

Skeleton parcial no final da lista

Inline Refresh

Highlight na linha sendo atualizada

DO

Virtualizar quando > 500 linhas
Manter row height fixa para offset
Usar overscan de 10 linhas mínimo
Skeleton fade-out progressivo (opacidade)
Debounce scroll com rAF, nunca setTimeout

DON'T

Renderizar 10k+ nodes no DOM
Usar scroll infinito sem indicador de total
Row heights dinâmicas sem medição prévia
Spinner centralizado para loading parcial
Remover colunas sem permitir restaurar

83 — Kanban Board & Workflow UI

Kanban Board & Workflow UI

Quadros kanban para gestão visual de fluxos industriais — ordens de manutenção, etapas de produção, controle de qualidade e rastreamento de tarefas com drag & drop entre colunas.

Kanban — Ordens de Manutenção

Filtrar

+ Nova Ordem

Backlog 4

OM-2851 Urgente

Troca de rolamento — Torno CNC #04

10 Mar

RF

OM-2849 Média

Calibração sensor temperatura — Prensa PH-200

12 Mar

JS

Em Andamento 2

OM-2845 Urgente

Substituição bomba hidráulica — Injetora #02

60%

OM-2843 Baixa

Lubrificação guias lineares — Centro Usinagem

30%

Aguardando Peça 1

OM-2840 Média

Troca correia dentada — Esteira E-03

Peça em trânsito — ETA: 11 Mar

Arraste um card aqui

Concluído 3

OM-2838

Revisão preventiva — Compressor AR-01

Concluído em 07 Mar — 2h 15min

OM-2835

Alinhamento laser — Fresa CNC #07

Concluído em 06 Mar — 45min

Workflow Linear — Fluxo de Aprovação

Solicitação Técnico

Aprovação Supervisor

3

Execução Equipe Manutenção

4

Validação Qualidade

5

Encerramento Gestor

Anatomia do Card Kanban

OM-2851 Urgente

Troca de rolamento — Torno CNC #04

Mecânica Galpão A

60%

10 Mar

3

RF

Priority stripe — barra de 4px no topo, cor = prioridade

ID + Badge — código mono + nível de urgência

Título — máx. 2 linhas, font-weight 600

Tags — labels de categoria, localização

Progress bar — 4px height, cor semântica

Footer — data, comentários, assignee avatar

Propriedade	Valor	Nota
Column Width	`260px` (min) / `320px` (max)	Scroll horizontal quando > 4 colunas
Card Padding	`12px 14px`	Compact para maximizar cards visíveis
Card Border Radius	`8px`	Menor que section cards (16px)
Priority Stripe	`4px` height, full width no topo	Vermelho, laranja, verde, cinza
Drag Ghost	`rotate(-1deg)`, `box-shadow: 0 8px 24px`	Border dashed primary durante drag
Drop Zone	Border `2px dashed gray-200`, icon `+`	Aparece ao arrastar sobre coluna
Column Counter	Pill `padding: 1px 7px`, radius `100px`	Cor semântica por status
Assignee Avatar	`22px`, gradient bg, font `0.5rem`	Iniciais em branco, bold 700
Progress Bar	`4px` height, radius `2px`	Cor = primary (andamento) ou green
Workflow Step	Circle `44px`, connector `40×2px`	Active = primary + pulse shadow

DO

Limitar WIP (Work in Progress) por coluna
Priority stripe visível mesmo em scroll rápido
Ghost feedback durante drag com rotação sutil
Coluna "Aguardando" para bloqueios externos
Contador por coluna para visão rápida

DON'T

Mais de 6 colunas visíveis sem scroll
Cards sem ID visível (dificulta referência)
Arrastar entre colunas não adjacentes sem alerta
Ocultar cards concluídos imediatamente
Workflow steps sem indicação do responsável

93 — Dashboard Layout & Widget Grid

Dashboard Layout & Widget Grid

Layouts de dashboard organizam widgets (KPIs, gráficos, tabelas, alertas) em grids flexíveis e responsivos. Cada widget é um card autônomo com header, body e ações.

Layout Padrão — Dashboard de Manutenção

Dashboard Operacional

Online

Planta São Paulo — Última atualização: há 2 min

Últimos 30 dias

OS Abertas

47

+12% vs mês anterior

MTTR

4.2h

-18% vs mês anterior

Disponibilidade

94.7%

+2.1% vs mês anterior

Custo Total

R$ 84k

+8% vs mês anterior

OS por Tipo de Manutenção

Comparativo mensal — Preventiva vs Corretiva

Mensal

Semanal

40 30 20 10 0

Jan

Fev

Mar

Abr

Mai

Jun

Preventiva 68%

Corretiva 32%

Alertas Recentes

3

Bomba BC-12 parada

Setor B · há 15 min

Vibração alta Motor M-04

Setor A · há 1h

OS-847 prazo hoje

Carlos S. · há 2h

Ver todos os alertas →

Status das OS

148

Total

Concluídas 59 40%

Em andamento 47 32%

Aguardando 27 18%

Atrasadas 15 10%

Atividade Recente

Ver todas →

OSEquipamentoTécnicoPrazoStatus

OS-0851

Motor M-07 Ana R. 10 Mar Feita

OS-0850

Bomba BC-12 Carlos S. 15 Mar Exec.

OS-0849

Comp. C-03 Pedro L. 08 Mar Atraso

OS-0848

Esteira E-01 Maria F. 18 Mar Peça

Anatomia — KPI Card

① Label

② Icon

③ Value

④ Trend

⑤ Sparkline

Label

000

↑ +X% vs período

Widget — Estado de Loading

KPI Skeleton

Chart Skeleton

Tamanhos de Widget

1×1

KPI Card

2×1

Chart / Table

1×1

Donut / List

3×1

Wide Chart / Timeline

1×1

Alert / Quick

Specs

Propriedade	Valor
Grid	CSS Grid · 4 colunas (desktop) · 2 col (tablet) · 1 col (mobile)
Gap	12px (0.75rem)
Widget border-radius	12px
Widget padding	16px (KPI) · header 16px 16px 12px · body 16px
Widget header	title 0.82rem / 600 · subtitle 0.68rem / text-tertiary
KPI number	1.5rem / 800 · line-height 1
Trend indicator	arrow icon 12px + value 0.68rem/600 + label 0.65rem
Min widget height	120px (KPI) · 200px (chart) · 240px (table)
Refresh	Auto-refresh a cada 60s · indicador "há X min" no header

Do

Colocar KPIs mais importantes na primeira linha (acima da dobra)
Permitir filtro de data global que afeta todos os widgets
Usar cores consistentes para status em todo o dashboard
Incluir trend indicators (+/-%) para contextualizar KPIs

Don't

Não sobrecarregar com mais de 12 widgets por dashboard
Não usar gráficos 3D — preferir visualizações flat e claras
Não misturar períodos de tempo entre widgets sem indicar
Não omitir loading states — cada widget carrega independentemente

94 — Search & Filtering Patterns

Search & Filtering Patterns

Patterns de busca e filtragem permitem ao usuário encontrar e refinar dados rapidamente. Combinam search bars, filtros laterais, chips ativos e resultados com highlight.

Search Bar — Variantes

Default

Buscar ordens de serviço, equipamentos...

⌘ K

Active + Suggestions

bomba centr

Sugestões

Bomba Centrífuga BC-12 Equipamento

Bomba Centrífuga BC-08 Equipamento

OS-0823 — Troca rolamento Bomba Centrífuga OS

Barra de Filtros + Chips Ativos

Tipo

Status 2

Prioridade

Técnico

Período

Mais filtros

Filtros ativos:

Status: Em Andamento

Status: Aguardando Peça

Limpar todos

47 resultados encontrados

Ordenar:

Painel de Filtros (Sidebar)

Filtros

Resetar

Tipo de Manutenção

Preventiva 89

Corretiva 47

Preditiva 12

Prioridade

Crítica 5

Alta 18

Média 62

Baixa 63

Custo Estimado

R$ 0

—

R$ 50k

Resultados com highlight de busca:

OS-0847 — Troca de rolamento Bomba Centrífuga BC-12

Setor B · Carlos Silva · 12 Mar 2024

Em Andamento

OS-0823 — Alinhamento Bomba Centrífuga BC-08

Setor A · Ana Ribeiro · 28 Fev 2024

Concluída

Estado Sem Resultados

Nenhum resultado encontrado

Tente ajustar os filtros ou modificar o termo de busca para encontrar o que procura.

Specs

Propriedade	Valor
Search input height	42px · padding 10px 14px · border-radius 10px
Focus ring	border 2px solid primary · box-shadow 0 0 0 3px primary-light
Suggestion dropdown	border-radius 10px · shadow 0 4px 16px · max-height 320px
Filter button	padding 7px 12px · border-radius 8px · font 0.78rem
Active filter (chip)	bg primary-light · border primary · border-radius 100px · padding 4px 10px
Highlight (mark)	background #fef9c3 · padding 0 2px · border-radius 2px
Sidebar width	240px (desktop) · full-width drawer (mobile)
Range slider	track 4px · thumb 10px · border 2px solid primary
Debounce	300ms para sugestões · 500ms para resultados

Do

Debounce a busca para evitar requests excessivos (300ms)
Destacar o termo buscado nos resultados com <mark>
Mostrar contagem de itens em cada opção de filtro
Permitir limpar todos os filtros com um clique

Don't

Não recarregar a página inteira ao aplicar filtros
Não ocultar filtros ativos — sempre exibir chips visíveis
Não resetar filtros ao navegar entre páginas de resultado
Não exibir filtros com 0 resultados sem indicar

95 — Onboarding & Feature Tour

Onboarding & Feature Tour

Fluxo de boas-vindas e guias interativos para novos operadores e técnicos de manutenção. O onboarding combina um Welcome Wizard multi-step, Feature Tour com spotlight em elementos-chave da interface, Tooltips contextuais e Checklist de progresso persistente — garantindo adoção rápida e segura da plataforma SYSLED.

Welcome Wizard

Modal full-screen exibido no primeiro acesso. Stepper visual com 4 etapas: perfil, planta, preferências e conclusão.

Welcome Wizard — Step 2 de 4

SYSLED

Configurar sua Planta

Selecione a planta industrial e configure os setores que você irá monitorar.

Perfil

2

Planta

3

Preferências

4

Pronto!

Planta Industrial

Planta São Paulo

12 linhas · 847 equipamentos

Planta Campinas

8 linhas · 523 equipamentos

Setores para Monitorar

Usinagem

Injeção

Montagem

Você pode alterar estas configurações a qualquer momento em Configurações → Planta.

Passo 2 de 4

Feature Tour — Spotlight

Tour guiado com overlay escuro e spotlight no elemento-alvo. Popover posicional com seta aponta para o componente em destaque. Navegação por steps com contagem de progresso.

Feature Tour — Step 3 de 5 · Dashboard

SYSLED Dashboard

DF

Alertas Ativos 3

Vibração CNC-04 2min

Temp. Injetora #02 14min

Pressão Compressor 32min

3 / 5 Dashboard

Painel de Alertas

Monitore alertas em tempo real de vibração, temperatura e pressão dos seus equipamentos. Clique para ver detalhes e tomar ação imediata.

Coachmarks Contextuais

Dicas flutuantes que aparecem ao interagir com funcionalidades pela primeira vez. Persistem até o usuário dispensar ou concluir a ação sugerida.

Coachmarks — Variantes

Beacon Pulsante

← Badge de atenção

Crie sua primeira OS

Registre ordens de serviço para rastrear manutenções preventivas e corretivas.

Banner Inline

Configure alertas inteligentes

Defina limiares de vibração e temperatura para receber notificações automáticas antes que falhas ocorram.

Hotspot Interativo

Configurações Novo: alertas por e-mail e SMS

NOVO

Checklist de Progresso

Widget persistente no canto inferior direito que acompanha o progresso de configuração. Expansível com detalhes de cada etapa, barra de progresso e estimativa de tempo.

Onboarding Checklist — Estados

Expandido

Configure o SYSLED

3 de 6 concluídas · ~8 min restantes

Completar perfil

Selecionar planta

Configurar setores

4

Criar primeira OS ~2 min

5

Configurar alertas

6

Convidar equipe

Minimizado (FAB)

3

Floating Action Button Canto inferior direito · 3 pendentes

Barra Compacta (top)

Configuração: 50% 3/6 etapas

Conclusão (Celebration)

Tudo pronto!

Sua planta está configurada. O SYSLED já está monitorando seus equipamentos em tempo real.

Anatomia — Tour Spotlight

Anatomia — Popover do Tour

3 / 5

Título do Passo

Descrição contextual explicando o componente em destaque e como utilizá-lo.

Pular

1

Step Badge

2

Título

3

Descrição

4

Navegação

5

Progress Dots

Fluxo de Decisão — Onboarding

Decision Tree — Primeiro Acesso vs Retorno

Usuário acessa SYSLED

Primeiro acesso?

SIM

Welcome Wizard
4 steps

Feature Tour
5 spotlights

Checklist Ativo
Persistente

NÃO

Checklist
completo?

SIM

Dashboard

NÃO

Retomar
Checklist

Especificações

Propriedade	Valor	Observação
Welcome Wizard trigger	`isFirstLogin === true`	Modal full-screen, não-dismissável
Feature Tour trigger	Após wizard + 1º acesso a cada módulo	Spotlight com backdrop `rgba(15,23,42,0.72)`
Tour popover largura	`280px`	Max-width, responsivo em mobile
Tour popover offset	`12px` do elemento-alvo	Seta de 12×12px com rotação 45deg
Beacon tamanho	`14×14px` com borda 2px	Animação pulse `2s ease-in-out infinite`
Checklist posição	Bottom-right, `24px` de margem	FAB 52×52px quando minimizado
Checklist persistência	`localStorage`	Mantém estado entre sessões
Progress bar height	`4px`	Gradient `#10B981 → #34D399`
Coachmark dismiss	Click "Entendi" ou ação concluída	Armazena flag em `localStorage`
Celebration confetti	CSS-only (pseudo-elements)	Exibido ao completar 100% do checklist
Mobile behavior	Wizard full-screen; Tour como bottom-sheet	Checklist colapsa em top-bar compacta
Acessibilidade	`role="dialog"`, `aria-modal="true"`	Focus trap no wizard e tour popover

Do's & Don'ts

Do

Permitir pular o wizard e o tour a qualquer momento
Salvar progresso do checklist entre sessões
Contextualizar cada step do tour com dados reais da planta do usuário
Usar spotlight com backdrop escuro para foco claro no elemento
Exibir celebração visual (confetti) ao completar o onboarding
Oferecer opção de re-assistir o tour em Configurações → Ajuda

Don't

Não bloquear a interface — sempre permitir escape/dismiss
Não exibir tour de mais de 7 steps (fadiga de onboarding)
Não repetir tour automaticamente a cada login
Não ocultar o botão "Pular" durante qualquer etapa
Não exigir conclusão de 100% do checklist para usar a plataforma
Não usar coachmarks em ações que o usuário já executou

96 — Offline Mode & Sync UI

Offline Mode & Sync UI

Padrões para operação sem conectividade em ambientes industriais — chão de fábrica com sinal instável, áreas de manutenção sem cobertura Wi-Fi e inspeções em campo. O SYSLED mantém funcionalidade crítica offline com fila de sincronização, indicadores de estado de rede, resolução de conflitos e feedback visual durante a reconexão.

Connection Status Bar

Barra fixa no topo da aplicação indicando o estado atual da conexão. Transiciona suavemente entre 4 estados com cores e ícones distintos.

Status Bar — 4 Estados

Online Dados sincronizados · Última sync: agora

Conexão estável — full sync ativo

Conexão Instável Sync parcial · Fila: 3 ações pendentes

Sinal fraco — alterações sendo enfileiradas localmente

Modo Offline Fila: 12 ações · Último sync: 14:32

Sem conexão — modo offline ativo, dados salvos localmente

Sincronizando...

8/12 ações

Reconectado — enviando ações da fila local para o servidor

Componentes Offline-Ready

Elementos da interface que adaptam seu comportamento e aparência visual quando operam sem conectividade. Badges, overlays e restrições visuais comunicam o estado ao usuário.

Componentes — Online vs Offline

Online

OS-3847 Em Andamento

Troca de rolamento — Torno CNC #04

Técnico: Rafael Souza · Prazo: 12 Mar

Offline

OS-3847 OFFLINE

Em Andamento

Troca de rolamento — Torno CNC #04

Técnico: Rafael Souza · Prazo: 12 Mar

2 alterações aguardando sync

Disponibilidade de Funcionalidades

Funcionalidade

Online

Offline

Visualizar OS

●

Criar/Editar OS

●

◐ fila

Registrar leituras sensor

●

Capturar fotos inspeção

●

Dashboard em tempo real

●

✕ snapshot

Relatórios & Export

●

✕

Notificações push

●

✕

● Disponível

◐ Parcial (enfileirado)

✕ Indisponível

Sync Queue — Fila de Sincronização

Painel acessível pelo ícone de sync na topbar. Mostra todas as ações pendentes com status individual, timestamp, prioridade e opção de retry manual.

Sync Queue Panel — Reconectando

Fila de Sync

5 ações pendentes

Sincronizando... 3/5

Atualizar OS-3842 → Concluída

14:32 · Sync OK

Registrar leitura sensor T-104

14:33 · Sync OK

Upload foto inspeção — Prensa PH-200

Enviando... 2.4 MB / 3.1 MB

Criar OS-3848 — Manutenção preventiva

14:45 · Aguardando

Atualizar checklist Esteira E-03

Erro: timeout — tente novamente

Resolução de Conflitos

Quando o mesmo registro é editado offline por múltiplos usuários ou no servidor, o sistema detecta conflitos e apresenta uma interface de merge para o usuário decidir qual versão manter.

Conflict Resolution — Modal

Conflito Detectado

OS-3842 foi modificada enquanto você estava offline

Sua Versão (Local)

Status

Concluída EDITADO

Observação

Rolamento substituído, testado OK às 16h

Editado há 45 min · Offline

Versão do Servidor

Status

Em Revisão EDITADO

Observação

Supervisor solicitou revisão da peça

Editado há 30 min · Por: Carlos M.

Notificações de Estado

Toasts que informam transições de estado de rede em tempo real. Aparecem automaticamente e somem após a ação ser reconhecida.

Toasts — Transições de Rede

Conexão perdida

Modo offline ativado · Dados salvos localmente

Reconectado

Sincronizando 5 ações pendentes...

Sync concluído

5 ações sincronizadas com sucesso

1 conflito encontrado

OS-3842 precisa de revisão manual

Storage Local & Capacidade

Indicador do espaço utilizado pelo cache offline. Informa ao técnico quanto armazenamento local ainda está disponível e oferece opção de limpar dados antigos.

Storage Indicator — Configurações

Armazenamento Offline

127 MB de 200 MB utilizados

OS & Checklists 70 MB

Leituras Sensor 36 MB

Fotos Inspeção 20 MB

Manuais & Docs 1 MB

Especificações

Propriedade	Valor	Observação
Status bar posição	Fixed top, `z-index: 9999`	Acima de todos os elementos da UI
Status bar altura	`36px`	Compact; collapsa após 5s online
Offline detection	`navigator.onLine` + heartbeat	Ping a cada 30s para confirmar conectividade real
Sync queue storage	`IndexedDB`	Fila FIFO com prioridade por tipo de ação
Max offline storage	`200 MB` (configurável)	Alerta em 80% (160 MB); bloqueio em 95%
Sync retry strategy	Exponential backoff	1s → 2s → 4s → 8s → max 60s entre retries
Conflict detection	`updatedAt` timestamp	Compara versão local vs servidor
Conflict resolution	Manual (modal) ou auto-merge	Auto-merge para campos não conflitantes
Offline badge	Barra tracejada vermelha no topo do card	`repeating-linear-gradient`
Toast duração	Offline: persistente; Online: `5s`	Conflito: persistente até ação do usuário
Service Worker cache	Cache-first para assets; Network-first para dados	Precache de rotas críticas no install
Acessibilidade	`role="status"`, `aria-live="polite"`	Anúncia mudanças de estado para screen readers

Do's & Don'ts

Do

Pré-cachear dados críticos (OS abertas, checklists, manuais) ao detectar boa conexão
Exibir claramente quais ações foram salvas localmente e aguardam sync
Permitir o técnico trabalhar normalmente com feedback visual de "modo offline"
Apresentar conflitos lado a lado com diff visual para decisão informada
Usar exponential backoff para retries — nunca bombardear o servidor
Indicar capacidade restante de armazenamento local

Don't

Não bloquear a interface inteira ao perder conexão — manter funcionalidade offline
Não descartar dados locais sem confirmação explícita do usuário
Não resolver conflitos automaticamente sem mostrar ao usuário o que mudou
Não enfileirar ações destrutivas (delete) offline sem warning extra
Não exibir dados em tempo real sem indicar que são snapshot (pode estar desatualizado)
Não ignorar o limite de storage — alertar antes de atingir o máximo

UX/UI — Patterns Avançados

Command Palette (Cmd+K)

Accordion e Collapsible Sections

Timeline e Activity Log

Ratings, Reviews e Feedback

Formularios Multi-Step

Avatar Upload e Image Cropper

Color Picker e Swatch Selector

Date Picker e Range Selector

Toast Positioning e Stacking

Skeleton Loading Patterns

Error Handling Patterns

Confirmation Dialogs

Search Results e Highlight

Progress Indicators (Upload, Import, Export)

Responsive Navigation Patterns

Micro-copy e Placeholder Guidelines

Spacing & Layout Tokens Visuais

Z-Index Scale e Layering

Shadow & Elevation System

Focus States e Keyboard Navigation

Responsive Typography Scale

Print Styles

Motion & Transition Tokens

Rich Text Editor

Preview — Editor Completo

Preview — Slash Commands

Preview — Mention Autocomplete

Toolbar — Agrupamento de Ações

Especificações do Editor

Do's & Don'ts

Map & Geolocation UI

Preview — Mapa com Pins de Equipamentos

Preview — Location Card (Popup do Pin)

Preview — Geocoding Search Input

Especificações dos Pins

Componentes do Mapa

Do's & Don'ts

Data Table Virtualization & Performance

Kanban Board & Workflow UI

Dashboard Layout & Widget Grid

Layout Padrão — Dashboard de Manutenção

Dashboard Operacional

OS por Tipo de Manutenção

Alertas Recentes

Status das OS

Atividade Recente

Anatomia — KPI Card

Widget — Estado de Loading

Tamanhos de Widget

Specs

Do

Don't

Search & Filtering Patterns

Search Bar — Variantes

Barra de Filtros + Chips Ativos

Painel de Filtros (Sidebar)

Filtros

Estado Sem Resultados

Nenhum resultado encontrado

Specs

Do

Don't

Onboarding & Feature Tour

Welcome Wizard

Configurar sua Planta

Feature Tour — Spotlight

Painel de Alertas

Coachmarks Contextuais

Checklist de Progresso

Anatomia — Tour Spotlight

Fluxo de Decisão — Onboarding

Especificações

Do's & Don'ts

Offline Mode & Sync UI

Connection Status Bar

Componentes Offline-Ready

Sync Queue — Fila de Sincronização

Resolução de Conflitos

Notificações de Estado