Começar
Princípios
01 · Marca = ação · IA tem cor própria
Por quê
A regra é a DISTÂNCIA entre as duas cores, não o matiz. No tema Claro são verde e roxo; no Azul clínico, azul e fúcsia — porque com a marca em azul o violeta cairia pra 41° de distância e os dois fundos suaves virariam a mesma cor no olho. Um tema que aproximasse as duas quebraria a convenção mesmo mantendo os hex de origem.
O que isso proíbe
Botão de IA em verde. Selo de sugestão do agente sem Sparkles. Roxo em qualquer coisa que a pessoa fez sozinha.
02 · Discrição > drama
Por quê
A clínica olha essa tela o dia inteiro, entre um paciente e outro. Sombra de verdade só em dropdown aberto, tooltip, modal e na barra de ações em massa — o que FLUTUA. O resto acorda no foco enquanto os vizinhos apagam.
O que isso proíbe
Card com shadow-lg em repouso. Cor saturada como parede. Alerta vermelho de tela cheia pra um erro de rede.
03 · Respiro generoso
Por quê
A clínica tem alta densidade de informação — nome, telefone, status, horário, valor, tudo na mesma linha. O espaço é o que deixa isso legível de relance. Comprimir é decisão consciente de uma tela densa, nunca descuido.
O que isso proíbe
Modal de 400px com formulário de seis campos. Grade de cards com gap-2. Botão de 28px de altura como CTA.
04 · tabular-nums em todo número
Por quê
Número que dança quebra a leitura em coluna — e a tela toda é coluna de número. Com dígitos proporcionais, 1.111 e 8.888 têm larguras diferentes e o olho perde o alinhamento entre linhas.
O que isso proíbe
Coluna de valores sem tabular. Contador que muda de largura ao passar de 9 pra 10.
05 · Estados calmos
Por quê
Uma clínica que respira calma na tela confia no sistema. Erro é um painel discreto com “tentar de novo”, não uma tela vermelha; vazio aponta o que fazer agora; carregando mantém o cabeçalho REAL no lugar e esqueletiza só o miolo, pra a tela não pular quando os dados chegam.
O que isso proíbe
“Erro 500: exception no servidor”. Spinner no meio de uma tela em branco. Vazio que só diz “nenhum resultado”.
06 · Devolver tempo ao dono
Por quê
O médico vê o essencial; a recepção vê a operação; o dono vê o dinheiro. A complexidade fica atrás — a tela é enxuta de propósito. Se um dado não muda uma decisão, ele não ganha pixel na primeira dobra.
O que isso proíbe
Dashboard com 14 KPIs que ninguém filtra. Ação escondida a três cliques do lugar onde a pessoa está olhando.
Os princípios em uma tela só
Sim
Receita recuperável
Pacientes que sumiram e ainda respondem.
R$ 18.420
Plano, com respiro, número tabular, ação ao lado do dado — e a ação do agente em roxo, longe do verde da ação direta.
Não
RECEITA RECUPERÁVEL
+12%R$ 18.420
Sombra pesada, bloco de cor saturada como parede, Title Case, número sem tabular, respiro espremido, vermelho num dado POSITIVO e ação de IA vestida de ação direta.
A assinatura: vivo ao toque
Editar não acende um campo: afunda o resto. Quando um campo recebe foco, a tela recua em degraus — o menu do app cai pra 0.65, a superfície ganha uma película de 40%, o cabeçalho fura a película e o bloco em edição sobe elevado. Ninguém precisa procurar onde estava. É o padrão que a página /padroes/foco-em-camadas demonstra viva, e ele só funciona porque nada em volta já estava gritando.
| Camada | O que acontece no foco |
|---|---|
| Fundo da tela (menu, rail) | opacidade 0.65 |
| Superfície (card, seção) | película de 40% por cima |
| Cabeçalho da superfície | fura a película, fica aceso |
| Bloco em edição | sobe: tapete ink-50 + sombra de elevação |
| Campos do bloco sem foco | recuam pra 0.70 |
NuncaNunca escurecer com opacity num container
::after com a cor da superfície) — quem precisa ficar aceso só sobe de camada.