---
title: "Guia de Estilo Visual - OpenClaw Social Media"
url: "https://openclaw.ia.br/docs/brand-guidelines/"
markdown_url: "https://openclaw.ia.br/docs/brand-guidelines.MD"
description: "Diretrizes de marca para criação de conteúdo visual para redes sociais OpenClaw. Cores, tipografia, dimensões e exemplos."
date: "2026-02-01"
author: ""
---

# Guia de Estilo Visual - OpenClaw Social Media

Diretrizes de marca para criação de conteúdo visual para redes sociais OpenClaw. Cores, tipografia, dimensões e exemplos.


# Guia de Estilo Visual

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

---

##  Paleta de Cores

### Cores Primárias

| Nome | Hex | RGB | Uso |
|------|-----|-----|-----|
| **Dark Background** | `#0A0A0A` | 10, 10, 10 | Fundo principal |
| **Neon Green** | `#00FF88` | 0, 255, 136 | Destaque, CTAs, números |
| **Electric Blue** | `#0066FF` | 0, 102, 255 | Destaque secundário, links |

### Cores Secundárias

| Nome | Hex | RGB | Uso |
|------|-----|-----|-----|
| **White** | `#FFFFFF` | 255, 255, 255 | Texto principal |
| **Light Gray** | `#CCCCCC` | 204, 204, 204 | Texto secundário |
| **Medium Gray** | `#666666` | 102, 102, 102 | Texto terciário, subtítulos |
| **Dark Gray** | `#333333` | 51, 51, 51 | Numeração de slides |

### Gradientes

```css
/* 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.

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

### Pesos

| Peso | Uso |
|------|-----|
| **900 (Black)** | Headlines principais, números de impacto |
| **700 (Bold)** | Subtítulos, títulos secundários |
| **600 (SemiBold)** | Destaques em corpo de texto |
| **400 (Regular)** | Corpo de texto, descrições |

### Tamanhos por Contexto

**Slides Instagram/LinkedIn (1080x1350):**

| Elemento | Tamanho | Line-height |
|----------|---------|-------------|
| H1 (headline) | 72px | 1.1 |
| H2 (subtítulo) | 48px | 1.2 |
| H3 (seção) | 36px | 1.3 |
| Parágrafo | 32px | 1.5 |
| Subtext | 28px | 1.4 |
| Stat Big | 120px | 1.0 |
| Stat Medium | 48px | 1.2 |
| Citação | 42px | 1.4 |

---

##  Dimensões

### Por Plataforma

| Plataforma | Formato | Dimensão | Aspect Ratio |
|------------|---------|----------|--------------|
| **Instagram Post** | Quadrado | 1080 × 1080 | 1:1 |
| **Instagram Carousel** | Retrato | 1080 × 1350 | 4:5 |
| **Instagram Stories** | Vertical | 1080 × 1920 | 9:16 |
| **LinkedIn Post** | Paisagem | 1200 × 627 | 1.91:1 |
| **LinkedIn Carousel** | Quadrado | 1080 × 1080 | 1:1 |
| **Twitter/X** | Paisagem | 1200 × 675 | 16:9 |
| **YouTube Thumbnail** | Paisagem | 1280 × 720 | 16:9 |

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

| Contexto | Variação |
|----------|----------|
| Fundo escuro | Logo branco ou neon green |
| Fundo claro | Logo preto |
| Slide de CTA | Logo com URL abaixo |

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

| Tipo | Padrão | Exemplo |
|------|--------|---------|
| Carousel | `carousel-[tema-curto]/` | `carousel-gen-z-ia/` |
| Post único | `post-[tema]-[data].png` | `post-eupresa-2026-02.png` |
| Infográfico | `infografico-[tema].png` | `infografico-roi-ia.png` |

---

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

| Pasta | Tema | Slides |
|-------|------|--------|
| `carousel-empresa-bilhao/` | Empresa de $1B com uma pessoa | 10 |
| `carousel-gen-z-ia/` | Gen Z e IA no trabalho | 10 |
| `carousel-agentic-commerce/` | Comércio agêntico | 8 |
| `carousel-3-sinais/` | Sinais que precisa de IA | 5 |

### CSS Base Reutilizável

```css
* { 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

| Biblioteca | Uso | Link |
|------------|-----|------|
| **Lucide Icons** | Ícones de interface, ações | [lucide.dev](https://lucide.dev) |
| **Heroicons** | UI complementar | [heroicons.com](https://heroicons.com) |
| **Simple Icons** | Logos de marcas/techs | [simpleicons.org](https://simpleicons.org) |
| **Phosphor Icons** | Versatilidade geral | [phosphoricons.com](https://phosphoricons.com) |

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

```css
/* Í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:

| Contexto | Emojis Comuns |
|----------|---------------|
| IA/Tech |   ⚡    |
| Negócios |       |
| Produtividade | ✅ ⏰    |
| Comunicação |     |
| Alerta/Atenção | ⚠  ❌ ✅ |

**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](https://cssgradient.io/)
- [Verificador de Contraste](https://webaim.org/resources/contrastchecker/)
- [Google Fonts - Inter](https://fonts.google.com/specimen/Inter)

---

## Changelog

| Data | Versão | Mudanças |
|------|--------|----------|
| 2026-02-01 | 1.1 | Adicionado seção de ícones e emojis |
| 2026-02-01 | 1.0 | Documentação inicial criada |

---

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