--- name: design-b2b description: > Design system para serviços B2B — agências, consultoria, SaaS, PMEs portuguesas. Propostas visuais, landing pages, apresentações e materiais para decisores PT. Usar quando: proposta comercial, landing page serviço B2B, apresentação cliente, one-pager, ou qualquer material visual para audiência empresarial portuguesa. --- # /design-b2b — Design System Serviços B2B ## Paleta ```css --primary: #1e3a5f; /* Azul institucional — confiança, autoridade */ --accent: #f97316; /* Laranja acção — CTAs, destaques */ --neutral: #f8fafc; /* Fundo profissional */ --text: #1e293b; /* Texto principal */ --muted: #64748b; /* Texto secundário, legendas */ --border: #e2e8f0; /* Divisores subtis */ ``` ## Estrutura proposta comercial ### One-pager (1 A4 ou landing page equivalente) 1. **Header:** Logo cliente + logo Descomplicar + título proposta 2. **Problema:** 2-3 bullets do problema actual do cliente 3. **Solução:** O que entregamos (concreto, não vago) 4. **Resultados:** Métricas esperadas (%, EUR, tempo) 5. **Investimento:** Preço claro, sem asteriscos escondidos 6. **Próximo passo:** CTA único — "Agendar Reunião" ou "Aceitar Proposta" ### Landing page serviço B2B 1. Headline: benefício principal (não feature) 2. Sub-headline: para quem é + resultado esperado 3. Prova social: 3 logos de clientes ou 1 case study 4. Serviços: 3-5 cards com ícone + nome + 1 linha 5. Processo: 3-4 passos (simples e claro) 6. CTA: formulário simples (nome, email, empresa, mensagem) ## Tom e linguagem B2B PT - **Usar:** "optimizar", "aumentar eficiência", "reduzir custos" - **Evitar:** "disruptivo", "revolucionário", "próximo nível" - **Tratamento:** "Você" (neutro) ou "A sua empresa" — nunca "tu" em contexto formal - **Números:** sempre com fonte (ex: "30% redução de custos — caso Empresa X") ## Anti-slop checklist B2B - [ ] Zero jargão sem explicação - [ ] Preços ou "Solicitar orçamento" — nunca ambiguidade - [ ] Casos reais, não hipotéticos - [ ] Mobile: decisores usam telemóvel para primeiro contacto - [ ] Social proof: logo real, não ilustração ## Referências visuais Ver `~/.claude/design/referencias-visuais/servicos-b2b/` --- ## Healing Log ```jsonl {"date":"","issue":"","fix":"","source":"user|auto"} ```