Interfaces clínicascom precisãotecnológica.
Um sistema branco, leve e cirúrgico — feito para dashboards de saúde que precisam parecer tão avançados quanto a medicina que entregam. Vidro fosco, glow sutil e dados que ganham vida ao rolar.
Tipografia
Space Grotesk para títulos com personalidade geométrica, Inter para leitura e JetBrains Mono para rótulos técnicos. Carregadas via next/font (sem CDN), com display: swap.
Saúde digital
- family
- Space Grotesk
- weight
- 600
- size
- clamp 2.75–4.5rem
- leading
- 0.96
- tracking
- -0.035em
Painel de operações
- family
- Space Grotesk
- weight
- 600
- size
- clamp 2.5–3.75rem
- leading
- 1.02
- tracking
- -0.03em
Indicadores clínicos
- family
- Space Grotesk
- weight
- 600
- size
- clamp 2–3rem
- leading
- 1.06
- tracking
- -0.025em
Agenda da unidade
- family
- Space Grotesk
- weight
- 500
- size
- clamp 1.5–2.25rem
- leading
- 1.12
- tracking
- -0.02em
Cartão de paciente
- family
- Space Grotesk
- weight
- 500
- size
- 1.5 / 1.25 / 1.06rem
- leading
- 1.2–1.4
- tracking
- -0.015em
Texto de leitura confortável para descrições, relatórios e conteúdo editorial dentro do produto.
- family
- Inter
- weight
- 400
- size
- 1.125rem
- leading
- 1.65
- tracking
- 0
Corpo padrão usado na maior parte da interface e em tabelas densas.
- family
- Inter
- weight
- 400
- size
- 1 / 0.875rem
- leading
- 1.6 / 1.55
- tracking
- 0
STATUS · ATUALIZADO HÁ 2MIN
- family
- JetBrains Mono
- weight
- 500
- size
- 0.6875rem
- leading
- 1
- tracking
- 0.14em
Sistema de cores
Tokens em HSL (com hex/RGB documentados) expostos como CSS variables e utilitários Tailwind com modificadores de opacidade. Papéis semânticos cobrem primário, decorativo, neutro e feedback.
Fundo base da aplicação
Cards, painéis e menus
Ações, foco, links e gráficos
Hover e estados pressionados
Auroras, gradientes e glow
Texto primário (contraste AAA)
Confirmações e tendências +
Alertas e pendências
Erros e ações destrutivas
Mensagens informativas
Componentes
Cada componente é tipado em TypeScript e configurado por props (variant/size), nunca por classes soltas. Todos respeitam prefers-reduced-motion.
Buttons & Ações
Inputs & Campos
Usado para notificações de agenda.
Código inválido ou expirado.
Badges & Tooltips
Cards & Modais
Dra. Helena Costa
Passe o mouse — o cartão acende um glow que segue o cursor (flashlight), traduzido das referências para tokens próprios.
Select & Listas
Define os procedimentos que o profissional pode realizar.
Selecione o estado da clínica para continuar.
Campo bloqueado enquanto a assinatura está inativa.
Switch & Alternâncias
Pacientes podem reservar horários pelo app da clínica.
Exige pagamento parcial para confirmar a consulta.
Disponível apenas no plano Clínica Pro.
Checkbox & Seleção Múltipla
Procedimentos que este profissional atende:
TimeRangeField & Horários
- até
- até
- até
As faixas de horário não podem se sobrepor. Revise os intervalos.
Nenhuma faixa de horário ainda. Adicione a primeira abaixo.
Toasts & Feedback
Notificações empilháveis com auto-dismiss, acionadas via useToast().
Elementos de dashboard
O sistema em ação: KPIs com count-up, gráficos SVG animados no scroll e tabelas com revelação progressiva — tudo claro, técnico e elegante, longe do dashboard comum.
Últimos 12 meses
Próximos atendimentos
Movimento & Ícones
Animações centralizadas em lib/animations.ts e reutilizadas via Framer Motion. Ícones do lucide-react estilizados pelos tokens.
- Easing · cubic-bezier(0.16, 1, 0.3, 1)
- •
- whileInView · once
- •
- prefers-reduced-motion · respeitado
- •
- Stagger · 90ms
- •
- Framer Motion
- •
- Easing · cubic-bezier(0.16, 1, 0.3, 1)
- •
- whileInView · once
- •
- prefers-reduced-motion · respeitado
- •
- Stagger · 90ms
- •
- Framer Motion
- •
Sobe + de-blur
Dispara no scroll com whileInView, uma única vez.
Escala suave
Dispara no scroll com whileInView, uma única vez.
Foco + zoom-out
Dispara no scroll com whileInView, uma única vez.