---
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"}
```
