Guia de Estilo Visual

Diretrizes para criação de conteúdo visual consistente para redes sociais do OpenClaw.

🎨 Paleta de Cores

Cores Primárias

Cores Secundárias

Gradientes

/* Fundo com glow sutil */
background: 
  radial-gradient(circle at 20% 80%, rgba(0,255,136,0.05) 0%, transparent 50%),
  radial-gradient(circle at 80% 20%, rgba(0,102,255,0.05) 0%, transparent 50%);

/* Box de destaque */
background: linear-gradient(135deg, rgba(0,255,136,0.1) 0%, rgba(0,102,255,0.1) 100%);
border: 2px solid rgba(0,255,136,0.3);

🔤 Tipografia

Família de Fonte

Inter — fonte principal para todos os materiais.

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&display=swap" rel="stylesheet">

Pesos

Tamanhos por Contexto

Slides Instagram/LinkedIn (1080x1350):

📐 Dimensões

Por Plataforma

Margens e Padding

Padrão para slides 1080x1350:

• Padding externo: 60px
• Espaço entre elementos: 20-40px
• Margem do número do slide: top 30px, right 40px

🖼️ Layout

Estrutura de Slide Padrão

┌─────────────────────────────────────┐
│  ░░░░░░░░░░░░░░░░░░░░░░░░░░░░ [01] │  ← Número do slide
│                                     │
│                                     │
│                                     │
│           HEADLINE                  │  ← Centralizado
│         PRINCIPAL                   │
│                                     │
│       Texto secundário              │
│                                     │
│                                     │
│                                     │
│         [Subtext]                   │  ← Opcional
│                                     │
└─────────────────────────────────────┘

Princípios de Layout

1. Centralização vertical e horizontal — conteúdo principal sempre centralizado
2. Hierarquia clara — headline > subtítulo > corpo > subtext
3. Respiro — muito espaço em branco, não sobrecarregar
4. Foco único — uma ideia principal por slide
5. Números grandes — estatísticas em destaque com stat-big

🏷️ Logo

Uso do Logo

• Posição: Canto inferior direito ou centralizado no slide final
• Tamanho mínimo: 100px de largura
• Espaço de respiro: Mínimo 20px de todas as bordas

Variações

Assinatura Padrão

[Logo OpenClaw]
openclaw.ia.br

✅ Checklist de Qualidade

Antes de Publicar

• Dimensões corretas para a plataforma
• Cores dentro da paleta oficial
• Fonte Inter em todos os textos
• Hierarquia visual clara (H1 > H2 > P)
• Contraste suficiente (texto legível)
• Número do slide visível (se carousel)
• Logo presente no slide final
• Textos sem erros ortográficos
• Texto não ultrapassa margens

🚫 O que Evitar

❌ Não Faça

1. Fundos claros — mantenha o tema dark
2. Cores fora da paleta — especialmente tons pastéis
3. Fontes decorativas — apenas Inter
4. Texto pequeno demais — mínimo 28px para legibilidade
5. Slides sobrecarregados — máximo 3 elementos principais
6. Gradientes coloridos fortes — mantenha sutis
7. Imagens sem tratamento — aplique overlay escuro se usar fotos

✅ Faça

1. Fundo escuro (#0A0A0A) — assinatura visual
2. Verde neon para impacto — números, CTAs, destaques
3. Muito espaço em branco — respiro visual
4. Consistência — mesmo estilo em toda série
5. Números grandes — 120px para estatísticas de impacto

📁 Estrutura de Arquivos

Nomenclatura

carousel-[tema]/
├── slides.html          # Mockup HTML para edição
├── slide-01.png         # Exportação PNG
├── slide-02.png
├── slide-03.png
└── README.md            # Contexto e copy

Convenções de Nome

🛠️ Workflow de Produção

Processo Padrão

1. Brief — Receber briefing com copy e dados
2. HTML — Criar mockup em HTML/CSS (mais fácil de editar)
3. Preview — Revisar no navegador em tamanho real
4. Export — Capturar screenshots em 1080x1350 ou dimensão adequada
5. Review — Checklist de qualidade
6. Entrega — Salvar em /static/images/social/

Ferramentas Recomendadas

• Edição: VS Code + Live Server
• Captura: Browser DevTools (responsive mode)
• Alternativa: Figma, Canva (manter paleta)

📚 Referências

Carousels Existentes

CSS Base Reutilizável

* { margin: 0; padding: 0; box-sizing: border-box; }

body { 
  font-family: 'Inter', sans-serif; 
  background: #1a1a1a;
}

.slide {
  width: 1080px;
  height: 1350px;
  background: #0A0A0A;
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 60px;
  text-align: center;
  position: relative;
}

.neon-green { color: #00FF88; }
.electric-blue { color: #0066FF; }

.stat-big {
  font-size: 120px;
  font-weight: 900;
  color: #00FF88;
}

🎯 Ícones

Conjuntos Recomendados

Estilo de Ícones

• Tipo: Outline (stroke) — não use ícones preenchidos
• Stroke: 2px (médio)
• Cor: Branco (#FFFFFF) ou Neon Green (#00FF88)
• Tamanho mínimo: 24px para legibilidade
• Tamanhos recomendados: 32px, 48px, 64px

Uso em Slides

/* Ícone padrão */
.icon {
  width: 48px;
  height: 48px;
  stroke: #FFFFFF;
  stroke-width: 2;
  fill: none;
}

/* Ícone destacado */
.icon-accent {
  stroke: #00FF88;
}

/* Ícone grande para ilustração */
.icon-hero {
  width: 120px;
  height: 120px;
  stroke-width: 1.5;
}

Emojis

Para slides mais casuais, emojis são permitidos:

Regra: Máximo 2-3 emojis por slide para não poluir.

🔗 Links Rápidos

Assets Internos

• Carousels: /static/images/social/
• Logo: /static/images/logo/
• Templates HTML: /static/templates/social/

Ferramentas Online

• Gerador de Gradientes
• Verificador de Contraste
• Google Fonts - Inter

Changelog

Mantido por Archive 📚 | Última atualização: Fevereiro 2026