Design System

Cor

A Vera não usa a paleta padrão do Tailwind: globals.css reescreve três escalas inteiras. Entender esse remap é o que evita erro — o nome da classe não diz mais a cor.

Marca

Ação — teal-* remapeado

Botões, links e o estado ativo da navegação. Do 50 ao 500 são tons de orchid (usados em foco e realce); do 600 ao 900 é charcoal — é onde o botão primário vive.

Identidade da Vera — violet-* remapeado

Tudo que é trabalho da Vera: chips, avatar, pulso de “trabalhando”, etapas automáticas. Nunca use para a ação primária — essa é charcoal.

Neutros — slate-* remapeado

Texto, bordas e superfícies. Régua do charcoal, sem o azulado do slate original.

Escuro — neutral-* do Tailwind, não remapeado

O tema escuro usa a escala neutral original. Fundo #0a0a0a, superfície neutral-900, bordas neutral-800.

Estados semânticos

Preservados do Tailwind. Verde = confiável, âmbar = atenção/sua vez, rosa = alerta.

Escala de aderência (score)

Faixas de scoreColor() em components/prospect-stages.tsx. A cor é redundante: o número aparece sempre ao lado.

Tipografia

Geist Sans para tudo, Geist Mono para números e dados — carregadas em app/layout.tsx via next/font/google. A escala é pequena e densa: text-sm e text-xs respondem por quase toda a interface.

Escala

Pesos

Três pesos cobrem o app inteiro. font-medium (500) e font-semibold (600) são quase empatados no uso; font-bold (700) fica para chips e números.

Espaçamento

Escala de 4px do Tailwind. Na prática o app vive em cinco degraus — os outros são exceção.

Forma e elevação

Raios generosos e sombras quase ausentes: a hierarquia vem de borda e superfície, não de profundidade.

Raio

Elevação

Só três níveis aparecem no código, e o card usa uma sombra custom mais leve que a shadow-sm do Tailwind.

Componentes

Hoje esses padrões vivem soltos, repetidos como strings de classe em cada .tsx — não existe components/ui/. Abaixo estão consolidados, com a classe real ao lado, para virarem componentes de verdade.

Botões

/* primário — o mais comum no app */
rounded-lg bg-teal-600 px-4 py-2 text-sm font-medium text-white
hover:bg-teal-700 disabled:opacity-40

/* CTA grande (onboarding) */
rounded-xl bg-teal-600 px-6 py-3 text-sm font-semibold text-white shadow-sm
transition-transform hover:bg-teal-700 active:scale-[0.98]

Campos

w-full rounded-lg border border-slate-200 px-3 py-2.5 text-sm outline-none
focus:border-teal-500 focus:ring-2 focus:ring-teal-100
dark:border-neutral-800 dark:bg-neutral-900 dark:focus:ring-teal-500/20

Superfícies

Chips e selos

O vocabulário mais denso do app — é como o funil comunica estado sem texto longo.

/* Vera (identidade) */   rounded-full bg-violet-500/10 px-2 py-px text-[11px] font-semibold text-violet-600
/* Vera sólido        */   rounded-full bg-violet-600 px-2 py-0.5 text-[11px] font-bold text-white
/* Requer ação        */   rounded-full bg-amber-500/15 px-1.5 py-px text-[10px] font-bold text-amber-700
/* Alerta             */   rounded-full bg-rose-50 px-2 py-0.5 text-[10px] font-semibold text-rose-700 ring-1 ring-rose-200
/* Neutro / contador  */   rounded-full bg-slate-100 px-2 py-px text-[10px] font-medium text-slate-500

Navegação

Barra horizontal no desktop; barra de abas fixa embaixo no mobile. O item ativo é uma pílula bg-teal-50 — ou seja, lavanda pálido com texto charcoal, não um bloco preto.

/* item de navegação */
inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors

/* ativo   */ bg-teal-50 text-teal-700 dark:bg-teal-500/10 dark:text-teal-400
/* inativo */ text-slate-600 hover:bg-slate-100 hover:text-slate-900

Notificações na navegação: ponto violeta = pendência sua; pílula charcoal 3 = respostas não lidas. O ponto é da Vera (identidade); a pílula é ação.

Monitoramento

