Design & Social — Vivilo 3D
Marca: Vivilo 3D — "A sua imaginação ganha forma". Transforma desenhos infantis em estatuetas, chaveiros e objetos 3D sob encomenda. Repo: valentierro/vivilo3d.
Identidade visual
Paleta
| Token |
Hex |
Uso |
| Red (coral) |
#E8543A |
Títulos accent, CTAs, @handle |
| Red light |
#FDE8E4 |
Fundos suaves, ícones |
| Olive |
#8A8B4E |
Ribbons, feature bars, badges |
| Olive light |
#F0F0E4 |
Blobs decorativos |
| Yellow |
#F5A623 |
Estrelas, orbs, destaques |
| Yellow light |
#FEF3D9 |
Blobs |
| Background |
#FAF8F4 |
Canvas base (feed e pad reels) |
| Text primary |
#5C3A28 |
Headlines |
| Text secondary |
#7A7368 |
Subcopy |
Gradientes: radial blobs nas 3 cores sobre #FAF8F4. Stories emocionais: story-dark (azul/roxo → coral).
Tipografia
- Display: Baloo 2 ExtraBold (800) — headlines 3D com text-shadow
- Body: Poppins 400–700 — subcopy, badges, CTAs
- Script (opcional): Patrick Hand — notas manuscritas
Fontes locais: public/fonts/Baloo2-*.ttf, Poppins-*.ttf
Elementos recorrentes
- Logo:
public/brand/vivilo-logo-horizontal.png
- Blobs, estrelas ★, corações ♥, confetti colorido
- Painéis arredondados (border-radius 28–42px) com sombra suave
- Before/after: desenho 2D → objeto 3D com orb ✨ central
- Badges pill (campanha, data)
- Footer: chip + CTA pill
vivilo3d.com.br/... + handle @vivilo3d
Formatos Instagram
| Formato |
Dimensão |
Classe CSS |
| Feed / carrossel |
1080×1080 |
.canvas-feed |
| Stories / Reels frame |
1080×1920 |
.canvas-story |
Reels: sequência PNG 1080×1920 → ffmpeg (scripts/gerar-reel-*.ts), 30fps, pad #FAF8F4, zoompan sutil, xfade transitions.
Pipeline de produção (repo)
- Templates HTML —
public/instagram/templates/<campanha>/ + base.css
- Compositing Python —
scripts/composite-*.py + instagram_fonts.py (Pillow)
- Reels TS —
scripts/gerar-reel-<tema>.ts (ffmpeg-static)
- Legendas —
public/instagram/<campanha>/LEGENDA.md ou LEGENDA-REEL.md
- Output — PNGs/MP4 em
public/instagram/
Naming: instagram-feed-*, instagram-story-*-NN-*.png, instagram-reel-*-NN-*.png, instagram-reel-*-XXs.mp4
Estrutura de campanha típica
Reels (6 slides): hook → benefício 1 → benefício 2 → comparativo → prova social → CTA
Stories (3–4 telas): gancho → conteúdo → detalhe → CTA link
Feed: capa forte + before/after ou grid de benefícios + feature bar + footer
Tom de copy (pt-BR)
- Emocional, familiar, presente com significado
- Destaques: prévia 3D antes de imprimir, envio Brasil, sob encomenda
- Emojis moderados (🎨 🎁 ✨ 👉)
- Hashtags:
#vivilo3d #impressao3d #artesobencomenda #desenhoinfantil #3dbrasil #personalizado
- CTA:
vivilo3d.com.br/sob-encomenda ou campanha específica
Regras de design
- Sempre usar paleta Vivilo — nunca cores frias/genéricas fora do sistema.
- Canvas exato — 1080×1080 ou 1080×1920, sem crop inesperado.
- Logo visível no topo;
@vivilo3d no footer de feed/stories.
- Hierarquia: headline Baloo grande → ribbon olive/coral → subcopy Poppins → hero visual → CTA pill coral.
- Hero = transformação — mostrar desenho → peça 3D quando possível (assets em
public/gallery/, public/instagram/projeto-*).
- Decorativo com moderação — blobs + 2–3 ícones; não poluir.
- CTA claro — pill gradient coral, texto branco, URL legível.
- Campanhas datadas — badge com data/evento (ex.: "DIA DOS PAIS · 09 AGO").
- Reels: 18–25s, 5–6 cenas, transições xfade, zoompan ≤1.08.
- Consistência cross-format — mesma campanha em feed + stories + reel; legendas em LEGENDA.md.
Assets de referência
public/brand/vivilo-logo-horizontal.png
public/instagram/templates/dia-dos-pais/feed-campanha.html
public/instagram/templates/dia-dos-pais/base.css
public/instagram/cores/LEGENDA.md
public/gallery/mimi-*.png
scripts/instagram_fonts.py
scripts/gerar-reel-cores.ts
Novo conteúdo — checklist
- [ ] Campanha e objetivo definidos
- [ ] Template HTML ou script composite escolhido
- [ ] Imagens source em public/instagram/<campanha>/
- [ ] PNGs exportados nos tamanhos corretos
- [ ] Reel gerado (se aplicável)
- [ ] LEGENDA.md com copy + hashtags + ordem stories
- [ ] Preview visual antes de publicar
Para specs detalhadas de componentes CSS, ver reference.md.
1---2name: design-social-vivilo3description: Creates rich Instagram art for Vivilo 3D — feed, stories, reels, carousels. Warm organic brand (Baloo 2 + Poppins, coral/olive/yellow). Use when designing social media posts, reels, stories, or marketing art for vivilo3d or similar custom 3D gift businesses.4---56# Design & Social — Vivilo 3D78Marca: **Vivilo 3D** — "A sua imaginação ganha forma". Transforma desenhos infantis em estatuetas, chaveiros e objetos 3D sob encomenda. Repo: `valentierro/vivilo3d`.910## Identidade visual1112### Paleta1314| Token | Hex | Uso |15|-------|-----|-----|16| Red (coral) | `#E8543A` | Títulos accent, CTAs, @handle |17| Red light | `#FDE8E4` | Fundos suaves, ícones |18| Olive | `#8A8B4E` | Ribbons, feature bars, badges |19| Olive light | `#F0F0E4` | Blobs decorativos |20| Yellow | `#F5A623` | Estrelas, orbs, destaques |21| Yellow light | `#FEF3D9` | Blobs |22| Background | `#FAF8F4` | Canvas base (feed e pad reels) |23| Text primary | `#5C3A28` | Headlines |24| Text secondary | `#7A7368` | Subcopy |2526Gradientes: radial blobs nas 3 cores sobre `#FAF8F4`. Stories emocionais: `story-dark` (azul/roxo → coral).2728### Tipografia2930- **Display:** Baloo 2 ExtraBold (800) — headlines 3D com text-shadow31- **Body:** Poppins 400–700 — subcopy, badges, CTAs32- **Script (opcional):** Patrick Hand — notas manuscritas3334Fontes locais: `public/fonts/Baloo2-*.ttf`, `Poppins-*.ttf`3536### Elementos recorrentes3738- Logo: `public/brand/vivilo-logo-horizontal.png`39- Blobs, estrelas ★, corações ♥, confetti colorido40- Painéis arredondados (border-radius 28–42px) com sombra suave41- **Before/after:** desenho 2D → objeto 3D com orb ✨ central42- Badges pill (campanha, data)43- Footer: chip + CTA pill `vivilo3d.com.br/...` + handle `@vivilo3d`4445## Formatos Instagram4647| Formato | Dimensão | Classe CSS |48|---------|----------|------------|49| Feed / carrossel | 1080×1080 | `.canvas-feed` |50| Stories / Reels frame | 1080×1920 | `.canvas-story` |5152Reels: sequência PNG 1080×1920 → ffmpeg (`scripts/gerar-reel-*.ts`), 30fps, pad `#FAF8F4`, zoompan sutil, xfade transitions.5354## Pipeline de produção (repo)55561. **Templates HTML** — `public/instagram/templates/<campanha>/` + `base.css`572. **Compositing Python** — `scripts/composite-*.py` + `instagram_fonts.py` (Pillow)583. **Reels TS** — `scripts/gerar-reel-<tema>.ts` (ffmpeg-static)594. **Legendas** — `public/instagram/<campanha>/LEGENDA.md` ou `LEGENDA-REEL.md`605. **Output** — PNGs/MP4 em `public/instagram/`6162Naming: `instagram-feed-*`, `instagram-story-*-NN-*.png`, `instagram-reel-*-NN-*.png`, `instagram-reel-*-XXs.mp4`6364## Estrutura de campanha típica6566**Reels (6 slides):** hook → benefício 1 → benefício 2 → comparativo → prova social → CTA6768**Stories (3–4 telas):** gancho → conteúdo → detalhe → CTA link6970**Feed:** capa forte + before/after ou grid de benefícios + feature bar + footer7172## Tom de copy (pt-BR)7374- Emocional, familiar, presente com significado75- Destaques: prévia 3D antes de imprimir, envio Brasil, sob encomenda76- Emojis moderados (🎨 🎁 ✨ 👉)77- Hashtags: `#vivilo3d #impressao3d #artesobencomenda #desenhoinfantil #3dbrasil #personalizado`78- CTA: `vivilo3d.com.br/sob-encomenda` ou campanha específica7980## Regras de design81821. **Sempre usar paleta Vivilo** — nunca cores frias/genéricas fora do sistema.832. **Canvas exato** — 1080×1080 ou 1080×1920, sem crop inesperado.843. **Logo visível** no topo; `@vivilo3d` no footer de feed/stories.854. **Hierarquia:** headline Baloo grande → ribbon olive/coral → subcopy Poppins → hero visual → CTA pill coral.865. **Hero = transformação** — mostrar desenho → peça 3D quando possível (assets em `public/gallery/`, `public/instagram/projeto-*`).876. **Decorativo com moderação** — blobs + 2–3 ícones; não poluir.887. **CTA claro** — pill gradient coral, texto branco, URL legível.898. **Campanhas datadas** — badge com data/evento (ex.: "DIA DOS PAIS · 09 AGO").909. **Reels:** 18–25s, 5–6 cenas, transições xfade, zoompan ≤1.08.9110. **Consistência cross-format** — mesma campanha em feed + stories + reel; legendas em LEGENDA.md.9293## Assets de referência9495```96public/brand/vivilo-logo-horizontal.png97public/instagram/templates/dia-dos-pais/feed-campanha.html98public/instagram/templates/dia-dos-pais/base.css99public/instagram/cores/LEGENDA.md100public/gallery/mimi-*.png101scripts/instagram_fonts.py102scripts/gerar-reel-cores.ts103```104105## Novo conteúdo — checklist106107```108- [ ] Campanha e objetivo definidos109- [ ] Template HTML ou script composite escolhido110- [ ] Imagens source em public/instagram/<campanha>/111- [ ] PNGs exportados nos tamanhos corretos112- [ ] Reel gerado (se aplicável)113- [ ] LEGENDA.md com copy + hashtags + ordem stories114- [ ] Preview visual antes de publicar115```116117Para specs detalhadas de componentes CSS, ver [reference.md](reference.md).
valentierro