---
fonte: 01-canonicos/seed-praticas.md
versao_da_fonte: v0.1
secao: 01
titulo: "Post único — formatos e áreas seguras por plataforma"
sequencia: 3 de 17
bytes_do_corpo: 8071
md5_do_corpo: 97f27e4300cc2bc4286e8bc25bd8bd39
gerado_por: 06-validacao/geradores/gen-camada-ia.py
nota: fatia GERADA — o corpo abaixo é byte a byte o trecho do canônico; edite o canônico, nunca esta fatia. Canônico inteiro em https://ds.seed.eng.br/01-canonicos/seed-praticas.md
---
## 1. Post único — formatos e áreas seguras por plataforma

> **Origem:** `seed-ds-post/references/formatos-post.md` (skill de 2026-05-13, 7440 bytes, MD5 `fc98f9af37718fb55b984c055c0fc3b1`; cópia preservada em `09-pesquisa/skills-v1-2026-05/referencias/formatos-post.md`) · **Importado em 2026-09-06 sem edição** — só os títulos foram rebaixados dois níveis (código intacto).
>
> **Estado: ⚠ não auditado contra o DS v2** (nenhuma contradição medida automaticamente: sem hex, sem Indie Flower, sem Lovable, sem apelidos do shadcn — a leitura humana ainda não foi feita).

### Formatos de post SEED — 10 sub-formatos com áreas seguras

Reference exclusiva da skill `seed-ds-post`. Cada sub-formato tem dimensões específicas, áreas seguras (zona crítica que não pode ser cortada em previews) e regras de aplicação do logo.

#### 1. Instagram vertical 4:5 · 1080×1350 ⭐ PREFERENCIAL PARA FEED 2026

**Aspect ratio:** 4:5 · **viewBox:** `0 0 1080 1350`

- **Formato preferencial pra feed Instagram desde 2026** — vertical ocupa 25% mais real estate em mobile, performa melhor que quadrado
- **Área segura central:** 1000×1290 (40px margem laterais, 30px topo/base)
- **Hierarquia tipográfica:** título ≥ 72px (maior que quadrado), subtítulo ≥ 36px, corpo ≥ 32px
- **Hook visual:** ocupa terço superior (até y=450)
- **CTA:** terço inferior (a partir de y=950)
- **Logo:** canto inferior — opcional canto superior se composição pedir
- **Quando usar:** **default pra post Instagram em 2026** — preferir sobre 1080² salvo briefing específico

#### 2. Instagram quadrado · 1080×1080 (legacy)

**Aspect ratio:** 1:1 · **viewBox:** `0 0 1080 1080`

- **Status:** formato ainda funcional, mas perdendo engagement vs 4:5 desde 2024. Usar quando: briefing pede explicitamente, peça precisa ser compartilhada em LinkedIn quadrado também, pra grids antigos
- **Área segura central:** 1000×1000 (40px de margem em cada lado)
- **Posição típica do logo:** canto inferior direito ou esquerdo, ~135px (1/8 largura) da menor dimensão
- **Hierarquia tipográfica:** título ≥ 64px, subtítulo ≥ 32px, corpo ≥ 28px
- **Hook visual:** ocupa terço superior, máximo respiro nas bordas
- **Quando usar:** post de divulgação geral quando briefing exige quadrado, post legacy, compartilhamento multi-plataforma

#### 3. Story Instagram/WhatsApp/Facebook · 1080×1920

**Aspect ratio:** 9:16 · **viewBox:** `0 0 1080 1920`

- **Área segura vertical:** entre y=250 e y=1670 (interface do app oculta topo e base em alguns devices)
- **CTA:** sempre no terço inferior (y=1280–1670), nunca no topo (perde no swipe-up gesture)
- **Logo:** topo ou canto inferior, fora da área de interface
- **Hierarquia:** título ≥ 80px (precisa "gritar" em mobile), subtítulo ~48px, corpo ≥ 36px
- **Quando usar:** anúncio com prazo, evento, lembrete, ações táticas de curto prazo

#### 4. LinkedIn quadrado · 1200×1200

**Aspect ratio:** 1:1 · **viewBox:** `0 0 1200 1200`

- Mesmo princípio do Instagram quadrado, ajustado pra escala LinkedIn
- **Foco em legibilidade:** muitos usuários veem em desktop, fontes podem ser menores que Instagram (corpo ≥ 28px)
- **Tom mais profissional:** EEny opcional (não default), paleta sóbria
- **Quando usar:** post institucional, anúncio corporativo, conquista

#### 5. LinkedIn horizontal · 1200×627

**Aspect ratio:** ~1.91:1 · **viewBox:** `0 0 1200 627`

- **Layout split:** texto à esquerda (60%), visual/logo à direita (40%) ou inverso
- **Título principal:** Montserrat Bold 48-56px
- **Logo:** canto direito ou centralizado no painel visual
- **Quando usar:** compartilhamento de artigo, link preview, anúncio com imagem dominante