Card que abre a tela de Prospects (app/candidatos/page.tsx). Radar com animate-ping enquanto ativo, pílula Ativo em lavanda, selo charcoal com os matches novos. A linha de auto-aprovação é o contrato de confiança do produto: ≥ 85, a Vera envia sozinha — você em CC.

/* card      */ mb-4 overflow-hidden rounded-xl border border-slate-200 bg-white
/* ping      */ absolute h-full w-full animate-ping rounded-lg bg-teal-400/20
/* Ativo     */ rounded-full bg-teal-50 px-2 py-0.5 text-[11px] font-medium text-teal-700 ring-1 ring-teal-200
/* novos     */ rounded-full bg-teal-600 px-2 py-0.5 text-[11px] font-semibold text-white
/* switch    */ relative h-5.5 w-10 rounded-full transition-colors · ligado bg-teal-600, desligado bg-slate-200

Interruptor

Dois tamanhos: padrão (40×22) e sm (32×18) na linha de auto-aprovação. Ligado é bg-teal-600 — charcoal no claro, orchid no escuro, seguindo a regra da ação.

Menu Adicionar

A entrada manual de prospects (ImportarProspects.tsx): botão primário compacto (h-7 no desktop) que abre um menu de 208px com as duas vias — cadastro individual ou planilha.

/* botão */ inline-flex h-9 items-center gap-1.5 rounded-md bg-teal-600 px-3 text-xs font-medium text-white hover:bg-teal-700 md:h-7 md:px-2.5
/* menu  */ absolute right-0 top-8 z-20 w-52 overflow-hidden rounded-lg border border-slate-200 bg-white py-1 shadow-lg

Barra de seleção

Aparece grudada no topo da Lista quando há checkboxes marcados (accent-teal-600). Excluir em rose; Limpar neutro. Fundo translúcido com blur.

sticky top-0 z-20 flex items-center gap-3 border-b border-slate-200 bg-white/95 px-4 py-2 backdrop-blur
/* checkbox */ h-4 w-4 shrink-0 cursor-pointer rounded border-slate-300 accent-teal-600

Vera trabalhando

Chip com borda em gradiente animado (lavanda → orchid) e três pontos pulsando — o único movimento contínuo do produto, reservado para quando a Vera está de fato processando.

Card de contato

De ContatoCard.tsx: avatar redondo, cargo inline depois do nome, email com selo de validação de entrega (emerald validado / rose não recebe, quando o domínio não tem MX) e canais em chips h-7. WeChat tem verde próprio e é clique-para-copiar.

/* card   */ rounded-lg border border-slate-200 bg-slate-50 p-3 text-xs
/* cargo  */ ml-1.5 font-normal text-slate-400   (inline após o nome)
/* canal  */ inline-flex h-7 items-center gap-1.5 rounded-md px-2 text-[11px] ring-1 ring-slate-200
/* wechat */ bg-[#07C160]/10 text-[#0a9e50] ring-[#07C160]/40 · clique copia o ID

Estado por borda

Colunas do Kanban e grupos da Lista não pintam o fundo: o estado vive numa borda que acende — 2px na coluna, border-l-2 no grupo. Âmbar = sua vez; violeta = lead respondeu; violeta + glow = resposta não lida.

/* coluna  */ border-2 border-transparent · ação border-amber-400/90 · respondeu border-violet-500/60
/* não lida */ border-violet-500 + shadow-[0_0_12px] violet
/* grupo   */ sticky top-0 border-l-2 bg-slate-50 backdrop-blur (mesma escala de cor)

Medidor de aderência

Duas formas, mesma escala de cor (scoreColor: emerald ≥ 85, lime ≥ 70, âmbar ≥ 50, cinza abaixo). Barra no detalhe do prospect; no card do Kanban é a pílula ponto + número mono — a cor nunca vem sozinha, o número sempre junto.

Veredito de due diligence

Padrões

A regra que organiza o produto inteiro: em toda etapa do funil, ou o trabalho é da Vera, ou é seu. A interface nunca deixa isso ambíguo.

Dono da etapa

O funil

Fonte única em components/prospect-stages.tsx — o Kanban e a lista consomem daí para nunca saírem de sincronia. As etapas terminais (Frio, Descartado) só aparecem quando têm cards.

Regras que o sistema assume