[DASHBOARD Q.A - LOGIN] Telas de Alta Fidelidade

[GabrielAderaldo]

Este card contempla a entrega da versão final visual da tela de login, com todos os estilos, componentes e interações definidas segundo o design system do projeto, utilizando como base o Material 3.

É aqui que o visual encontra o comportamento: a tela precisa estar completa, navegável no Figma, e pronta para ser implementada com base em tokens de design e documentação visual. Todos os estados (carregando, erro, foco, hover, inativo) devem ser representados com animação suave, contraste acessível e fluidez visual.

---

🎯 Objetivo:

Entregar a versão mais próxima possível do que será o produto real, para:

• Validar experiência visual e emocional do usuário
• Testar em responsividade real (não só por grid)
• Ser usado como referência final pelos devs

---

✅ Deve conter:

• Layout final da tela de login, com:

  • Logo da aplicação em seu formato definitivo
  • Título, subtítulo, explicação do login
  • Botão “Entrar com GitHub” com ícone oficial, cor e sombra correta
  • Tipografia e cores definidas
  • Responsividade ajustada para:
    • Desktop (mín. 1440px)
    • Mobile (mín. 360px)
    • Tablet

• Interações completas:

  • Hover, Focus, Pressed, Disabled, Loading
  • Transições e feedbacks visuais animados
  • Feedback visual claro para erro de autenticação

• Temas e acessibilidade:

  • Dark Mode (obrigatório)
  • Contraste mínimo AA (idealmente AAA)
  • Suporte a leitura por teclado e leitores de tela
  • Componente de acessibilidade visível para alertas

• Prototipação navegável no Figma:

  • Fluxo completo:
    • Tela inicial
    • Clique no botão
    • Tela de loading
    • Tela de erro
    • Redirecionamento (simulado) ao dashboard

---

🖌️ Guideline de Estilo:

• Seguir Material Design 3 — Expressive:
  https://m3.material.io/styles/motion/overview

• Cores, componentes e sombras devem vir de:

  • Material Tokens
  • Sistema de Design próprio da Envolve (se disponível)

---

✅ Critérios de Aceite (QA)

Para que este card seja considerado finalizado, os seguintes critérios devem ser atendidos:

Item	Obrigatório	Observação
Prototipação navegável no Figma	✅	Com todos os fluxos funcionando
Layout responsivo	✅	Verificado em tela >=1440px e <=360px
Dark Mode implementado	✅	Como estilo alternativo
Componentes seguem Material 3 Expressive	✅	Sem customizações arbitrárias
Estados visuais completos (hover, etc)	✅	Visíveis e funcionais
Contraste acessível (WCAG AA mínimo)	✅	Validado por ferramenta ou extensão
Botão com diretriz oficial do GitHub	✅	Ver: https://docs.github.com/en/apps/...
Toda decisão visual documentada	✅	Com comentários no Figma ou documentação auxiliar

Important

A QA deve revisar funcionalidade da navegação, acessibilidade básica e coerência com as definições de design da Envolve.

---

📌 Lembretes:

• Caso a identidade visual da Envolve ainda não esteja definida, usar tokens neutros e registrar em design-tokens.md.
• Toda divergência visual que surgir nesse ponto precisa ser resolvida com o P.O. antes da próxima etapa (Card 4).

---