#### 6. Capa LinkedIn pessoal · 1584×396

**Aspect ratio:** 4:1 · **viewBox:** `0 0 1584 396`

- **Área de mobile crop:** importante — perfil sobreposto à esquerda (avatar redondo) cobre os primeiros ~300px
- **Área segura central:** entre x=300 e x=1284 (mobile-safe)
- **Texto/identidade:** sempre na área central
- **Quando usar:** Rafael ou outro colaborador da SEED pessoalizar perfil profissional

#### 7. Capa YouTube · 2560×1440

**Aspect ratio:** 16:9 · **viewBox:** `0 0 2560 1440`

- **TV-safe area:** 1546×423 centralizada (entre x=507/y=509 e x=2053/y=931)
- Conteúdo crítico (logo, texto) deve estar nessa área central — bordas são cortadas em vários devices
- **Hierarquia ampla:** título ≥ 80px, subtítulo ~48px
- **Quando usar:** banner do canal YouTube da SEED (se houver)

#### 8. Capa Facebook · 820×312

**Aspect ratio:** ~2.63:1 · **viewBox:** `0 0 820 312`

- **Mobile crop:** desktop e mobile mostram áreas diferentes — desktop 820×312, mobile ~640×360 (corta lados, mostra mais altura)
- **Área 100% segura:** ~640×312 centralizada horizontalmente
- **Foto de perfil sobreposta:** canto inferior esquerdo, cobre área de ~170×170
- **Quando usar:** identidade institucional na página Facebook

#### 9. Banner web · variável

**Sem dimensão fixa.** Briefing deve declarar (ex: 1920×400, 1440×600, etc).

- **Aspect ratios comuns:** 4:1 (hero institucional), 3:1 (callout), 16:9 (banner promocional grande)
- **Mobile-responsive:** considerar como vai escalar pra ≤ 768px (texto pode ficar pequeno)
- **Quando usar:** hero do site, banner promocional em landing page, email header

#### 10. Imagem de blog / link preview · 1200×630

**Aspect ratio:** ~1.91:1 (Open Graph standard) · **viewBox:** `0 0 1200 630`

- **Aparece como preview de link** em WhatsApp, Slack, LinkedIn, Twitter quando compartilhado
- **Texto principal:** sempre legível em escala pequena (200×100 quando shrinkado)
- **Logo:** canto + nome legível
- **Quando usar:** thumbnail de artigo, social card de página específica

#### Regras transversais aplicáveis a todos os formatos

##### Tamanhos tipográficos — MÍNIMOS ABSOLUTOS (não negociáveis)

Os tamanhos abaixo são pisos. Reduzir abaixo desses valores quebra legibilidade em mobile e foi confirmado como problema em peças anteriores. Pode-se aumentar livremente acima.

| Hierarquia | 1080×1350 (4:5) | 1080² (legacy) | 1080×1920 (story) | 1200×627 | Capas |
|---|---|---|---|---|---|
| **Título principal** | 72px | 64px | 80px | 48px | 64px |
| **Subtítulo** | **36px** | **32px** | **40px** | **32px** | **32px** |
| **Corpo** | 32px | 28px | 36px | 24px | 24px |
| **Microcopy** (data, número) | 28px | 24px | 32px | 20px | 20px |
| **Rodapé** (logo + URL) | 22px | 20px | 24px | 18px | 18px |

**Regra explícita do subtítulo:** mínimo 32px em qualquer formato 1080+ — não usar 28px, 30px ou outros valores "perto". A leitura em mobile pequeno (iPhone SE, Android 5") exige esse piso. Issue identificado em produção anterior onde subtítulo 30px ficou marginal.

##### Margens e proporções

- **Margens mínimas:** 4% da menor dimensão (em 1080² → 43px; em 1200×627 → 25px)
- **Logo proporcional:** ~1/8 da menor dimensão (em 1080² → 135px de largura; em 1200×627 → ~78px)
- **EEny + logo juntos:** proporção **3:1** (logo 3× maior verticalmente que o EEny). Verificar VISUALMENTE depois de renderizar — issue identificado em produção anterior onde EEny saiu maior que o logo, criando hierarquia errada (mascote dominando marca).
  - 1080² com logo 135px de altura → EEny ~45px de altura, posicionado próximo ao logo
  - Hero composition (EEny sozinho como elemento principal, sem logo na mesma área): proporções livres
- **EEny sozinho** (não próximo do logo): proporções livres conforme composição
- **Margem de segurança do logo:** 10% do lado menor da bounding box do logo, em todas as direções. Bounding box apertada corta o logo — issue identificado em capas de PPTX e proposta.

##### Cores e tipografia

- **Cores:** apenas paleta SEED oficial (18 tokens — ver `paleta.md`)
- **Fontes:** Montserrat declarada com `@font-face` ou Google Fonts CDN no SVG
- **Sem rotação de elementos de marca, sem gradientes, sem sombras em texto**

---