Edugalbs
Fábrica de software agêntica · o que funciona e o que quebra
A identidade visual do edugalbs.com para Instagram, YouTube Shorts e LinkedIn. Azul-noite profundo, um acento por pilar, tipografia condensada e pesada em títulos, números em mono. Sóbrio, técnico, com um único efeito de luz. O rosto do Eduardo é o elemento humano; o resto é tela, código e dados.
Existe para que qualquer pessoa, ou qualquer agente de IA, produza reels, carrosséis, stories e capas no mesmo padrão sem reinventar nada. As cores e as fontes são as mesmas do site.
Para pessoas e agentes
- Leia esta página inteira: os pilares, os princípios e o que não fazer valem mais que os números.
- Use os tokens, nunca uma cor ou fonte fora deles:
tokens.json(cada token com o uso) outokens.css(as mesmas variáveis em CSS, com as fontes e os acentos por pilar). - Copie a estrutura do molde do formato, defina
data-pillarno quadro e troque o texto. O acento muda sozinho.
<link rel="stylesheet" href="https://www.edugalbs.com/ds/tokens.css">
<div class="frame" data-pillar="fabrica">
<p class="t-eyebrow" style="color: var(--accent-soft)">DIÁRIO DA FÁBRICA</p>
<h1 class="t-hook-lg">Fui dormir e acordei com <em style="color: var(--accent)">10 tarefas</em> prontas</h1>
</div>Os tamanhos são para um quadro de 1080px de largura. Esta versão é a 1, de 8 de novembro de 2026.
Três pilares, uma cor cada
A cor muda só no acento: palavra em destaque no título, eyebrow, número grande, barra de progresso, CTA e glow. Fundo, tipografia, layout e assinatura são idênticos nos três. É isso que faz o grid parecer um canal com três seções e não três contas.
Fábrica
amber #f5b041 · Diário da Fábrica, capítulos, números da noite, agentes, custo em tokens. 40 a 60% dos posts.
Blog
violet #8b6cff · Técnico fora da fábrica: 12-Factor Agents, site AI-native, ferramentas, Claude Code em geral.
Liderança
teal #2ec4b6 · Times, cultura, carreira, palestras, "liderei 40 pessoas".
Quebrou
danger #e5484d · Não é um pilar nem uma cor: é um marcador dentro da Fábrica. Eyebrow "O QUE QUEBROU", traço danger de 12px na borda esquerda (.broke-mark) e o erro em danger nos trechos de código. O título continua âmbar.
Sete regras
- O fundo é a noite. Tudo acontece sobre
bg-000(#0b1220). Estrelas sutis são permitidas (pontos deinka 20–40% de opacidade, no máximo 60 por quadro); glow só na cor do pilar, difuso, atrás do título. - Um acento por post. Nunca dois pilares no mesmo slide. Um post que fala de liderança usando a fábrica como exemplo é Liderança (verde); um capítulo da fábrica que ensina um princípio de liderança é Fábrica (âmbar). Decide pelo que o leitor leva, não pelo exemplo.
- Números em mono. Qualquer estatística (+200 commits, 10 tarefas, 22 h, 371 runs) vai em
stat-xl, IBM Plex Mono. É o que faz parecer uma fábrica e não um post motivacional. - Título curto, pesado, 3 linhas. Ganchos em
hook-xlouhook-lg, Archivo 800. A palavra-chave da busca (fábrica agêntica, agentes de IA, Claude Code) ganha a cor do pilar dentro do título. - O rosto aparece. Reels têm o Eduardo falando para a câmera no terço inferior, com a tela em picture-in-picture (
radius-lg). Carrosséis terminam com um slide de rosto e CTA. Sem avatar, sem ilustração de pessoa. - Um efeito só.
glow-accentatrás do título. Sem gradientes de texto, sem sombra em letras, sem partículas animadas, sem glassmorphism. - Assinatura fixa. Todo material fecha com
edugalbs.com · <seção>embody-sm,ink-muted, no canto inferior esquerdo (Diário da Fábrica, Blog ou Liderança). Capítulos levamCAP. NNemchapterno canto superior direito; blog e liderança levam o nome do pilar no mesmo lugar.
Cores
O tema escuro é o padrão de tudo; o claro é só para documentos. Contraste sobre bg-000: ink 15:1, amber 10:1, teal 9:1, ink-muted 7:1, violet 5:1. Texto sobre botão âmbar ou verde é bg-000 (escuro), não branco; sobre botão violeta, ink.
Fundo de tudo: reels, carrosséis, stories, capas. É o --night do site (azul-noite).
Cartões, caixas de código, tarjas de legenda e lower-third.
Hover, fundo de barra de progresso, moldura do picture-in-picture.
Texto principal e legendas queimadas no vídeo (--on-night do site).
Texto secundário, timestamps, número do capítulo, assinatura.
PILAR FÁBRICA. Acento de tudo que é Diário da Fábrica: palavra-chave, eyebrow, barra, CTA. Mesmo --amber do site.
Eyebrow e subtítulos do pilar Fábrica.
PILAR BLOG. Acento dos posts técnicos que não são da fábrica (12-Factor, AI-native, ferramentas). É o violeta do planeta na home e do blog.
Eyebrow e subtítulos do pilar Blog.
PILAR LIDERANÇA. Acento dos posts de times, cultura, carreira. Mesmo --teal do site (barra 'os agentes constroem').
Eyebrow e subtítulos do pilar Liderança.
Marcador 'Quebrou' dentro do pilar Fábrica: um traço de 12px na borda esquerda e o erro em trechos de código. Nunca como cor de título ou de pilar. Mesmo --danger do site.
Hairlines de 1px, bordas de cartão (--line-dark do site).
Tipografia
Archivo
Títulos, ganchos, eyebrow. Peso 800 em ganchos, 700 em títulos internos. Caixa alta em ganchos de carrossel; sentence case em capas de reel.
IBM Plex Sans
Texto de slides e legendas queimadas no vídeo.
Plex Mono
Números, código, capítulo, timestamps.
As três vêm do Google Fonts. A escala é para 1080px de largura, e abaixo cada estilo aparece na metade do tamanho. Nenhum texto abaixo de 24px em 1080px: no celular isso vira ilegível.
ESCALA 6x1? AQUI É 24x7
O token mais caro é o de uma IA esperando
Nada vai pra main sem revisão
DIÁRIO DA FÁBRICA
Um agente escreve, outro revisa, outro testa. Nada entra sem a minha aprovação.
Fui dormir e acordei com 10 tarefas prontas
edugalbs.com · Diário da Fábrica
+200
CAP. 04
git merge --no-ff feature/night-shift
Espaçamento, raios e o único efeito
Espaçamento
Raios
8px
20px
40px
999px
glow-accent
0 0 120px 20px #f5b04155: o halo atrás do título, na cor do pilar (âmbar na fábrica, violeta no blog, verde na liderança).
Formatos e zonas de segurança
| Formato | Tamanho | Margem lateral | Zona livre | Uso |
|---|---|---|---|---|
| Reel, Short, Story | 1080 × 1920 | space-4 (96px) | space-5 (160px) em cima, 320px embaixo (legenda e botões do Instagram) | Vídeo e capa |
| Carrossel | 1080 × 1350 (4:5) | space-4 | space-3 | Padrão para carrosséis; ocupa mais tela que 1:1 |
| Capa de grid | 1080 × 1080 | — | — | Recorte central do 4:5, o que aparece no perfil: o título precisa caber no quadrado central |
| Capa de destaque | 1080 × 1920 | — | Ícone no círculo central de 600px | Ícone de linha na cor do pilar sobre bg-000 |
1200 × 1200 ou 1200 × 1500 | space-4 | space-3 | Mesmo molde do carrossel |
Os moldes
Cada molde é o desenho literal do formato, na metade do tamanho real. Todos aceitam data-pillar="fabrica" | "blog" | "lideranca" no quadro, e o acento muda sozinho. Os retângulos cinza marcam onde entram o rosto e a tela reais.
ReelCover
Capa e primeiro frame de reel, short e story (1080 × 1920). Título em hook-lg, eyebrow em accent-soft, número do capítulo em chapter no canto superior direito, glow-accent atrás do título, rosto no terço inferior com a tela em picture-in-picture.
- O título fica no terço superior, abaixo da zona de 160px da interface. No máximo 3 linhas em 64px.
- A palavra-chave (o número, o termo de busca) ganha a cor do pilar.
- Post "Quebrou": pilar fábrica, eyebrow "O QUE QUEBROU" e o
.broke-mark. - Recorte 1:1 do grid: o título precisa estar inteiro entre y=420 e y=1500.
- Em vídeo, o mesmo layout é o frame 0 por 1 segundo; depois o título sobe e vira
LowerThird. - Sem foto de fundo. O rosto é vídeo real, não ilustração.
CarouselHook
Slide 1 de carrossel (1080 × 1350). Gancho em hook-xl, caixa alta, alinhado embaixo. Número grande opcional em stat-xl na cor do pilar acima do título. Eyebrow com o pilar ou a série, chapter no canto, rodapé com a assinatura e "arrasta →".
- Gancho com no máximo 12 palavras e 3 linhas, uma palavra em destaque na cor do pilar.
- O número só entra quando é o ponto do post (commits, tarefas, horas, runs). Sem número, o título sobe.
- O glow fica no quadrante superior esquerdo, para o título embaixo ler sobre fundo limpo.
- Tudo cabe no recorte 1:1 central (y entre 135 e 1215) para a capa de grid.
CarouselSlide
Slides internos e final de carrossel (1080 × 1350). Numeração 03 / 08 em mono, título em title-md, corpo em body-lg, barra de progresso na cor do pilar sobre bg-200. Variante com caixa de código. O slide final traz o rosto redondo, uma pergunta e o CTA em pill.
- Um ponto por slide, no máximo 45 palavras. Se precisar de dois parágrafos, são dois slides.
- A barra de progresso é a única indicação de posição além do número; sem pontinhos.
- Código: no máximo 6 linhas, destaque em
accent-soft(palavras-chave) edanger(o erro). - O slide final sempre existe e sempre tem o rosto: é o que converte visita em seguidor.
- 6 a 10 slides por carrossel.
StoryCard
Story de bastidor (1080 × 1920): eyebrow com o momento do dia, números em cartões bg-100 em mono, espaço para o print real da tela, uma frase em hook-lg reduzido e, quando houver, enquete em pill. Zona livre de 160px em cima e 320px embaixo.
- O print é real e recente; sem mockup.
- Até 4 números por story. Mais que isso é um carrossel.
- Enquetes e caixas de pergunta do Instagram ficam sobre a área marcada
.poll. - Story "Quebrou": pilar fábrica, eyebrow "ERRO DO DIA" e o
.broke-mark. - Stories de rosto (câmera) não usam este molde: só o
LowerThird.
LowerThird
Elementos sobre o vídeo: legenda queimada (caption-video, no terço superior, sobre tarja bg-000), tarja de nome e barra de progresso de 8px no rodapé. A tela de encerramento (2 s) tem edugalbs.com, a frase do pilar e o CTA em pill.
- A legenda tem no máximo 2 linhas e nunca cobre a boca.
- Uma palavra por legenda na cor do pilar: a palavra-chave do trecho.
- Sem legendas palavra a palavra animadas; frases inteiras, trocando a cada 2 a 3 s.
- A tarja de nome aparece só nos primeiros 3 s e no encerramento.
- O encerramento tem sempre o mesmo texto e a mesma duração: é a assinatura do canal.
Voz e texto
- Primeira pessoa, frases curtas, números concretos. "Fui dormir e acordei com 10 tarefas prontas", não "A IA pode transformar seu fluxo".
- Gancho é uma pergunta ou uma afirmação contraintuitiva nos primeiros 3 segundos ou no slide 1.
- Termos para as primeiras frases das legendas: "fábrica de software agêntica", "engenharia agêntica", "agentes de IA", "Claude Code".
- Nunca: "revolucionário", "o futuro chegou", emojis como marcador de lista, mais de 3 emojis por legenda.
- Fechamento sempre com um CTA de comentário ("comenta FÁBRICA que eu te mando o capítulo") ou uma pergunta.
O que não fazer
- Gradiente violeta para azul no fundo (é o clichê de IA).
- Dois acentos no mesmo post; vermelho como cor de título.
- Cartão com borda esquerda colorida, exceto o
.broke-mark, que é o único e tem significado. - Texto branco sobre foto sem a tarja
bg-100. - Montserrat, Poppins, Space Grotesk ou qualquer fonte serifada.
- Capa só com tela de código, sem título legível no quadrado central.
Arquivos
tokens.json: cores (escuro e claro), famílias e estilos de tipo, espaçamentos, raios e o glow, cada um com o seu uso.tokens.css: os mesmos tokens como variáveis CSS, com as fontes, os acentos pordata-pillar, o.broke-marke as classes.t-<estilo>.- Os moldes: ReelCover, CarouselHook, CarouselSlide, StoryCard, LowerThird.
- Esta página em Markdown, para agentes de IA.
Atualizado em 8 de novembro de 2026.