Design system · apps/web

Tecnologia acolhedora para a alta estética.

Base do dashboard Aura Concierge: tokens extraídos do manual de identidade, máscaras com estado canônico, integrações de CEP/CNPJ com fallback e componentes auditáveis.

Ver formulário Estados da IA

Next.js 16 · App Router
TypeScript estrito
Tailwind CSS 3.4
React Query
Radix UI
Sonner

Mariana Lopes

(11) 98888-7777

IA ativa

Oi! Queria remarcar minha avaliação de sexta.

Claro, Mariana. Tenho quinta às 14h30 ou sexta às 10h com a Dra. Camila. Qual prefere?

Quinta · 14h30Confirmar

Escreva como a secretária…

Tokens

Paleta oficial

Mapeada em tailwind.config.ts e espelhada em CSS custom properties. Nenhum hex fora desta lista entra na interface.

Navy Blue#0F1E36Texto, navegação e autoridade da marca

Navy Light#1A2E4DHover de superfícies escuras

Sage Green#8FA890Saúde, frescor e IA ativa

Champagne Gold#E2CCA3VIP, confirmação e status humano

Alabaster#F7F7F5Fundo padrão do dashboard

Dark Graphite#1C2430Texto secundário e bordas escuras

Coral / Red#D9534FInstabilidade e erro

Marca

Ativos de identidade

Os arquivos de public/branding sao a arte original de identidade_visual/, apenas aparada e reduzida — nenhum simbolo foi redesenhado.

logo-empilhado.jpg · a arte original de identidade_visual

Sobre Navy

A placa branca faz parte do desenho

isotipo.jpg · 512px

AURAConcierge

Cabecalho · simbolo + tipografia

Leitura em 18 / 28 / 40px

Tipografia

Três vozes, um sistema

Display · Playfair Display

Aura

Títulos e conversão

Serifada de alto contraste para a marca nominativa e cabeçalhos de página.

Rotulos · Plus Jakarta Sans

Concierge

Geométrica limpa em caixa alta com tracking 0.25em para o logotipo e menus.

Status · Agenda · Equipe

Corpo · Inter

Mensagens do chat, tabelas e formulários. Alta legibilidade em telas de baixa e alta densidade.

0123456789 · R$ 1.500,00 · (11) 98888-7777 · São Paulo — SP

Hierarquia

Ações

Hierarquia de cor define prioridade: navy conduz, sage confirma, gold celebra o VIP.

Cadastro

Formulário de paciente

Máscaras, validação matemática de documento, busca de CEP com fallback e moeda em BRL — tudo com o estado canônico por trás.

Nome completo

Como será exibido no Live Chat e nas mensagens.

Salvo como E.164 (+55DDD9XXXXXXXX).

CPF do paciente

Validação dos dígitos verificadores.

CEP

Preenche rua, bairro, cidade e UF automaticamente.

Valor do procedimento

Digite os centavos: 150000 vira R$ 1.500,00.

E-mail da clínica (validação onBlur)

O botão desabilita de verdade enquanto a chamada roda.

Retorno da integração

Digite um CEP válido (ex.: 01310-100) para ver o preenchimento automático com fallback entre ViaCEP e BrasilAPI.

Estados de campo

Com erro

Telefone incompleto.

Live chat

Status da IA e da conexão

Sage = IA ativa, Gold = atendimento humano, Coral = instabilidade. A cor carrega o significado; o texto confirma.

Badges

IA AtivaPausado · humanoErroInfoNeutrosm

· IA ativa pulsa suavemente para indicar que está atendendo.

· Pausado em Gold sinaliza que a secretária assumiu a conversa.

ConnectionStatusBar

Conectado· live_chat · tenant

Estados

Carregamento

Skeleton com lavagem Alabaster–Sage: comunica espera sem piscar branco no dashboard.

Prévia

Interacao

Modais e confirmação

Radix por baixo: foco preso, Esc fecha, backdrop com blur. A confirmação crítica exige digitar a palavra.

Feedback

Toasts e alertas

Sonner com a paleta da marca. O handoff toca o chime discreto e fica mais tempo em tela.