Design System · Interaction Interaction States All interaction states of system components — hover, focus, active, disabled, loading, error and success. Complete documentation for visual consistency.
States
Hover States
The system uses 4 hover patterns: lift (elevation via translateY), color shift, underline and background tint. Each component uses the most appropriate one.
Button Lift Hover
Card Lift Longevidade
Protocolo Ativo
Hover elevado
/* Padrões de hover do sistema */ .btn:hover { transform : translateY(-2px) ; box-shadow : 0 8px 24px rgba(242,126,75,.35) ; }.card:hover { transform : translateY(-4px) ; box-shadow : var(--shadow-lg) ; }.link:hover { border-bottom-color : var(--orange) ; }.list-item:hover { background : rgba(242,126,75,.05) ; }
Accessibility
Focus Visible
The focus ring uses an orange outline with offset to ensure keyboard accessibility. Always visible — never remove the outline without a replacement.
/* Focus ring acessível */ :focus-visible {outline : 3px solid rgba(242,126,75,.5) ;outline-offset : 3px ;/* Nunca usar apenas: */ *:focus { outline : none ; } /* ← INCORRETO sem substituição */
States
Active / Pressed
The pressed state uses scale(0.97) + shadow reduction to simulate physical pressure. Fast transition (100ms) for immediate feedback.
Button Pressed Pressionado
Card Active Ativo
Scale 0.98
Shadow reduzido
List Selected NeuroFocus Blend
Item selecionado
.btn:active { transform : scale(.97) ; box-shadow : none ; }.card:active { transform : scale(.98) ; }/* Transição de active deve ser imediata (0ms) */ .btn { transition : all .2s ease ; }.btn:active { transition-duration : 0ms ; }
States
Disabled
Disabled elements use opacity: 0.4, cursor: not-allowed and pointer-events: none. Colors never change — only opacity is reduced.
Button Disabled Desabilitado
Input Disabled
Card Disabled Bloqueado
Protocolo Elite
Requer plano Pro
List Item Disabled ExoCore Module
Não disponível
.btn:disabled, .disabled {opacity : .4 ;cursor : not-allowed ;pointer-events : none ;transform : none !important ;box-shadow : none !important ;
States
Loading State
The loading state uses a shimmer overlay on cards and an embedded spinner on buttons. Component dimensions are maintained to avoid layout shift.
Button Loading Salvar protocolo
Card Loading Carregando
Sincronizando
Aguarde...
States
Error State
Error state uses red (#dc2626) on the border, warning icon and descriptive message. Applies to inputs, cards and list items.
List Error Falha no protocolo
Verifique as configurações
States
Success State
Success state uses green (#16a34a) with a check icon. Applied after action confirmation or positive validation.
Card Success VitaAZ Stack
Funcionando perfeitamente
Reference
States Reference Table
Complete reference: component, state and applied CSS. Use as an implementation guide.
Componente Estado CSS Principal Token Button Hover translateY(-2px) + shadow-lg --orange Button Focus outline: 3px solid rgba(orange,.5) --orange Button Active scale(.97) + box-shadow: none — Button Disabled opacity: .4 + pointer-events: none — Input Focus border-color: orange + box-shadow ring --orange Input Error border-color: #dc2626 + red shadow #dc2626 Input Success border-color: #16a34a + green shadow #16a34a Card Hover translateY(-4px) + shadow-lg --shadow-lg Card Active scale(.98) + shadow reduzido — Card Error border-color: #dc2626 + bg red tint #dc2626 Link Hover border-bottom-color: orange --orange List Item Selected bg orange tint + border orange --orange