Ravox UIby Ravox Labs
Ravox UIby Ravox Labs
Install the KitGuide
DashboardLightcalmtrustworthyorganized
CConsulta

Consulta.

Clinic front-desk dashboard: daily schedule by provider in columns with walk-in slots, lunch and now-line, waiting room with time since check-in, WhatsApp confirmations, no-shows, pending TISS insurance claims and follow-ups. White, petrol-green sidebar and a warm tone reserved only for delays and no-shows.

Type
Admin dashboard
Theme
Light
Headings
Figtree
Body
Figtree

ForReception, secretaries and coordinators of a clinic or practice who run the day's schedule across several providers

Get access · from R$49or every design for R$297 a year
Open full screen Use with AI
/preview/consulta

Screen blocks01/13petrol-green sidebar down the full page (drawer on mobile)

All the copy lives in content.ts and the colors in tokens.css.
Concept

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.

From DESIGN.md, which is in Portuguese for now.

ForReception, secretaries and coordinators of a clinic or practice who run the day's schedule across several providers

Palette

The four colors that define the design and every variable in tokens.css. Click to copy.

Typography

Figtree for headings, Figtree for body text.

HeadingsFigtree

Aag!

Consulta in one line

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

BodyFigtree

The reading font carries long paragraphs without tiring the eye.

Running text, buttons, forms and captions. Headings get the display font; this is the page's everyday voice.

0123456789 · $1,234.56 · Sep 25, 7:30 PM

Who it's for

What the AI compares with your client to pick the design.

Great for
  • clinic or practice with appointments and more than one provider
  • front desk that handles check-in and WhatsApp confirmation
  • insurance (TISS) and self-pay patients on the same day
  • brand in teal, petrol green or navy
Avoid for
  • emergency room or urgent care without appointments
  • solo practitioner with no front desk or team schedule
  • vibrant, pastel or playful brand
  • anyone who wants a dark theme
Niches
medical clinicprivate practicedental clinicpolyclinicdiagnostic centerphysical therapy clinicpsychology practiceveterinary clinichealthcare

Tone

calmtrustworthyorganizedclinicalwelcoming

What makes it Consulta

The signatures from DESIGN.md: what must be there when you apply it.From DESIGN.md, which is in Portuguese for now.

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

House rules

Straight from DESIGN.md.From DESIGN.md, which is in Portuguese for now.

View 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

Take Consulta
to your client.

In Claude Code, Cursor or any AI: it reads this design's DESIGN.md and applies the tokens, fonts and copy to your client's project.

Use with AI

More dashboards

More admin dashboards from the catalog.

Browse catalog
DashboardLightView design

Turma

DashboardLightView design

Canteiro

DashboardLightView design

Prateleira

DashboardLightView design

Funil