States
Estados de interface que comunicam status, feedback e contexto. Cada estado tem visibilidade e intenção claras.
Interactive States
Estados de interação para elementos clicáveis e focáveis.
Estado padrão do elemento. Sem interação ativa.
Luminosidade +10%. Indica interatividade.
Ring 2px primary. Acessibilidade garantida.
Pressionado momentaneamente. Feedback tátil.
Opacidade 50%. Sem interação.
Indica operação em curso.
Status States
Estados de sistema e feedback de operações.
Operação bem-sucedida
Use quando uma ação é completada com sucesso. Comunica confirmação e encoraja continuidade.
Erro crítico
Use quando uma operação falha ou encontra um problema bloqueante. Requer atenção imediata.
Atenção necessária
Use para alertas não-críticos que requerem atenção ou confirmação do usuário.
Informação adicional
Use para fornecer contexto, dicas ou informações complementares sem urgência.
Scanline Effect
Efeito de luz vertical para estados ativos e elementos destacados.
@keyframes scan {
0%, 100% { transform: translateY(-100%); }
50% { transform: translateY(100%); }
}
.scan-active {
position: relative;
overflow: hidden;
}
.scan-active::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to bottom, transparent, var(--primary-glow), transparent);
animation: scan 2s infinite;
}Component Patterns
Padrões de estados específicos para componentes do sistema.
Input Field States
Card States
Card inativo
Estado padrão de visualização.
Card em hover
Background +10% luminosidade.
Card ativo
Highlight com glow effect.
Card desabilitado
Opacidade 50% sem interação.