BridgePay — 04. Design System (UI/UX)

Este documento estabelece as especificações e tokens de design visual para a plataforma BridgePay, garantindo consistência visual.

---

1. Direcionamento Visual

O design da BridgePay é inspirado na identidade da AbacatePay:

Minimalismo de Conversão: Foco na redução de ruídos e na condução direta do usuário aos objetivos (comprar, acompanhar métricas ou baixar arquivos).

Cantos Extremamente Suaves: Uso de raios de curvatura generosos para remover o aspecto industrial quadrado de fintechs antigas.

Tipografia Moderna: Foco em legibilidade e contraste geométrico sistemático.

---

2. Paleta de Cores (Tailwind CSS Config)

As cores principais do sistema estão mapeadas abaixo:

Principal / Ação / Sucesso (Abacate Green):

#22c55e (Green-500) / #4ade80 (Green-400)

Utilizado em botões primários de chamada para ação (CTAs), badges de transação confirmada, indicadores de progresso positivo e saldos acumulados.

Escuros / Textos (Deep Slate/Navy):

#0f172a (Slate-900)

Utilizado em títulos grandes, cabeçalhos do dashboard, elementos textuais primários e superfícies que exigem maior legibilidade.

Fundos (Neutral Canvas):

#f8fafc (Slate-50) e #ffffff (White)

Fundo geral da página estruturado em Cloud Grey para conforto visual. Cartões e seções utilizam fundo branco sólido com sombreamento sutil.

Urgência / Erros / Escassez (Crimson):

#ef4444 (Red-500)

Reservado exclusivamente para temporizadores de checkout (scarcity timers), transações falhas, bloqueios de conta ou disputas abertas pendentes.

---

3. Tipografia (Inter)

O sistema utiliza a família de fontes Inter em todos os subdomínios:

Títulos (h1, h2, h3): Inter Bold (700) ou Semi-Bold (600) com tracking reduzido (tracking-tight) para uma estética técnica e limpa.

Campos de Formulário e Rótulos: Inter Medium (500) em tamanho de 14px a 16px para legibilidade e prevenção de zoom automático em dispositivos iOS.

Preços e Números (MZN): Inter Bold (700) em tamanho estendido para destaque visual imediato no checkout.

---

4. Estrutura de Sombras e Cantos (Shapes)

Inputs & Pequenos Botões: rounded-lg (8px).

Cartões de Checkout, Dashboard e Vídeos: rounded-2xl (16px) a rounded-3xl (24px) com bordas arredondadas generosas.

Order Bump (Destaque): Linhas pontilhadas com raio rounded-xl (12px) e fundo verde claro para atrair o foco do comprador de forma persuasiva.

Sombras Ambientais: Sombras muito suaves (shadow-sm ou personalizadas: 0 10px 15px -3px rgba(15, 23, 42, 0.05)) que simulam a elevação natural de vidros brancos sobre a superfície cinza-clara.

Focos e Seleções: Em vez de sombras pesadas ao selecionar um método de pagamento ou focar em um input, utiliza-se uma borda de 2px sólida na cor verde limão primária.