# Referência: Propostas Premium — Design de Capas e Páginas Visuais Guia prático para criar páginas visuais de impacto em propostas comerciais Descomplicar. Baseado na filosofia canvas-design: design-forward, cada página comunica antes de ser lida. --- ## Filosofia de Design **Princípio central:** o cliente forma opinião sobre a proposta nos primeiros 3 segundos. Cada página deve funcionar como imagem antes de funcionar como texto. | Princípio | Aplicação | |-----------|-----------| | Visual-first | Imagem/composição comunica o tema antes do texto | | Texto mínimo | Menos palavras, mais impacto por palavra | | Espaço negativo | Respiração generosa — o vazio é parte do design | | Tipografia como design | O tipo de letra é um elemento visual, não só legível | | Paleta disciplinada | Máximo 3 cores por página (+ neutros) | --- ## Paleta Descomplicar ```python # Cores base da marca — aplicar consistentemente PALETA = { "dourado": "#C9A84C", # acento principal "dourado_lt": "#E8D5A3", # acento suave / fundo dourado "preto": "#0D0D0D", # fundo principal dark "cinza_esc": "#1A1A1A", # fundo secundário "cinza_med": "#3D3D3D", # separadores "cinza_lt": "#F5F5F5", # fundo light / texto em dark "branco": "#FFFFFF", # texto em dark, fundo clean } # Tipografia (Nexa é a fonte da marca) FONTES = { "heading": "Nexa Bold", "subheading":"Nexa Light", "corpo": "Source Sans 3", "detalhe": "IBM Plex Mono", # para números, códigos } ``` --- ## Workflow: do conceito à página ``` 1. BRIEFING — que secção é esta? qual a mensagem principal? 2. COMPOSIÇÃO — escolher layout base (ver tipos abaixo) 3. HIERARQUIA — definir 3 níveis: âncora visual / título / detalhe 4. COR — aplicar paleta com dominante + acento 5. TIPOGRAFIA — tamanhos com contraste forte (ex: 72pt / 14pt) 6. REFINAMENTO — remover tudo o que não é necessário 7. EXPORTAÇÃO — PDF vector (300dpi para imprimir, 72dpi para digital) ``` --- ## Tipos de Página por Secção ### Capa de Proposta (primeira página) **Objectivo:** impressionar, identificar o cliente, criar antecipação. ```python # Composição com python-reportlab from reportlab.lib.pagesizes import A4 from reportlab.pdfgen import canvas from reportlab.lib.colors import HexColor W, H = A4 # 595 x 842 pontos def criar_capa(c: canvas.Canvas, nome_cliente: str, titulo: str): # Fundo preto total c.setFillColor(HexColor("#0D0D0D")) c.rect(0, 0, W, H, fill=1, stroke=0) # Barra dourada lateral esquerda (elemento âncora) c.setFillColor(HexColor("#C9A84C")) c.rect(0, 0, 8, H, fill=1, stroke=0) # Logo Descomplicar (topo direito) c.drawImage("assets/logo-white.png", W - 130, H - 60, 110, 40, mask="auto") # Título em grande — dois terços da página c.setFillColor(HexColor("#FFFFFF")) c.setFont("Nexa-Bold", 52) # Quebra em 2 linhas se necessário linhas = quebrar_texto(titulo, max_chars=24) y = H * 0.55 for linha in linhas: c.drawString(48, y, linha) y -= 64 # Nome do cliente — acento dourado c.setFillColor(HexColor("#C9A84C")) c.setFont("Nexa-Light", 18) c.drawString(48, H * 0.35, f"Preparado para {nome_cliente}") # Data — rodapé discreto c.setFillColor(HexColor("#3D3D3D")) c.setFont("SourceSans3-Regular", 10) c.drawString(48, 32, f"Descomplicar® · descomplicar.pt · Março 2026") ``` **Composição alternativa (versão light):** - Fundo branco com mancha fotográfica no lado direito (60% da largura) - Título sobreposto à foto com overlay escuro - Logo em preto, barra dourada mantida ### Separador de Secção **Objectivo:** pausar o ritmo, anunciar o tema seguinte. ```python def criar_separador(c: canvas.Canvas, numero: str, titulo_seccao: str): # Fundo dourado total — inversão de cor c.setFillColor(HexColor("#C9A84C")) c.rect(0, 0, W, H, fill=1, stroke=0) # Número enorme em background (marca de água visual) c.setFillColor(HexColor("#E8D5A3")) # dourado claro c.setFont("Nexa-Bold", 280) c.drawString(-20, H * 0.1, numero) # pode sair do bounds — intencional # Título da secção — preto sobre dourado c.setFillColor(HexColor("#0D0D0D")) c.setFont("Nexa-Bold", 42) c.drawString(48, H * 0.45, titulo_seccao) # Linha divisória fina c.setStrokeColor(HexColor("#0D0D0D")) c.setLineWidth(1) c.line(48, H * 0.42, W - 48, H * 0.42) ``` ### Infográfico de Dados **Objectivo:** tornar números abstractos em narrativa visual. ```python def criar_infografico_metricas(c: canvas.Canvas, metricas: list[dict]): """ metricas = [ {"valor": "3x", "label": "Aumento de tráfego", "icone": "trend"}, {"valor": "47%", "label": "Redução de custo por lead", "icone": "savings"}, {"valor": "12", "label": "Palavras-chave no Top 3", "icone": "star"}, ] """ # Fundo neutro quente c.setFillColor(HexColor("#F5F5F5")) c.rect(0, 0, W, H, fill=1, stroke=0) # Título da página c.setFillColor(HexColor("#0D0D0D")) c.setFont("Nexa-Bold", 32) c.drawString(48, H - 80, "Resultados Projectados") # Grid de métricas (3 colunas) col_w = (W - 96) / len(metricas) for i, m in enumerate(metricas): x = 48 + i * col_w y_center = H * 0.5 # Caixa de métrica c.setFillColor(HexColor("#FFFFFF")) c.roundRect(x + 8, y_center - 80, col_w - 16, 160, 12, fill=1, stroke=0) # Valor principal — grande e dourado c.setFillColor(HexColor("#C9A84C")) c.setFont("Nexa-Bold", 56) c.drawCentredString(x + col_w / 2, y_center + 20, m["valor"]) # Label — preto, pequeno c.setFillColor(HexColor("#3D3D3D")) c.setFont("SourceSans3-Regular", 11) c.drawCentredString(x + col_w / 2, y_center - 20, m["label"]) ``` ### Página de Pricing Visual **Objectivo:** apresentar preços sem que pareçam uma tabela de custos. ```python def criar_pricing(c: canvas.Canvas, planos: list[dict]): """ planos = [ {"nome": "Essencial", "preco": 450, "destaque": False, "items": ["SEO On-page", "Relatório mensal", "2 artigos/mês"]}, {"nome": "Crescimento", "preco": 850, "destaque": True, "items": ["SEO completo", "Google Ads", "4 artigos/mês", "Dashboard BI"]}, ] """ # Fundo escuro para pricing c.setFillColor(HexColor("#0D0D0D")) c.rect(0, 0, W, H, fill=1, stroke=0) card_w = (W - 96 - 16 * (len(planos) - 1)) / len(planos) for i, p in enumerate(planos): x = 48 + i * (card_w + 16) y_top = H * 0.75 if p["destaque"]: # Card dourado para o plano recomendado c.setFillColor(HexColor("#C9A84C")) c.roundRect(x - 4, y_top - 4, card_w + 8, H * 0.5 + 8, 16, fill=1, stroke=0) texto_cor = HexColor("#0D0D0D") else: c.setFillColor(HexColor("#1A1A1A")) c.roundRect(x, y_top, card_w, H * 0.5, 12, fill=1, stroke=0) texto_cor = HexColor("#FFFFFF") # Nome do plano c.setFillColor(texto_cor) c.setFont("Nexa-Bold", 20) c.drawString(x + 20, y_top + H * 0.5 - 44, p["nome"]) # Preço c.setFont("Nexa-Bold", 48) c.drawString(x + 20, y_top + H * 0.5 - 100, f"{p['preco']}€") c.setFont("SourceSans3-Regular", 11) c.drawString(x + 20, y_top + H * 0.5 - 118, "/ mês + IVA") # Items incluídos c.setFont("SourceSans3-Regular", 12) y_item = y_top + H * 0.5 - 150 for item in p["items"]: c.drawString(x + 28, y_item, f"— {item}") y_item -= 22 ``` --- ## Ferramentas: python-reportlab vs pptxgenjs | Critério | python-reportlab | pptxgenjs (Node) | |----------|-----------------|------------------| | Output | PDF nativo | PPTX (editável) | | Controlo | Pixel-perfect | Aproximado | | Fontes custom | Suporte completo | Limitado | | Melhor para | Proposta final PDF | Template editável pelo cliente | | Ambiente | Servidor dev (`/root/Dev`) | Servidor dev ou local | **Recomendação:** usar reportlab para proposta final; pptxgenjs se o cliente precisar de editar. ```bash # Instalar no servidor dev pip install reportlab Pillow # Registar fontes Nexa from reportlab.pdfbase import pdfmetrics from reportlab.pdfbase.ttfonts import TTFont pdfmetrics.registerFont(TTFont("Nexa-Bold", "/root/Dev/assets/fonts/Nexa-Bold.ttf")) pdfmetrics.registerFont(TTFont("Nexa-Light", "/root/Dev/assets/fonts/Nexa-Light.ttf")) ``` --- ## Regras de Composição (resumo operacional) 1. **Uma mensagem por página** — se precisas de duas frases para explicar, remove uma 2. **Âncora visual primeiro** — o olho precisa de um ponto de entrada (número grande, foto, cor) 3. **Contraste de escala** — combinar elemento 280pt com texto 12pt (não 24pt com 18pt) 4. **Margens generosas** — margem mínima de 48pt em A4; prefere 64pt 5. **Rodapé discreto** — página + marca em 9pt, nunca competir com conteúdo 6. **Máximo 3 fontes** — Nexa Bold + Nexa Light + Source Sans 3 (IBM Plex Mono opcional para dados) 7. **Alinhamento consistente** — escolher esquerda ou centrado para o documento inteiro --- ## Checklist de Qualidade - [ ] Capa com nome do cliente e data correctos - [ ] Logo Descomplicar presente em todas as páginas (rodapé ou canto) - [ ] Paleta restrita a 3 cores por página - [ ] Nenhuma fonte genérica (Arial, Calibri, Times) - [ ] Espaço negativo generoso — sem páginas "cheias" - [ ] Preços em EUR sem decimais desnecessários (850EUR, não 850,00EUR) - [ ] PDF exportado em vector (não rasterizado) - [ ] Tamanho final < 10MB para envio por email - [ ] Testar visualização em modo claro e escuro (PDF viewer) --- *Referência: premium-proposals v1.0 | 2026-03-10 | Descomplicar®*