Consulta.
Tableau de bord d'accueil de clinique : planning du jour par praticien en colonnes avec créneaux d'encaissement, pause déjeuner et ligne « maintenant », salle d'attente avec temps écoulé depuis l'enregistrement, confirmations par WhatsApp, absences, dossiers TISS (remboursement des assurances) en attente et rappels de suivi. Blanc, barre latérale vert pétrole et un ton chaud réservé aux retards et absences.
- Type
- Dashboard admin
- Thème
- Clair
- Titres
- Figtree
- Texte
- Figtree
PourAccueil, secrétaires et coordination de clinique ou cabinet qui gèrent le planning du jour entre plusieurs praticiens
Blocs de l'écran01/13barre latérale vert pétrole jusqu'en bas de page (tiroir sur mobile)
Painel de recepção que uma clínica ou consultório com vários profissionais realmente usaria para tocar o dia: agenda por médico, quem chegou e está esperando, quem confirmou amanhã, quem faltou, que guia TISS está travando o lote e quem precisa voltar. Pesquisado a partir de como iClinic, Feegow, Doctoralia Pro e Jane App organizam essas telas. Nada de metáfora: é software de clínica, com identidade na cor, na tipografia e na densidade da grade.
Extrait du DESIGN.md, en portugais pour l'instant.
PourAccueil, secrétaires et coordination de clinique ou cabinet qui gèrent le planning du jour entre plusieurs praticiens
Palette
Les quatre couleurs qui définissent le design et toutes les variables de tokens.css. Cliquez pour copier.
Typographie
Figtree pour les titres, Figtree pour le texte.
TitresFigtree
Aag!
Consulta en une ligne
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TexteFigtree
La police de lecture porte les longs paragraphes sans fatiguer.
Texte courant, boutons, formulaires et légendes. Les titres prennent la police d'affichage ; celle-ci fait le quotidien de la page.
0123456789 · 1 234,56 € · 25/09 à 19h30
Pour qui
Ce que l'IA compare avec le client pour choisir le design.
- clinique ou cabinet sur rendez-vous avec plusieurs praticiens
- accueil qui fait l'enregistrement et la confirmation par WhatsApp
- patients conventionnés (TISS) et privés le même jour
- marque en vert sarcelle, vert pétrole ou bleu marine
- urgences sans rendez-vous
- praticien indépendant sans accueil ni planning d'équipe
- marque vibrante, pastel ou ludique
- ceux qui veulent un thème sombre
Ton
Ce qui fait Consulta
Les signatures du DESIGN.md : ce qui ne doit pas manquer à l'application.Extrait du DESIGN.md, en portugais pour l'instant.
- 01
Agenda em colunas por profissional, 1,8 px por minuto (
--c-px-min): cabeçalho com especialidade, CRM, barra fina de ocupação, horários livres e o que está acontecendo no consultório ("Atendendo desde 11:03" ou, em quente, "Atrasado 14 min"). - 02
Estado vira preenchimento, não borda colorida: sem confirmação (contorno + relógio), confirmado (✓✓ do WhatsApp), na sala (cinza-azulado + minutos), em atendimento (verde sólido com ponto que pulsa), atendido (apagado), atraso/falta (fundo quente), cancelado (tracejado e riscado). Consulta que passou do horário ganha um fio quente de 2px embaixo (
data-estourou). - 03
Encaixe lado a lado: horários que se cruzam dividem a coluna em faixas (
comFaixas), com o rótulo "encaixe". - 04
Almoço hachurado em SVG (
.consulta-bloqueio) e horário livre (.consulta-vago) que aparece no hover e no foco de teclado como "+ Agendar HH:MM" — a grade não mostra buracos. - 05
Linha de agora quente atravessando as colunas, com o horário num rótulo no trilho de horas.
- 06
Sala de espera ordenada pela maior espera: minutos desde o check-in, guia do convênio ("Guia autorizada", "Retorno, sem guia") ou valor do particular, e "Chamar".
- 07
Confirmações de amanhã pelo WhatsApp: barra reta confirmaram / sem confirmação / desmarcaram, lista de quem falta com a situação da mensagem (entregue, lida, pediu para remarcar, não entregue com saída "Ligar") e o horário do segundo envio.
- 08
Faturamento TISS: lotes por convênio com data de fechamento, guias pendentes filtráveis por pendência (rádio +
:has(), sem JS) e uma verificação em andamento em esqueleto. - 09
Taxa de falta por semana em SVG próprio: eixo Y em %, grade tracejada, linha de meta, barra quente acima da meta, semana atual hachurada (parcial), valor no hover e
<title>.
Règles du jeu
Directement du DESIGN.md.Extrait du DESIGN.md, en portugais pour l'instant.
Identidade
- Fundo
#f4f7f6, painéis em branco#ffffffcom fio#dbe5e1. Sem sombra de card: a separação vem do fio. Sombra só no hover do cartão da agenda e na opção marcada do segmentado. - Lateral verde-petróleo fechada
#0c3330(--c-lateral), texto#d9e7e3, apoio#93b2aa. Item ativo = linha sólida um tom acima (#174c46) com texto branco, cantos de 4px. É a moldura do software; o conteúdo fica claro. - Primária verde-azulado hospitalar
#0e5c55: botão principal, confirmado, em atendimento (cartão preenchido), barra de ocupação, dentro da meta no gráfico, foco de teclado. - Tom quente
#b24f1bé só para atraso, falta e o que está fora da regra (espera ≥ 20 min, médico atrasado, glosa, lote que fecha em ≤ 3 dias com pendência, semana acima da meta de falta, mensagem não entregue) — e a linha de "agora", que é o relógio da recepção. - "Aguardando" é cinza-azulado
#56657csobre#eef1f6: esperar não é problema, faltar é. - Fontes: Figtree para todo texto e para os números grandes do resumo (
tabular-nums); IBM Plex Mono (400/500, nunca negrito) só em horário, CRM, telefone, número de guia, dinheiro de tabela e contagem. - Escala fixa de produto: título da página 24px, título de painel 15px, tabela 13px, apoio 12px. Cantos de 4–8px. Sem pílula, glass, gradiente, anel de %, ícone em quadradinho colorido.
Regras
- Os números fecham: resumo, ocupação, sala de espera, faltas, produção por convênio e por profissional, repasse e a semana atual do gráfico saem de
agenda.compromissos; contagens da lateral saem das listas. Nada de número solto. - LGPD: na visão geral só aparece procedimento, convênio e telefone de quem a recepção precisa ligar. Nunca queixa, CID, diagnóstico ou medicação.
- Tabelas: cabeçalho em faixa clara, coluna ordenada com seta e
aria-sort, número mono à direita,tfootcom total, primeira coluna fixa (.consulta-fixa) na rolagem lateral, hover e seleção de linha. Tabela e agenda rolam dentro deoverflow-x-autocom paimin-w-0; a página nunca rola de lado. - Foco de teclado: anel de 2px na primária em todo controle (claro na lateral). Cartões e horários livres são
buttoncomaria-labelcompleto. - Estados: vazio que ensina (lista de espera), erro com saída (mensagem não entregue → Ligar; glosa → Abrir recurso), carregando em esqueleto com
aria-busy, desabilitado (convite de retorno só acende com linha marcada). - Animação:
data-sobeno cabeçalho e no resumo;data-revelanos painéis. Barras enchem uma vez, o ponto de "em atendimento" pulsa devagar. Tudo para comprefers-reduced-motion. - Celular: lateral vira barra no topo + gaveta (
popovernativo); a agenda rola na horizontal com o trilho de horas fixo; painéis empilham.
Adaptar à marca do cliente
- Troque
--d-primarypela cor da marca se for verde-azulado, verde-petróleo ou azul-marinho sóbrio; escureça--c-lateralno mesmo matiz. Marca clara ou vibrante: use só no logo. --d-accent(atraso/falta) não muda: é sinalização, não identidade.- Logo da clínica entra no lugar do marcador "CA" na lateral, numa cor só.
- Mais de 3 profissionais: a grade já rola na horizontal (colunas de no mínimo 14rem).
Emmenez Consulta
chez votre client.
Dans Claude Code, Cursor ou n'importe quelle IA : elle lit le DESIGN.md de ce design et applique tokens, polices et textes au projet du client.
Autres dashboards
Plus de dashboards admin du catalogue.