Plataforma Clínica Multiperfil · HealthTech · Design System
CUIDAPLUS
Plataforma Clínica Multiperfil · HealthTech · Design System
Contexto
Independente
Ferramenta
Figma · Variables
Sistema
4 coleções · 223 variáveis
Status
Em construção
Identidade Visual
O ícone une dois símbolos num só traço: a cruz da saúde desenhada como peça de encaixe — porque o CuidaPlus existe para conectar perfis (paciente, profissional, clínica) numa jornada só — sobreposta a uma figura em movimento, quase uma pincelada, que representa o cuidado como algo vivo, não estático.
O roxo carrega confiança e seriedade clínica. No modo escuro, a marca não apenas escurece: ela troca de identidade para um verde-limão vibrante — mesma personalidade, outro tom de voz.
Funcionalidade
A Home resume o essencial em um golpe de vista: adesão ao plano de saúde, consultas do dia, doses de medicamento, hidratação e humor.
Abaixo, o progresso de tratamentos ativos e um atalho para os serviços mais usados — carteirinha, agenda, nutrição, calculadoras, vacinas e exames.
Funcionalidade
Login por e-mail e senha ou OAuth (Google/Apple), com recuperação por link e verificação por código.
Para perfis profissionais e dados clínicos, o sistema oferece configuração de autenticador (TOTP) como camada extra de segurança — desenhada tela a tela, do QR code à confirmação.
Arquitetura de Fluxos
Nenhuma tela isolada: autenticação, recuperação de senha, configuração de autenticador e um onboarding que se ramifica por perfil — Paciente ou Profissional de Saúde, cada um com seus próprios campos, validações e exigências (como CRM e vínculo com clínica) — com estados de erro e confirmação desenhados junto.
Design System
O CuidaPlus foi construído com variáveis do Figma em vez de valores fixos por componente — 4 coleções, 223 tokens ao todo. Um ajuste de cor, espaçamento ou fonte se propaga automaticamente por todas as telas.
Cores primitivas alimentam uma coleção de Tema com modos Light e Dark. A marca não apenas escurece: ela troca de identidade — roxo no claro, verde-limão no escuro — mantendo contraste e legibilidade nos dois.
A coleção de Tamanho responde por breakpoint — Mobile, Tablet e Desktop — cobrindo tipografia, grid e componentes.
4
coleções de variáveis
223
tokens ao todo
2
modos · light & dark
3
breakpoints responsivos
Um detalhe deliberado: a área mínima de toque é 44px para o Paciente e 32px para o Profissional de Saúde — touch-target-patient e touch-target-professional são variáveis separadas, porque o sistema já assume que são dois públicos com necessidades de usabilidade diferentes.
Marca em Dois Modos
A mesma identidade, dois tons de voz — resultado direto da coleção de Tema aplicada também aos ativos de marca.
