# Design System FyPay

Versão publicada em 20 de setembro de 2026. Sistema visual e wireframes aprovados para as três landing pages FyPay.

- [Página principal](https://fypay.com.br/)
- [Conciliação bancária](https://fypay.com.br/conciliacao-bancaria/)
- [Régua de cobrança](https://fypay.com.br/regua-de-cobranca/)

## Princípios de aplicação

- Manter a identidade FyPay em navy e azuis, com superfícies brancas e cinza suave.
- Usar verde e vermelho somente como cores semânticas para estados reais.
- Usar Manrope em títulos, textos e botões.
- Mostrar recursos, integrações e canais conforme a configuração disponível no sistema Pacto.
- Manter condições comerciais sob consulta. Não inventar métricas, depoimentos, compatibilidades ou garantias.
- Usar imagens de contexto somente como apoio visual; telas de produto devem ser capturas autorizadas e fiéis.

## Tokens de cor

| Token | Valor | Uso |
| --- | --- | --- |
| Navy | `#0B133B` | Fundo escuro e blocos de destaque |
| Azul FyPay | `#3355A1` | Elementos primários da marca |
| Azul de ação | `#314BFB` | Botões e links de ação |
| Texto principal | `#0C123B` | Texto sobre superfícies claras |
| Texto secundário | `#65708D` | Descrições e metadados |
| Branco | `#FFFFFF` | Superfície principal e texto sobre navy |
| Superfície suave | `#FAFAFA` | Alternância de seções |
| Borda | `#DCE1EE` | Divisórias e contornos discretos |
| Sucesso | `#2E9D59` | Estados positivos confirmados |
| Erro | `#D84D4D` | Estados de erro confirmados |

## Tipografia e layout

- Família: Manrope, pesos 300, 400, 500, 600 e 700.
- Corpo: 14 px, entrelinha 1,86.
- H1: peso 300, entrelinha 1,16, escala fluida `clamp(24px, 2.8vw, 44px)`.
- H2: peso 300, entrelinha 1,16, escala fluida `clamp(28px, 3.2vw, 38px)`.
- Container máximo: 1140 px.
- Padding horizontal: 32 px no desktop e 24 px no mobile.
- Espaçamento vertical de seção: 96 px no desktop e 64 px no mobile.
- Cantos: botões 6 px; mídia 12 px; cards sem arredondamento no sistema visual aprovado.

## Componentes

### Botões

- Ação principal: fundo `#314BFB`, texto branco, altura mínima 42 px, raio de 6 px.
- Hover: azul mais escuro `#253DE0`, elevação de 2 px e sombra CTA suave.
- Secundário em fundo claro: contorno e texto azul FyPay.
- Secundário em fundo navy: contorno claro e texto branco.
- Preservar foco visível com contorno contrastante.

### Cards e grades

- Cards de recurso usam ícone simples, título curto e descrição objetiva.
- Uma seção com quatro cards deve apresentar quatro colunas no desktop, duas no tablet e uma no mobile; evitar um card isolado em uma linha extra.
- Grades genéricas podem usar três ou duas colunas conforme o conteúdo.
- Divisórias e bordas usam `#DCE1EE`, sem sombras fortes.

### Navegação e chamadas

- Header enxuto com marca, navegação e CTA de demonstração.
- Logo FyPay leva à raiz do site.
- CTA: “Solicitar demonstração gratuita”. Condições comerciais aparecem como “sob consulta”.
- Rodapé inclui contato, CNPJ `48.030.471/0001-79` e link discreto para o Design System.

## Backgrounds e imagens

- Alternar navy `#0B133B`, branco e cinza suave `#FAFAFA`.
- Reservar verde e vermelho para estados funcionais confirmados.
- Não criar telas fictícias do sistema Pacto nem identificar pessoas genéricas como integrantes da equipe.
- Diagramas são esquemas conceituais e devem ser descritos como fluxos em alto nível.
- Imagem de compartilhamento: logo branca FyPay centralizada em fundo navy, em `1200 × 630 px`.

## Wireframes registrados

### Página principal

Apresenta a conciliação como argumento de entrada, qualifica negócios fitness que usam o sistema Pacto, mostra recursos relacionados e encerra com convite para demonstração gratuita.

### Conciliação bancária

Explica a comparação de registros e extratos, etapas da conciliação, estados a revisar, requisitos e condições comerciais. Compatibilidade depende de instituição, convênio e configuração.

### Régua de cobrança

Explica regras, ações e indicadores da régua. Acompanha valores previstos, recebidos e não recebidos, sem prometer recuperação garantida.

## Estado da publicação

As três landing pages e esta página do Design System estão publicadas. O pacote contém três imagens temporárias de contexto e diagramas estáticos. Capturas reais do sistema Pacto poderão substituir as imagens de contexto quando forem fornecidas e autorizadas. Nenhuma métrica, depoimento ou logo de cliente foi inventado.

## Arquivos publicados

- Página HTML: `/design-system/`
- Este documento para download: `/design-system/design-system-fypay.md`
- Logo e variantes: `/design-system/assets/`