# Recebora Product Design System

## 1. Visual Theme & Atmosphere

**Caixa em movimento.** A interface combina a clareza de um livro-caixa, a confianca de um comprovante e o ritmo de uma oficina em funcionamento. Deve parecer humana, competente e brasileira, nunca luxuosa, agressiva ou futurista.

Assinatura: uma **linha de retorno** liga cadastro, acompanhamento, resolucao e dinheiro conciliado. Ela aparece somente onde existe progresso real.

## 2. Color Palette & Roles

- Ink `#13241F`: texto principal e superficies de alta confianca.
- Paper `#F4F7F4`: fundo operacional.
- Surface `#FFFFFF`: formulario, tabela e agrupamento funcional.
- Green `#08745A`: acao primaria e dinheiro confirmado.
- Green dark `#075642`: hover e texto sobre verde claro.
- Mint `#E5F1EB`: sucesso suave e selecao.
- Blue `#2457C5`: verificacao, link e orientacao do sistema.
- Blue soft `#E9EEFA`: contexto informativo.
- Amber `#D89513`: atencao e prazo.
- Amber soft `#FBF1D8`: atencao suave.
- Coral `#C94A40`: risco, pausa e erro.
- Line `#D5E0DA`: estrutura e divisao.
- Muted `#556A61`: texto secundario.

Usar verde para acao ou resultado, azul para informacao verificavel, amber para atencao e coral apenas para risco. Nao usar gradientes.

## 3. Typography Rules

- Display de marketing: Bitter, 600-800, line-height 1.04-1.12.
- Interface e corpo: Public Sans, 400-800, line-height 1.45-1.65.
- Dados: Public Sans com `font-variant-numeric: tabular-nums`.
- Rotulos: sentence case. Caixa alta somente para metadado curto.
- Tamanho minimo operacional: 14px; alvo padrao: 16px.
- Letter spacing: sempre `0`.

## 4. Component Stylings

- Botoes: 44-50px de altura, raio 6px, verbo literal.
- Inputs: label sempre visivel, altura minima 44px, foco azul de 3px.
- Paineis: raio maximo 8px; sombra apenas quando ha elevacao real.
- Tabelas: divisores horizontais, moeda alinhada e uma acao principal por linha.
- Status: fundo suave, texto forte e forma compacta; nao transformar tudo em pill.
- Cards: usar somente para item repetido ou ferramenta genuinamente delimitada.

## 5. Spacing & Layout

- Escala: 4, 8, 12, 16, 24, 32, 48, 64, 96.
- Site: largura maxima 1240px, composicao editorial assimetrica e secoes integrais.
- Aplicativo: densidade equilibrada; navegacao desktop persistente e tres destinos no mobile.
- Formulario: uma coluna no mobile e no maximo duas no desktop.
- Nenhum conteudo depende de hover.

## 6. Motion & Interaction

- Rapido 120ms, padrao 180ms, contextual 240ms.
- Animar transform e opacity; nunca atrasar tarefa.
- Usar movimento para feedback, mudanca de estado ou progresso financeiro.
- Respeitar `prefers-reduced-motion`.

## 7. Voice & Content

- Voz: direta, respeitosa, segura e sem juridiquês.
- Falar do que a pessoa controla: cliente, valor, vencimento, pagamento.
- Acao mantem o mesmo nome antes e depois: `Cadastrar cobranca` -> `Cobranca cadastrada`.
- Erro explica causa e proximo passo; nao usar `Ops`.
- Nao prometer percentual de recuperacao sem dados reais.

## 8. Responsive & Accessibility

- Base 390px; suportar 320px sem overflow.
- Alvos de toque de pelo menos 44px.
- Foco visivel em todos os controles.
- Contraste WCAG AA para texto e controles.
- Zoom de 200% sem sobreposicao.
- Conteudo e formulario permanecem utilizaveis sem animacao.

## 9. Anti-patterns

- Gradiente azul-roxo, orb, blob, bokeh ou vidro decorativo.
- Mosaico de tres cards como resposta padrao.
- Card dentro de card.
- Raio exagerado, pills em excesso e sombra generica em tudo.
- Icone-cliche ou SVG improvisado.
- Texto abstrato como `transforme`, `eleve`, `revolucione` sem mecanismo.
- Dashboard com grafico que nao orienta acao.
- Assinatura visual aplicada como enfeite.