Design system Clínica 360
Direção v0.3 (decisão de Rafael, 01/10/2026): painel no estilo das referências Netflow — shell clara flutuante, cartões brancos sobre cinza muito claro, controles em cápsula, ação preta e acento laranja — e menu lateral expansível azul, claro e escuro. Conteúdo odontológico; nenhuma marca, foto ou texto das referências foi copiado. NexHiro e versões anteriores foram substituídos.
Princípios
Densidade confortável, alvos ≥ 40 px (44 px em toque), números tabulares, sem animações que atrasem o trabalho.
Todo status combina texto e ícone; cor é reforço. Funciona em daltonismo, impressão e alto contraste.
Toda ação de arraste tem equivalente por botão/formulário e mostra as consequências antes de confirmar.
A interface não afirma envio, pagamento ou gravação sem evidência. Simulação é rotulada.
Rótulos “Administrativo” e “Clínico” deixam claro de onde vem a informação. O servidor decide o que é enviado.
A organização muda nome, logo e cor principal; sucesso, atenção, erro e foco não mudam.
Shell e composição do painel
Fundo externo, shell flutuante com borda branca arredondada, barra superior com navegação em cápsula, saudação, faixa de comunicado, cartões de resumo, barra de visualização e quadro por situação. O fundo paisagístico da referência não está disponível como asset licenciado: usamos um degradê céu/gramado provisório (token --backdrop), substituível por --backdrop-image.
Movimento
Durações centralizadas em tokens.css (valores propostos, a validar). Só transform e opacity em animações; nada de bounce, pulsação contínua ou espera artificial. Com “reduzir movimento” (sistema ou Configurações), deslocamentos e escalas somem e as durações vão a ~0.
| Uso | Token | Valor |
|---|
Cores e contraste
Tokens semânticos (use sempre o token, nunca o hexadecimal). A razão de contraste é calculada nesta página a partir dos valores reais aplicados.
Tipografia
Geist (licença aberta SIL OFL), servida localmente junto com o sistema — sem depender de serviço externo de fontes. Fallback: fonte do sistema (Segoe UI no Windows). Corpo 16 px; mínimo 13 px apenas em rótulos curtos e em negrito.
Espaço, raio e elevação
--r-sm 6
--r-md 10 (controles)
--r-lg 14 (cartões)
--r-xl 20Ícones
Conjunto próprio de traço 1,8 px em grade 24. Ícone decorativo usa aria-hidden; botão só com ícone exige aria-label.
Botões
Formulários
Com DDD. Não é usado como identidade única.
aria-invalid e aria-describedby; ao enviar com erro, resumo no topo com links para cada campo e nada do que foi digitado é apagado. Data e hora usam os seletores nativos do navegador (acessíveis, teclado e celular) — componente próprio só se a validação com a clínica mostrar necessidade.Status e badges
Situação do atendimento e confirmação do agendamento são dimensões separadas e aparecem lado a lado.
Cartões e indicadores
Indicador sempre informa período, regime (caixa, competência, produção) e cobertura da amostra. Cada número deve abrir os registros de origem (etapa 8).
Tabela
| Parcela | Situação | |||
|---|---|---|---|---|
| Bruno Albuquerque | 2/6 | 20/09/2026 | R$ 350,00 | Vencida |
| Camila Castro | 1/3 | 05/10/2026 | R$ 1.200,00 | A vencer |
| Diego Fontes | 4/4 | 12/10/2026 | R$ 180,50 | Parcial |
Abas
Sem permissão
Conteúdo clínico não disponível para sua função.
Drawer, dialog e toast
Estados de tela
Componentes da agenda
Cartão compacto: horário, paciente, procedimento, cadeira/profissional, situação (barra + ícone + texto acessível) e confirmação. Tempo de espera aparece após a chegada. Valores financeiros e alertas clínicos nunca aparecem no cartão.
White label
A organização define nome, logo, cor de destaque (laranja da referência) e cor do menu (azul). O sistema mantém o tom vivo em elementos gráficos e gera variações com contraste mínimo de 4,5:1 para texto; avisa quando ajusta. A ação principal (preto) e as cores de estado não mudam. Teste com o exemplo amarelo.
Acessibilidade — critérios adotados
- Meta: WCAG 2.2 nível AA (a verificar com auditoria manual e leitor de tela antes do piloto).
- Contraste ≥ 4,5:1 para texto e ≥ 3:1 para bordas de foco e componentes; validação automática da cor da marca.
- Tudo operável por teclado: Tab/Shift+Tab, Enter/Espaço, Esc fecha sobreposições, setas nas abas e no autocomplete.
- Foco visível em todos os elementos; link “Pular para o conteúdo”; foco movido para o título ao trocar de tela.
- Alternativa ao arraste em toda interação (agenda, upload, quadro comercial futuro).
- Rótulos, descrições de erro e regiões vivas (
aria-live) para resultados assíncronos. prefers-reduced-motionremove animações; modo de alto contraste do Windows suportado no foco.- Alvos de toque de 44 px em dispositivos de toque; zoom de 200% sem perda de conteúdo.