Tokens, componentes e padrões usados em todas as telas do protótipo. Fonte única de valores: ds.css (prefixo --au-). Ícones em icons.js, injetados com <i data-ic="nome">.
Inter · FrauncesBase 4 pxClaro e escuroSem dependências externas
Cores
Superfícies em pedra quente, marca em verde-petróleo, champanhe como acento. Cada especialidade tem uma cor própria (estética rosa-malva, tricologia azul-índigo) e a IA tem o roxo, sempre acompanhado de rótulo. Os mesmos nomes de token valem nos dois temas.
Tema claro · :root
Tema escuro · [data-theme="dark"]
Tokens --au-bg · --au-surface · --au-surface-2 · --au-surface-3 · --au-border · --au-border-strong · --au-ink · --au-ink-2 · --au-muted · --au-faint · --au-primary(-hover/-soft/-ink) · --au-accent(-soft) · --au-estetica(-soft/-ink) · --au-tricologia(-soft/-ink) · --au-ok · --au-warn · --au-danger · --au-info · --au-ai (+ -soft). O tema escuro é ativado com data-theme="dark" no <html> (ou em qualquer subárvore, como neste exemplo).
Tipografia
Inter para interface (400–700) e Fraunces para títulos de página e números grandes. Um único h1 por tela. Valores sempre com separador brasileiro: R$ 1.234,56.
.display · Fraunces 34/1.1
R$ 48.300
h1 · Fraunces 28/1.15
Bom dia, Patrícia.
h2 · Inter 600 20/1.25
Agenda de hoje
h3 · Inter 600 16/1.3
Confirmar para amanhã
body · Inter 400 14/1.45
Carla Mendonça tem avaliação capilar com tricoscopia hoje às 10h00 com o Dr. Rafael, na Sala 2.
.small · 13 px
(11) 98765-4321 · tricologia e estética · próxima consulta: hoje 10:00
.xs .muted · 12 px
Confirmou por WhatsApp às 09:12 · registrado por Juliana (recepção)
.eyebrow · 11 px caixa alta
Segunda-feira, 13 de outubro
.money · tabular
R$ 2.350,00R$ 1.400,00R$ 1.400,00− R$ 247,50
.mono · 12,5 px
aurea.app/i/DOMCORTE · lote AB2231 · v2.1
.estetica .tricologia .ai .primary
Estética · Tricologia · Sugestão da IA · Marca
Botões
Texto sempre verbo + objeto: “Agendar”, “Receber R$ 150,00”, “Abrir WhatsApp”. Nunca “OK” ou “Salvar registro”. Um botão primário por área da tela.
Para blocos secundários, resumos e dicas dentro de outro cartão. Sem sombra, fundo pedra.
Sugestão da IA · revisar
3 horários vagos amanhã à tarde
Dr. Rafael tem 15:00, 15:30 e 16:00 livres. Quatro pacientes de tricologia estão com retorno vencido.
Prontuário estética
Estética
Borda esquerda rosa-malva marca conteúdo da especialidade.
Prontuário capilar
Tricologia
Borda esquerda azul-índigo. Escalas, scalp mapping e tricoscopia vivem aqui.
CM
Carla MendonçaProposta aberta · R$ 3.300
.card.pad-sm
.card (.pad-0 .pad-sm .soft .ai .estetica .tricologia) · .card-head > h3 + .meta · .dl para pares rótulo/valor · toda saída de IA leva .ai-label “Sugestão da IA · revisar”
Tabela e lista
Tabela para dados comparáveis (cabeçalho em caixa alta, números à direita). Lista de linhas para filas de trabalho com ações.
Pessoa
Status
Especialidade
Pacote
Valor investido
Ações
PH
Paulo Henrique Souza(11) 99877-1200
Em tratamento
Tricologia
MMP 3/6
R$ 3.300,00
AB
Ana Beatriz Moraes(11) 98811-2034
Em tratamento
Estética
—
R$ 8.400,00
MV
Marcos Vinícius Rocha(11) 99001-2210
Novo
Estética
—
R$ 0,00
.table-wrap > table.table · th caixa alta · td.num à direita, tabular · td.actions · .person > .avatar + div(strong+small)
09:00
Juliana Martins Peeling químico
(11) 98712-3344 · Dra. Marina · 2ª tentativa
LB
Luciana Barros Pediu para pensar
Bioestimulador · R$ 2.800 · combinou retorno para hoje às 16h
TL
Thiago Lima Laser capilar · 5 de 20
Retorno vencido há 12 dias · aceita mensagens
MV
Marcos Vinícius Rocha Lead sem resposta · 3 dias
Interesse: toxina botulínica · veio pelo Google · responsável Bruno
Sugestão da IA · revisar
Gustavo Serra cabe no horário das 15:00 do Dr. Rafael (lista de espera, prefere tardes).
.list > .row (.estetica .tricologia .urgent .ai) · .grow > .title + .meta · .actions à direita · .sessions > i (.used) para contador de pacote
Abas e segmentado
Abas trocam seções inteiras de uma ficha. Segmentado filtra a mesma lista (Todos / Estética / Tricologia) e vive na barra superior.
Cabeçalho com título e fechar, corpo rolável, rodapé com ações à direita e contexto à esquerda. No celular vira folha inferior. Aqui renderizado sem o backdrop fixo.
Receber R$ 1.400,00
AB
Ana Beatriz Moraes
Toxina botulínica · Dra. Marina · hoje 08:30 · finalizado
Estética
PixCréditoDébitoDinheiro
Pix à vista não tem taxa
Entra no caixa aberto por Juliana às 08:00
.modal-backdrop#id > .modal (.wide) > .modal-head + .modal-body + .modal-foot (.left) · abrir com data-open="id", fechar com data-close ou Esc · ?modal=id abre ao carregar · .drawer para painéis laterais
Fotos e comparação
Não há fotos reais no protótipo: cada .photo leva um SVG com formas simples e gradientes, sempre com etiqueta de vista e data. A comparação usa cortina com alça central.
Frontal · 13/10
Vértice · 13/10
Tricoscopia 50x · vértice68 UF/cm²
.photo-grid > .photo (.wide .selected) > svg + .tag (.top .right) + .check · silhueta de rosto, topo da cabeça e close de tricoscopia, sem fotorrealismo
15/09 · sessão 113/10 · sessão 3
.compare > .side + .side.after + .handle + .lbl.l / .lbl.r · corte em 52% via clip-path · .ghost sobrepõe a foto anterior na captura · .capture > .guide + .hud e .shutter para a câmera
Kanban
Funil comercial. Cada coluna soma valor; cartão mostra interesse, especialidade, responsável e prazo. Atraso ganha borda vermelha.
Bolhas de WhatsApp: recebida à esquerda, enviada à direita em verde, sistema centralizado e sugestão da IA em largura total com borda tracejada e rótulo.
CM
Carla Mendonça 09:14
Consigo remarcar para quinta de manhã?
2
LB
Luciana Barros ontem
Vou pensar e te respondo até amanhã, tá?
RT
Ricardo Tavares ontem
Confirmado! Obrigado.
.thread-list > .thread (.active) · .unread
Confirmação enviada automaticamente · 12/10 18:00
Oi! Consigo remarcar a avaliação de hoje para quinta de manhã? Surgiu um imprevisto no trabalho.09:12
Claro, Carla! Quinta às 10:00 com o Dr. Rafael está livre. Posso confirmar?09:14 · Juliana
Sugestão da IA · revisar
Carla tem proposta aberta de R$ 3.300 (vista ontem). Sugestão de complemento: “Aproveito para lembrar que a proposta do protocolo capilar vale até 20/10. Se quiser, já deixo a primeira sessão reservada.”
.chat > .bubble (.in .out .ai .sys) > .time · .ai-label obrigatório em .bubble.ai · nenhuma mensagem sai sem aprovação
Alertas e estados
Alerta fica dentro do fluxo, com ícone e texto curto. Toast confirma ação concluída. Estado vazio sempre explica o próximo passo.
Mensagens automáticas só saem para quem aceitou receber. Horário de silêncio: 20:00 às 08:00.
Alergia a lidocaína registrada na ficha de Mariana Costa. Confirme o anestésico antes de aplicar.
Termo de consentimento v2.1 assinado às 14:07 · cópia enviada por WhatsApp.
NFS-e não autorizada: inscrição municipal divergente. Corrija em Configurações › Clínica.
Sugestão da IA · revisar · 11 propostas sem resposta há mais de 7 dias. Quer preparar as mensagens?
Assinatura na tela do termo de consentimento, mapa facial com pontos de aplicação e mapa do couro cabeludo em 9 regiões. Pontos de estética em rosa-malva, de tricologia em azul-índigo.
Mariana Costa · TCLE Bioestimulador v2.1 · 13/10/2026 14:07 · IP 187.34.112.9
.sig-pad > svg · traço registrado com versão, data, hora e IP
.map-wrap > svg com .map-point (estética) e .map-tag · produto, lote e unidades na tabela ao lado
preservadararefação levemoderadaUF/cm²
.map-point.tx (tricologia) · 9 regiões coloridas por rarefação; a escala (Norwood, Ludwig) é marcada pela profissional, nunca pela IA
Avatares
Iniciais sobre cor fixa por pessoa (8 cores). Sem fotos de perfil no protótipo.