Feedback & Estados // Design System
Alma da Marca Pitch V4

Feedback que
orienta

Mensagens, espera, confirmações e estados que mostram o próximo passo

Feedback de interfaceClareza antes de movimentoV4
01 // Feedback de ação
Diga o que aconteceu
e o que fazer agora.
Use alertas quando a pessoa precisa entender uma mudança, revisar uma escolha ou retomar uma ação. A mensagem deve ser direta e indicar o próximo passo.
Próximo passo disponível
O contexto está pronto para sua revisão.
Orientar
Alteração registrada
A equipe já pode seguir para a próxima etapa.
Confirmar
Vale revisar antes
Confira este ponto antes de continuar.
Prevenir
Não foi possível concluir
Tente novamente ou escolha outra rota.
Recuperar
02 // Feedback breve
Apareça sem
interromper.
Toasts confirmam ações de baixo risco e podem ser fechados por teclado ou clique. Não use esse formato para decisões críticas.
Rascunho atualizado
Confirmação
Não foi possível atualizar
Falha
Revise os campos destacados
Revisão
Novo contexto adicionado
Contexto
03 // Confirmações
Quando a escolha
merece uma pausa.
Use um diálogo apenas quando a ação tem impacto ou não pode ser desfeita. Explique a consequência e apresente uma rota segura de retorno.
Ação crítica
04 // Atualizações que pedem atenção
Mostre o que
muda a conversa.
Badges servem para sinalizar itens que pedem leitura. O número não é enfeite: ele precisa corresponder a uma lista acessível de pendências.
2 itens pedem leitura
Atualizações pendentes
05 // Estados vazios
Quando não há
nada para mostrar.
Um estado vazio explica o cenário e oferece apenas a próxima ação que realmente existe. Sem culpa, sem becos sem saída.
Nenhum material por aqui
Quando houver algo para revisar, ele aparece neste espaço.
Nada encontrado
Revise a busca ou tente outro termo.
Não carregou desta vez
Confira a conexão e tente novamente.
Este espaço é restrito
Peça acesso à pessoa responsável pelo contexto.
Permissões
06 // Estados de espera
Espere sem
perder o contexto.
Mostre que algo está acontecendo, preserve a estrutura que vai aparecer e evite animações excessivas. O tempo de espera nunca deve parecer uma falha silenciosa.
Regra Maggium:use skeletons quando o layout já é conhecido; use mensagem de processamento quando a próxima tela ainda depende de uma decisão ou operação.
Conteúdo mantém a estrutura
Organizando a visualização...
Espera contextual
Tamanhos de Spinner
Folha de Confirmação
Confirmar
ações críticas.
Três variantes: padrão, destrutivo e carregando.
Padrão
Destrutivo
Carregando
Barras de Progresso
Progresso
visual.
Barras horizontais animadas com quatro níveis de preenchimento.
Baixo — 25%
Médio — 50%
Alto — 75%
Completo — 100%
08 // Skeleton Maggium
A estrutura aparece
antes do conteúdo.
O skeleton herda a forma da interface que está carregando. Ele reduz a incerteza sem inventar informações, promessas ou dados.
Carregando estrutura de exemplo.
Estados Interativos
Botões e
inputs.
Todos os estados visuais de botões e campos de entrada.
PadrãoPadrão
HoverHover
FocoFoco
AtivoAtivo
DesabilitadoDesabilitado
CarregandoCarregando
Estados de Botão
Padrão
Hover
Foco
Erro
Sucesso
Desabilitado
Estados de Input
Indicadores de Status
Presença e
disponibilidade.
Badges de status com dot pulsante para indicar presença do usuário.
Online
Offline
Ausente
Ocupado
Inativo
Badges de Status
Transições
Animações de
entrada.
Seis padrões de transição para elementos de interface.
Fade In
Opacity 0 → 1
200ms ease
Slide Up
translateY(20px) → 0
300ms ease-out
Scale
scale(0.96) → 1
250ms cubic-bezier
Blur In
blur(8px) → 0
400ms ease
Expand
height 0 → auto
350ms ease-in-out
Reveal
clip-path reveal
500ms ease