Paleta essencialClaro + escuro
Brand
#04D361Accent dark
#049366Deep teal
#00454CCanvas
#F8F9FAInk
#212529
DesignVendePay Nova · UX & Design System
A linguagem que dá forma ao novo produto.
Identidade, decisões e experiências reunidas para manter produto, design e engenharia falando a mesma língua.
1referência viva canônica
10snapshots históricos
2temas oficiais
6status base de venda
01 · Fundamentos
Reconhecível em qualquer tela.
O verde é energia e movimento; o teal ancora confiança. Poppins conduz títulos e números, enquanto Open Sans preserva legibilidade no trabalho diário.
Voz tipográficaPoppins + Open Sans
Display · 40/700Venda mais.
Opere melhor.
Opere melhor.
Interface direta, números tabulares e uma hierarquia que deixa o próximo passo sempre evidente.
Do handoff ao produto
O snapshot original, agora com contexto atual.
Os protótipos preservam a intenção de junho de 2026. O código atual continua sendo a verdade para comportamento, stack e contratos; este hub explicita as diferenças e mantém a linguagem visual acessível.
Abrir a referência vigente →Implementação vigente
React19
Estilosvanilla-extract
PrimitivosBase UI
ÍconesLucide
Verificado nos frontends em 26/08/2026
Modelo financeiro
Plano claro em qualquer mercado.
Cartão de crédito usa Padrão D5 ou Personalizado. D5 indica a liberação comercial, não a chegada bancária. A Gestão edita o padrão global e negocia exceções por campo e moeda. Campos sem exceção acompanham o padrão vigente; vendas anteriores preservam as condições registradas. A matriz mostra os valores iniciais.
Base inicial
Novas vendasPlanos de recebimento
| Plano | Liberação comercial | Cartão em reais | Cartão em outras moedas |
|---|---|---|---|
| Padrão | D5 · liberação comercial | Taxa 9,90% + fixa da moedaReserva 7% · 90 dias | Taxa 9,90% + fixa da moedaReserva 7% · 90 dias |
| Personalizado | Mesmo prazo comercial do Padrão | Taxa padrão ou valor negociadoReserva 7% · 90 dias ou valor negociado | Taxa padrão ou valor negociadoReserva 7% · 90 dias ou valor negociado |
Padrão operacional
Diagnóstico automático. Correção explícita.
Para integrações e infraestrutura financeira, observar e reparar são ações distintas. A interface protege o operador de mudanças silenciosas e deixa o resultado verificável.
Referência vigente
Reconciliação segura
Use este fluxo quando o sistema puder detectar uma divergência automaticamente, mas a correção modificar configuração externa ou estado operacional.
Nunca transforme abertura de tela ou atualização automática em mutação.- 01
Diagnosticar sem alterar
Atualizações automáticas consultam saúde, saldo e pendências sem modificar o provedor.
- 02
Explicar a pendência
A interface combina status, causa e próximo passo antes de oferecer qualquer correção.
- 03
Corrigir explicitamente
Uma ação nomeada e confirmada reconcilia somente o recurso conhecido, preservando segredos.
- 04
Verificar novamente
O diagnóstico é repetido e o novo estado operacional fica visível para o operador.
02 · Arquivo histórico
Consulte a origem sem confundir com o produto atual.
Estes protótipos registram o handoff de junho de 2026. Busque um assunto, entenda a intenção e volte à referência atual antes de implementar.
01Snapshot histórico · jun. 2026
Índice original VendePay
O ponto de entrada do handoff original e seus principais caminhos.
Hoje: A arquitetura e os fluxos atuais estão consolidados na referência viva.
02Snapshot histórico · jun. 2026
Manual de Identidade Visual
Marca, cores, tipografia, espaçamento, elevação e temas.
Hoje: A marca permanece; alguns tokens de texto, borda, tamanho e raio foram ajustados no código.
03Snapshot histórico · jun. 2026
Manual de Status & Sinalização
Famílias semânticas, mensagens e microestados para orientar decisões.
Hoje: O contrato vigente possui seis status base e estados derivados de apresentação.
04Snapshot histórico · jun. 2026
Arquitetura & Mapa
A organização do produto em navegação global e experiências de foco.
Hoje: A navegação do vendedor cresceu e existe um painel administrativo separado.
05Snapshot histórico · jun. 2026
Demonstração do Modo Foco
O padrão de sobreposição para editores densos e jornadas concentradas.
Hoje: FocusEditor segue válido como padrão, mas deve reutilizar a implementação compartilhada.
06Snapshot histórico · jun. 2026
App VendePay
Dashboard, vendas, finanças, afiliados, assinaturas e microestados.
Hoje: Dashboard, vendas, assinaturas e navegação ganharam filtros, estados e jornadas novas.
07Snapshot histórico · jun. 2026
Entrada · Login, Cadastro e KYC
Aquisição, autenticação e ativação da conta do vendedor.
Hoje: O KYC é uma jornada unificada para vendas e recebimentos bancários, sujeita aos requisitos de identidade e do provedor.
08Snapshot histórico · jun. 2026
Produto · Protótipo
Editor progressivo, recursos opcionais, funil e revisão da oferta.
Hoje: O editor atual tem uma oferta e um plano principais, além de etapas e recursos reorganizados.
09Snapshot histórico · jun. 2026
Checkout Builder
Snapshot do conceito original de configuração e prévia de checkout.
Hoje: Hoje existe um único Checkout principal, com um Estilo principal por produto.
10Snapshot histórico · jun. 2026
Saldos & Saque · Coexistência
Modelo mental unificado para disponibilidade, reserva e retirada.
Hoje: Ledger comercial preservado; observação INFO separada dos efeitos comprovados no extrato existente.
03 · Governança
Uma fonte compartilhada, mantida junto com o produto.
Mudanças em tokens, componentes, status, regras exibidas ou fluxos precisam atualizar este repositório no mesmo ciclo. Os repositórios de produto apontam para cá para que pessoas e agentes de IA partam sempre do mesmo contexto.
1
Consultar antes de alterar uma experiência.
2
Implementar usando os tokens e padrões vigentes.
3
Sincronizar quando produto e referência mudarem.
04 · Para agentes de IA
Contexto pronto para virar interface.
Claude, Codex e outros agentes podem consumir o sistema em texto e JSON, sem depender de interpretar screenshots ou navegar manualmente pelo hub.
TXT · início rápidollms.txt
Índice canônico, fontes de verdade e ordem de trabalho.
MD · contexto completoContexto de implementaçãoTokens, padrões, status e regras de sincronização.
JSON · estruturadoManifesto do design systemDados tipados para automação, validação e geração de UI.
Prompt recomendado
Leia o AGENTS.md ou CLAUDE.md do repositório e carregue https://design.vendepay.com.br/llms.txt antes de alterar o frontend.