DS Validation — patterns lado-a-lado

Smoke test visual do design system. Se algum pattern drift entre surfaces, salta aqui antes de aprovar deploy.

Auth cards · 3 estados

.auth-card · max-width 480px

Entrar

Receba um link mágico no seu e-mail

default

Verificar

Digite o código de 6 dígitos

loading

Bloqueado por 15 min

Muitas tentativas. Tente novamente mais tarde ou use código de recuperação.

lockout

OTP row · 6 slots × 5 estados

.otp-row + .otp-slot · aspect-ratio 1:1 · gap 4 mob / 8 tablet
default + typing
empty
parcial (3 dígitos)
error / expired / lockout
error
lockout (disabled)
Expira em 0:42

Wizard stepper · 4 dots × 4 progresses

.wizard-stepper + .wizard-step · ADR-0021 (4 steps onboarding)
step 1 (admin)
1
Admin
2
Empresa
3
Certificado
4
Confirmar
step 2 (empresa)
Admin
2
Empresa
3
Certificado
4
Confirmar
step 3 (certificado)
Admin
Empresa
3
Certificado
4
Confirmar
step 4 (confirmar)
Admin
Empresa
Certificado
4
Confirmar

Buttons · variants × states

.btn-primary / .btn-secondary / .btn-link
primary · 4 states
secondary · 3 states
link · ghost

Fields · variants × states

.field-input / .field-select / .field-checkbox
input · 4 states
E-mail inválido
select · default + hint
Selecione a UF da empresa (IBGE 2-letras)
checkbox · default + checked

State cards · success / warn / danger

.auth-state-card.{success|warn|danger}
success

NF emitida

Chave de acesso copiada pra área de transferência.

warn

Certificado expira em 7 dias

Renove antes pra evitar bloqueio na emissão.

danger

Bloqueado por 15 min

Muitas tentativas. Tente novamente mais tarde.

Banners · info / warn / danger

.auth-banner.{info|warn|danger} · border-left accent
info
Continuando sessão
Você parou no passo Empresa em 16/abr 14h32 via web.
warn
3 tentativas restantes
Após isso, lockout por 15 min.
danger
Falha no envio
Verifique seu e-mail ou tente em alguns minutos.

Feedback · resume banner + autosave indicator

.resume-banner / .autosave-indicator · ADR-0022
resume banner
Continuando de onde você parou em 16/abr · 14h32 via web
autosave · 3 estados
Salvando…
Salvo
Erro ao salvar

Icon circles · 4 variants

.auth-icon-circle{,.success,.warn,.danger}
default (primary)
success
warn
danger