Design system · SaúdeProjeto acadêmico
Acalanto Saúde
Design system para telemedicina com acessibilidade WCAG AA como requisito de base, não como ajuste final.
Estudo conceitual desenvolvido em contexto acadêmico. Marca, pessoas e dados são fictícios.
- Papel
- UX/UI Design · Documentação
- Contexto
- Projeto acadêmico
- Ferramentas
- Figma
Visão geral
O desafio
Pacientes de telemedicina incluem idosos, pessoas com baixa visão e usuários em momentos de estresse. O desafio: projetar um sistema em que a escolha acessível seja a escolha padrão para qualquer designer que o utilize.
Como foi resolvido
O sistema foi estruturado em tokens de três camadas (primitivos → semânticos → componente), com todas as combinações de cor de texto validadas para contraste AA. Foram definidos alvos de toque de no mínimo 48px, tipografia base de 18px e estados que nunca dependem só de cor.
O que mudou
Em testes de usabilidade moderados com 6 participantes acima de 60 anos, todos concluíram o agendamento de consulta sem ajuda.
0%
pares de texto com contraste AA
0px
tamanho base do texto
0px
alvo de toque mínimo
Processo
Pesquisa
Entrevistas com 5 pacientes e auditoria de 4 apps de saúde do mercado.
Fundamentos
Paleta validada em contraste AA, inclusive sobre os fundos de feedback, e texto base de 18px.
Componentes
Cada componente documentado com anatomia, estados, uso correto e incorreto.
Validação
Teste de usabilidade moderado.
Telas
Design system
Acalanto DS
Um sistema calmo e legível: verde-azulado como cor de confiança, coral apenas para alertas e superfícies com muito respiro.
Acessível por padrão
Toda combinação de texto documentada já passa em contraste AA, inclusive sobre os fundos de feedback. Não existe par proibido para decorar.
Calma clínica
Movimento mínimo, cores frias e uma única ação em destaque por vez.
Nunca só cor
Todo estado combina cor, ícone e texto.
Aprendizados
Os testes com pessoas acima de 60 anos mudaram a escala tipográfica: 16px não é base suficiente para saúde.