Ravox UIby Ravox Labs
Painelclarocalmoconfiávelorganizado
CConsulta

Consulta.

Painel de recepção de clínica: agenda do dia por profissional em colunas com encaixe, almoço e linha de agora, sala de espera com tempo desde o check-in, confirmações por WhatsApp, faltas, guias TISS pendentes e retornos. Branco, lateral verde-petróleo e um tom quente reservado só para atraso e falta.

Tipo
Painel admin
Tema
Claro
Títulos
Figtree
Texto
Figtree

ParaRecepção, secretária e coordenação de clínica ou consultório que tocam a agenda do dia entre vários profissionais

Obter acesso · a partir de R$ 49ou todos os designs por R$ 297 ao ano
Abrir em tela cheia
/preview/consulta

Blocos da tela01/13lateral verde-petróleo até o fim da página (gaveta no celular)

Todo o texto fica em content.ts e as cores em tokens.css.
Conceito

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.

ParaRecepção, secretária e coordenação de clínica ou consultório que tocam a agenda do dia entre vários profissionais

Paleta

As quatro cores que definem o design e todas as variáveis do tokens.css. Clique para copiar.

Tipografia

Figtree nos títulos, Figtree no texto.

TítulosFigtree

Aag!

Consulta em uma linha

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

TextoFigtree

A fonte de leitura carrega parágrafos longos sem cansar.

Texto corrido, botões, formulários e legendas. Os títulos ficam com a fonte de destaque; aqui é o dia a dia da página.

0123456789 · R$ 1.234,56 · 25/09 às 19h30

Para quem serve

O que a skill /escolher-design compara com o cliente.

Combina com
  • clínica ou consultório com hora marcada e mais de um profissional
  • recepção que faz check-in e confirmação por WhatsApp
  • convênio (TISS) e particular no mesmo dia
  • marca em verde-azulado, verde-petróleo ou azul-marinho
Evitar para
  • pronto-socorro ou urgência sem hora marcada
  • profissional autônomo sem recepção nem agenda de equipe
  • marca vibrante, pastel ou lúdica
  • quem quer tema escuro
Nichos
clínica médicaconsultórioclínica odontológicapoliclínicacentro de diagnósticoclínica de fisioterapiaconsultório de psicologiaclínica veterináriasaúde

Tom

calmoconfiávelorganizadoclínicoacolhedor

O que faz ser Consulta

As assinaturas do DESIGN.md: o que não pode faltar ao aplicar.

  1. 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").

  2. 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).

  3. 03

    Encaixe lado a lado: horários que se cruzam dividem a coluna em faixas (comFaixas), com o rótulo "encaixe".

  4. 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.

  5. 05

    Linha de agora quente atravessando as colunas, com o horário num rótulo no trilho de horas.

  6. 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".

  7. 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.

  8. 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.

  9. 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>.

Regras do jogo

Direto do DESIGN.md.

Ver DESIGN.md

Identidade

  • Fundo #f4f7f6, painéis em branco #ffffff com 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 #56657c sobre #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, tfoot com total, primeira coluna fixa (.consulta-fixa) na rolagem lateral, hover e seleção de linha. Tabela e agenda rolam dentro de overflow-x-auto com pai min-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 button com aria-label completo.
  • 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-sobe no cabeçalho e no resumo; data-revela nos painéis. Barras enchem uma vez, o ponto de "em atendimento" pulsa devagar. Tudo para com prefers-reduced-motion.
  • Celular: lateral vira barra no topo + gaveta (popover nativo); a agenda rola na horizontal com o trilho de horas fixo; painéis empilham.

Adaptar à marca do cliente

  • Troque --d-primary pela cor da marca se for verde-azulado, verde-petróleo ou azul-marinho sóbrio; escureça --c-lateral no 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).
Claude Code

Leve o Consulta
para o cliente.

Dentro do projeto do cliente, cole o comando. A skill lê o DESIGN.md e o meta.json deste design e aplica tokens, fontes e textos.

/escolher-design usar o design Consulta (consulta)

Outros painéis

Mais painéis admin do catálogo.

Ver catálogo
PainelclaroVer design

Turma

PainelclaroVer design

Canteiro

PainelclaroVer design

Prateleira

PainelclaroVer design

Funil