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.
10referências navegáveis
2temas oficiais
4famílias de status
8pxescala espacial base
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.
Entender a governança →Implementação vigente
React19
Estilosvanilla-extract
PrimitivosBase UI
ÍconesLucide
Verificado nos frontends em 26/08/2026
02 · Biblioteca
Explore decisões, não arquivos soltos.
Busque um assunto, filtre pelo tipo e abra cada referência dentro de um visualizador consistente.
01Fundamentos
Índice original VendePay
O ponto de entrada do handoff original e seus principais caminhos.
02Fundamentos
Manual de Identidade Visual
Marca, cores, tipografia, espaçamento, elevação e temas.
03Padrões
Manual de Status & Sinalização
Famílias semânticas, mensagens e microestados para orientar decisões.
04Padrões
Arquitetura & Mapa
A organização do produto em navegação global e experiências de foco.
05Padrões
Demonstração do Modo Foco
O padrão de sobreposição para editores densos e jornadas concentradas.
06Experiências
App VendePay
Dashboard, vendas, finanças, afiliados, assinaturas e microestados.
07Experiências
Entrada · Login, Cadastro e KYC
Aquisição, autenticação e ativação da conta do vendedor.
08Experiências
Produto · Protótipo
Editor progressivo, recursos opcionais, funil e revisão da oferta.
09Experiências
Checkout Builder
Configuração orientada e prévia fiel de múltiplos checkouts.
10Experiências
Saldos & Saque · Coexistência
Modelo mental unificado para disponibilidade, reserva e retirada.
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.