Navy · fundo escuro
#0B133BFyPay · sistema visual aprovado
Um sistema claro para mostrar a rotina financeira no sistema Pacto.
Design system e exemplos de wireframe para a página principal, Conciliação Bancária e Régua de Cobrança.
01 · Fundamentos
Tokens do Design System
A base azul e navy vem da identidade FyPay e da página principal. O teal e o verde da página de conciliação ficam fora da paleta de marca comum; verde semântico só entra quando um status real do produto pedir.
Cores semânticas e superfícies
Texto secundário
#65708DBorda padrão#DCE1EESuperfície suave#FAFAFASucesso · estado de interface#2E9D59Erro · estado de interface#D84D4DDecisão de cor
Temperatura fria e neutra, alinhada a método e precisão. Navy sustenta as áreas de foco; azul destaca ações; superfícies claras preservam leitura. Os valores extraídos da imagem têm pequenas variações por compressão e captura.
Tipografia · Manrope
Compare o que foi registrado com o que entrou.
A FyPay integra rotinas de cobrança e conciliação ao sistema Pacto. A demonstração ajuda a confirmar os recursos disponíveis para cada operação.
Título 300 · texto 400 · referência do site atualHero dividido
Concilie os recebimentos da sua academia.
H1 do hero split usa o intervalo definido pela skill, sem alterar a tipografia da marca.
clamp(24px, 2.8vw, 44px)H1 · 44/33px300 · line-height 1.16
H2 · 38/28px300 · line-height 1.2
H3 · 22/20px400–500
Corpo · 14px400 · line-height 1.86
Legenda · 11px400–600
CTA · 11px700 · caixa alta
Manrope é mantida porque o CSS publicado do site a carrega nos textos e títulos. O corpo aparece a 14px e os títulos em peso 300. Merriweather não entra no sistema porque só foi encontrada em uma regra de citação, ausente das páginas de referência.
Grade, ritmo e escala
Layout responsivo
| Elemento | Desktop | Mobile | Uso |
|---|---|---|---|
| Container | max-width: 1140px | width: calc(100% - 48px) | Largura estimada pela captura; 24px laterais no mobile são proposta. |
| Padding lateral | 32px | 24px | Alinhamento comum de navegação, conteúdo e rodapé. |
| Espaço de seção | 96px | 64px | Reduzir em seções compactas para manter o ritmo em tela curta. |
| Grade de recursos | 3 colunas · gap 34px | 1 coluna · gap 16px | Tablet: 2 colunas a partir de 768px. |
| Raio | Botão 6px · mídia 12px · cards de texto sem caixa | A referência evita card com sombra/borda em excesso. | |
| Botão principal | 42px min-height · padding 24px | 42px min-height · largura conforme contexto | #314BFB, hover escurece e sobe 2px em 180ms. |
| Inputs de formulário | 44px height · 1px #BFC8DC · raio 6px | Foco com borda azul e halo de 3px. Formular só após definir campos do lead. | |
Sombras
SM · superfícies elevadas
0 4px 16px rgba(11,19,59,.06)MD · modal/preview0 12px 32px rgba(11,19,59,.10)LG · sobreposição0 24px 60px rgba(11,19,59,.16)CTA hover0 10px 24px rgba(49,75,251,.24)O padrão nas páginas é sem sombra em cards de conteúdo; aplicar sombras apenas quando houver hierarquia de sobreposição.
Ícones e animação
Ícones: Phosphor Regular, traço leve, 24px em recursos e 18px em controles, cor #314BFB. A biblioteca atual da referência não foi identificada; padronização proposta. Lucide não usar.
Movimento: fade-in 0→1 em 420ms; slide-up de 12px em 520ms; stagger de 80ms por item; botão 180ms. Sem parallax, contadores ou animação que simule métricas. Respeitar prefers-reduced-motion.
02 · Componentes
Peças visuais e exemplos
As demos são amostras de apresentação, não telas do produto. A copy final já informa demonstração gratuita e preço sob consulta.
CTA principal
Uso em hero, meio e fechamento. Texto direto e constante.
CTA secundário · fundo claro
Texto azul e contorno azul garantem leitura sobre branco.
Estados e observações
Condições comerciais sob consulta. Demonstração sem custo.
Input de contato
Exemplo visual; campos dependem do fluxo comercial aprovado.
Card de recurso
Conteúdo sem caixa em páginas; esta moldura serve apenas para demonstrar limites de componente.
Conciliação bancáriaMensagens de confiança
Usar apenas o que está confirmado e explicar dependências por módulo e convênio.
Integrado ao sistema Pacto Sob consultaCTA secundário · fundo navy
Variante própria com texto branco e contorno de alto contraste.
Logos recebidos
Arquivos originais copiados para esta pasta sem alteração. A versão colorida tem canvas vertical; no preview ela preserva a proporção original.
03 · Estrutura de conversão
Wireframes de exemplo
Os esquemas abaixo traduzem as copies em hierarquia visual. São wireframes de conteúdo; blocos marcados como tela devem receber captura real do sistema Pacto, com dados anonimizados.
LP 01 · Página principal
Apresenta o ciclo financeiro FyPay + sistema Pacto
Conciliação como argumento de entrada; recursos relacionados como expansão. Público: academias e negócios fitness que usam o sistema Pacto.
DESKTOP · mapa da páginaLP principal
CAPTURA REAL
Conciliação no sistema Pacto
status + pendência
Conciliação no sistema Pacto
status + pendência
Registro
→ extrato
→ status
→ extrato
→ status
SEQUÊNCIA REAL
do lançamento
ao status
do lançamento
ao status
- 01Hero · a cobrança não encerra a conferênciaH1 em split, explicação do sistema Pacto, botão gratuito e microcopy de condição sob consulta. Imagem: tela real de conciliação com um estado concluído e uma pendência anonimizados.
- 02Qualificação · negócio fitness no sistema PactoFaixa curta em superfície clara; explica para quem a integração foi preparada e que requisitos variam por fluxo.
- 03Problema · registro não confirma liquidaçãoTexto editorial de duas colunas com mini fluxo de registro → extrato → status. Sem ilustração de dinheiro fictícia.
- 04Como funciona · do lançamento à conferênciaTrês passos em linha desktop e coluna mobile. Diagrama próprio, sem prometer que toda exceção se resolve sozinha.
- 05Recursos · quatro rotinas relacionadasConciliação bancária, cartão, régua de cobrança e pagamentos recorrentes. Ícones do mesmo conjunto, textos sem cartões pesados.
- 06Demonstração + compatibilidadeCaptura/recorte real da interface; explicar que banco, adquirente, convênio, módulo e permissão precisam ser confirmados.
- 07Fit, condições comerciais e FAQLista de qualificação, preço sob consulta e respostas às objeções documentadas. Sem preço, métricas, depoimentos ou logos de cliente.
- 08CTA final e rodapéFundo navy, repetir “Solicitar demonstração gratuita” e contato legal depois da validação de razão social, política e links.
LP 02 · Conciliação Bancária
Mostra onde comparar e o que revisar
Página de intenção mais alta, com status e exceções visíveis desde o primeiro scroll.
DESKTOP · mapa da páginaConciliação
CAPTURA REAL
status conciliado
+ item pendente
status conciliado
+ item pendente
registro ↔ extrato
valor · data · status
valor · data · status
Tela real 01
Tela real 02
Tela real 03
DIAGRAMA
conciliado · pendente
· precisa conferir
conciliado · pendente
· precisa conferir
- 01Hero · compare registros e extratoH1 + status real de um item conciliado e um pendente. CTA aparece sem rolagem; imagem em 16:10 com corte controlado.
- 02Contexto · saldo não explica cada diferençaTexto curto que contrasta lançamento, liquidação e conciliação, sem afirmar redução de tempo ou erros.
- 03Fluxo de comparação no sistema PactoTrês passos com três capturas verdadeiras: registros, extrato e resultado/status. Mobile: cada captura fica depois da etapa correspondente.
- 04O que conferirQuatro recursos em grade: movimentações bancárias, recebíveis de cartão, contas a pagar e situações para revisão.
- 05Estados da conciliaçãoDiagrama simples de status possíveis. As palavras e cores devem corresponder à interface atual do sistema Pacto.
- 06Compatibilidade e requisitosBloco claro, CTA e lista confirmável de bancos/adquirentes. Não reutilizar a afirmação “+30 bancos” até checar a lista vigente.
- 07Para quem é, demo, FAQ e CTAQualificação para usuários do sistema Pacto, perguntas sobre módulos e preço sob consulta; sem fileira de logos bancários não validada.
LP 03 · Régua de Cobrança
Explica a sequência e como acompanhar seus estados
A régua organiza ações configuradas; a página não promete que mensagens garantem pagamento ou recuperação.
DESKTOP · mapa da páginaRégua
CAPTURA REAL
configuração da régua
+ resumo do BI
configuração da régua
+ resumo do BI
Antes do venc.VencimentoAtrasoRetentativa
PrevistoRecebidoNão recebidoPeríodo
TELA REAL DO BI
campos existentes
sem número inventado
campos existentes
sem número inventado
- 01Hero · organizar a régua no sistema PactoCaptura real da configuração e do BI, mantendo dados anonimizados. Texto informa que condições dependem de módulos/convênios.
- 02Problema · ação seguinte por parcelaFaixa editorial com linha do tempo abstrata. Não inventar mensagem, canal ou prazo que não apareça na configuração liberada.
- 03Uma sequência configurávelApresentar o mecanismo: regras, ações e acompanhamento. Distinguir organização de processo de garantia de pagamento.
- 04Como funciona + BITrês passos, mais captura dos campos existentes: previsto, recebido e não recebido. Não preencher com valores inventados.
- 05Canais, indicadores e requisitosCards tipográficos, com canais apenas após confirmação de disponibilidade e consentimento. Módulos do sistema Pacto aparecem como condição, não como rodapé escondido.
- 06Para quem é, condições e FAQQualificar quem usa o sistema Pacto e configura cobranças de planos/parcelas. Preço sob consulta, demo gratuita, sem métricas de recuperação.
- 07CTA final e rodapéRepetir o botão principal e listar canal comercial e páginas legais somente depois de revisão institucional.
04 · Inventário visual
Imagens: argumento, não decoração
O inventário abaixo registra as posições planejadas e orienta substituições futuras. As páginas publicadas usam imagens de contexto e diagramas estáticos; não há captura de produto publicada.
27posições previstas no inventário visual
9capturas planejadas para substituição futura
3diagramas de fluxo para desenhar em SVG
0fotos de pessoas, depoimentos ou métricas inventadas
| Tipo | Qtde. | Onde e por quê |
|---|---|---|
| 01 · Fundador/time | 0 | Nenhuma imagem pessoal sem identificação e autorização. |
| 02 · Produto/screenshot | 12 posições futuras | As páginas atuais usam diagramas estáticos. As capturas reais listadas abaixo poderão substituí-los após autorização e anonimização. Não há vídeo embutido. |
| 03 · Feature em uso | 0 | As capacidades serão mostradas na interface real, sem simular fotografia de uso. |
| 04 · Depoimento/logo de cliente | 0 | Não foram enviados depoimentos ou logos de clientes aprovados. |
| 05 · Resultado/métrica | 0 | Sem resultados de clientes ou números comerciais fornecidos. |
| 06 · Como funciona/fluxo | 3 | Um diagrama por LP: conciliação do recebimento, status/exceções, etapas da régua. |
| 07 · Atmosfera/contexto | 3 ilustrações temporárias | As páginas usam fotos genéricas de contexto, que podem ser substituídas por imagens finais aprovadas. |
| 08 · Ícone/diagrama de integração | 12 usos | Quatro ícones por página; dois símbolos de conciliação são compartilhados. Família Phosphor Regular. |
img-principal-hero-conciliacao.png
Uso: hero da página principal. Capturar a lista de conciliação com um item concluído e outro pendente/alerta, na mesma tela se possível.
Composição: 16:10, foco nos estados e valores mascarados; recorte de interface dentro de moldura de dispositivo neutra. Legibilidade real, sem gerar interface por IA.
Luz/tratamento: interface sem filtro, fundo navy ao redor; mobile reduz para largura integral e mantém zoom de texto.
Alternativa: gravação autorizada de 10–15s do caminho, com dados de demonstração.
img-conciliacao-hero-status.png
Uso: hero da LP de conciliação; evidenciar a comparação de registro com extrato.
Composição: 16:10, mesma família visual da tela principal; mostrar status, referência e pendência sem nome, banco, conta ou valor identificável.
Tratamento: recorte limpo, sem glow, sem alterar cores de status do sistema. Overlay em camadas só nas bordas quando houver fundo escuro.
Alternativa: capturar a tela real de um ambiente demonstrativo autorizado.
img-conciliacao-fluxo-01-registros.png
Uso: passo 1 do fluxo. Tela que apresenta registros financeiros de origem.
Composição: 16:10 desktop, realçar o ponto mencionado pela copy com enquadramento/callout não interativo. A interface original permanece intacta.
Alternativa real: captura direta do sistema Pacto com dados anonimizados, alinhada à tela 02 e 03.
img-conciliacao-fluxo-02-extrato.png
Uso: passo 2. Mostrar a informação de extrato disponível no fluxo documentado.
Composição: repetir tamanho e escala da captura 01; indicar banco/conta apenas como dado fictício do ambiente de demonstração, nunca como promessa de integração.
Alternativa real: confirmar primeiro instituição e convênio exibidos na tela.
img-conciliacao-fluxo-03-status.png
Uso: passo 3, resultado e exceção. Manter um item que pede revisão para não insinuar automação total.
Composição: 16:10; preservar rótulos atuais de status e contraste da interface. Sem números demonstrativos adicionados.
Alternativa real: gravação curta percorrendo item conciliado e exceção.
img-conciliacao-status-contas.png
Uso: seção “o que você consegue conferir”. Mostrar a variedade de status e o caminho de revisão, quando a interface atual diferir da captura do hero.
Composição: recorte horizontal amplo ou captura com detalhe ampliado. Não criar telas de produto fora do sistema Pacto.
Alternativa: reutilizar a imagem do hero se for a mesma tela e manter a narrativa consistente.
img-regua-hero-configuracao.png
Uso: hero da LP Régua de Cobrança. Exibir configuração verdadeira da sequência de ações.
Composição: 16:10, sem telefone, nome, e-mail ou dado real de aluno. Destacar a regra, o prazo e o canal só se forem campos disponíveis e confirmados.
Alternativa real: captura de um fluxo de demonstração aprovado pelo produto.
img-regua-etapas.png
Uso: apoiar a explicação de como as regras configuradas aparecem no sistema Pacto.
Composição: captura real da lista/etapas, mantendo a mesma escala do hero e sem inserir prazos fictícios.
Alternativa: recorte da tela de configuração, se for a única tela confirmada.
img-regua-bi-previsto-recebido.png
Uso: comprovar quais informações o BI apresenta.
Composição: mostrar campos “previsto”, “recebido” e “não recebido” que existam na interface. Sem números ou porcentagens de exemplo.
Alternativa real: captura de demonstração com dados substitutos visivelmente marcados.
Demonstração ao vivo, sem vídeo embutido
Uso: a equipe apresenta o produto durante a demonstração solicitada pelo visitante.
Na página: o fluxo aparece como diagrama HTML/CSS com rótulo explícito de esquema ilustrativo. O diagrama não imita a interface do sistema Pacto/FyPay.
Substituição futura: capturas reais autorizadas podem ser adicionadas quando fornecidas; não produzir vídeo para estas páginas.
img-principal-fluxo-financeiro.svg
Uso: explicar o fluxo registro → dados do banco/adquirente → conciliação → revisão de exceção.
Composição: 4 nós, leitura esquerda para direita; empilha no mobile. Paleta azul/navy/branco e rótulos acessíveis.
Prompt IA: não usar. Desenhar o fluxo em SVG, com texto aprovado e sem interface falsa.
img-conciliacao-estados.svg
Uso: distinguir conciliado, pendente, não conciliado e alerta.
Composição: trilha simples com saída para “revisar”; os nomes e associações de cor dependem da interface atual do sistema Pacto.
Prompt IA: não usar. Construção vetorial para garantir precisão textual e acessibilidade.
img-regua-etapas.svg
Uso: representar ações configuradas antes/depois do vencimento e acompanhamento do status.
Composição: sequência com ramificação apenas se a configuração real permitir; mostrar canais depois de confirmar quais estão ativos.
Prompt IA: não usar. Construção manual baseada na regra aprovada pelo produto.
Ícones tipo 08: quatro posições por página (conciliação bancária, conciliação de cartão, régua de cobrança e pagamentos recorrentes). Fontes visuais previstas: Phosphor Regular, traço consistente e SVG licenciado/exportado em 24px. Não usar logos de bancos ou adquirentes até confirmar lista e convênios.
05 · Ritmo e luz
Mapa de backgrounds e tratamento
A direção global é fria/neutra e de contraste moderado, com interfaces de produto sem filtros. O dark mode organiza a narrativa; superfícies brancas dão pausas de leitura.
| Página / dobra | Fundo e efeito | Imagem / luz | Grafismo |
|---|---|---|---|
| Principal · 01 Hero | #0B133B sólido; sem grain. | Foto genérica temporária, com legenda; não representa equipe ou produto. | Sem feixes, partículas ou parallax. |
| Principal · 02–03 | #FFFFFF e #FAFAFA. | Sem foto; diagrama limpo. | Divisor fino e grid. |
| Principal · 04–06 | Branco, suave, branco. | Diagrama estático e recursos tipográficos. | Fluxo em linha; sem enfeites de fundo. |
| Principal · 07–08 | #FAFAFA → navy CTA. | Sem imagem de prova social. | Bloco CTA de alto contraste. |
| Conciliação · 01 | Navy sólido; imagem sem overlay. | Foto genérica de documentos financeiros, com legenda. | Split de texto e imagem contextual. |
| Conciliação · 02–04 | Branco → suave → branco. | Diagrama estático; capturas reais podem substituir depois. | Etapas em trilha com linha azul. |
| Conciliação · 05–07 | Navy → suave → branco → navy. | Recursos tipográficos e diagrama; sem UI fictícia. | FAQ simples e CTA final. |
| Régua · 01 | Navy sólido; imagem sem overlay. | Foto genérica de calendário e cartões em branco, com legenda. | Split de texto e imagem contextual. |
| Régua · 02–05 | Branco → suave → branco → suave. | Diagrama estático e recursos tipográficos. | Sequência só com etapas confirmadas. |
| Régua · 06–07 | Branco → navy CTA. | Sem métrica ou imagem de cliente. | CTA de demo e FAQ. |
Fotografia contextual temporária
Arquivos
academia-gestao-financeira.webp · conciliacao-extrato-ilustrativa.webp · regua-cobranca-ilustrativa.webpTratamentoSem overlay, telas, logos ou texto legívelOrientaçãoFoto de contexto temporária; substituir por imagem final aprovada.As fotos genéricas foram autorizadas para esta prévia. Trocar por imagens aprovadas quando disponíveis; capturas de UI devem permanecer fiéis ao produto.
Alternância recomendada
Usar navy como começo/fim de blocos de decisão; alternar com branco nas explicações e #FAFAFA nas grades de recursos. Retirar o teal e o verde como fundos de marca comuns porque só aparecem na LP atual de conciliação e conflitam com a paleta do logo/home.
A página atual alterna navy/azul e teal/verde. A proposta unifica as três novas páginas em navy/azul. Verde fica restrito a um estado positivo real na interface, caso o produto confirme o uso.
06 · Status do projeto
Design System aprovado
3LPs com wireframe desktop e orientação mobile
3imagens temporárias de contexto e 3 diagramas estáticos
0capturas reais de produto publicadas
0métricas, depoimentos ou logos inventados
Escopo visual aprovado
Navy e azuis do site/logo; Manrope; CTAs e estados; componentes; ritmo de fundos; wireframes responsivos das três LPs; inventário visual e direção de imagem. Os logos originais estão nesta pasta sem alteração.
Validações contínuas
Confirme capturas autorizadas, nomenclatura e cores dos status, bancos e adquirentes, módulos e permissões por fluxo. Condições comerciais seguem sob consulta; não foram incluídas métricas ou garantias.
Publicação: as três landing pages FyPay estão disponíveis nos links de cada wireframe. As imagens temporárias podem ser substituídas por capturas autorizadas do sistema Pacto quando fornecidas.
Referências: identidade visual FyPay, capturas aprovadas e páginas publicadas de visão geral, conciliação bancária e régua de cobrança.
Design System aprovado para as landing pages FyPay.
Tokens, componentes e wireframes registrados para as três landing pages publicadas.