claude-plugins/design-media/skills/design/references/premium-proposals.md

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

# 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.

# 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.

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.

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.

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.

# 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®