# Design system · Edugalbs URL: https://www.edugalbs.com/ds > O design system do edugalbs.com: cores, tipografia, espaçamentos e os moldes de reels, carrosséis e stories de Eduardo Galbiati, com os tokens em JSON e CSS para pessoas e agentes de IA. Design system ## 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. Como usar ### Para pessoas e agentes 1. Leia esta página inteira: os pilares, os princípios e o que não fazer valem mais que os números. 2. Use os tokens, nunca uma cor ou fonte fora deles: [`tokens.json`](https://www.edugalbs.com/ds/tokens.json) (cada token com o uso) ou [`tokens.css`](https://www.edugalbs.com/ds/tokens.css) (as mesmas variáveis em CSS, com as fontes e os acentos por pilar). 3. Copie a estrutura do [molde](https://www.edugalbs.com/ds#moldes) do formato, defina `data-pillar` no quadro e troque o texto. O acento muda sozinho. ```

DIÁRIO DA FÁBRICA

Fui dormir e acordei com 10 tarefas prontas

``` Os tamanhos são para um quadro de 1080px de largura. Esta versão é a 1, de 8 de novembro de 2026. Pilares ### 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. data-pillar="fabrica" #### Fábrica amber #f5b041 · Diário da Fábrica, capítulos, números da noite, agentes, custo em tokens. 40 a 60% dos posts. data-pillar="blog" #### Blog violet #8b6cff · Técnico fora da fábrica: 12-Factor Agents, site AI-native, ferramentas, Claude Code em geral. data-pillar="lideranca" #### Liderança teal #2ec4b6 · Times, cultura, carreira, palestras, "liderei 40 pessoas". O que quebrou #### 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. Princípios ### Sete regras 1. **O fundo é a noite.** Tudo acontece sobre `bg-000` (#0b1220). Estrelas sutis são permitidas (pontos de `ink` a 20–40% de opacidade, no máximo 60 por quadro); glow só na cor do pilar, difuso, atrás do título. 2. **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. 3. **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. 4. **Título curto, pesado, 3 linhas.** Ganchos em `hook-xl` ou `hook-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. 5. **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. 6. **Um efeito só.** `glow-accent` atrás do título. Sem gradientes de texto, sem sombra em letras, sem partículas animadas, sem glassmorphism. 7. **Assinatura fixa.** Todo material fecha com `edugalbs.com · ` em `body-sm`, `ink-muted`, no canto inferior esquerdo (Diário da Fábrica, Blog ou Liderança). Capítulos levam `CAP. NN` em `chapter` no canto superior direito; blog e liderança levam o nome do pilar no mesmo lugar. Cores ### 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`. **bg-000** escuro #0b1220 · claro #f3efe6 Fundo de tudo: reels, carrosséis, stories, capas. É o --night do site (azul-noite). **bg-100** escuro #111a2e · claro #e9e3d5 Cartões, caixas de código, tarjas de legenda e lower-third. **bg-200** escuro #18233b · claro #ddd6c6 Hover, fundo de barra de progresso, moldura do picture-in-picture. **ink** escuro #e6ecf5 · claro #101828 Texto principal e legendas queimadas no vídeo (--on-night do site). **ink-muted** escuro #9aa8c0 · claro #4a5468 Texto secundário, timestamps, número do capítulo, assinatura. **amber** escuro #f5b041 · claro #9a6200 PILAR FÁBRICA. Acento de tudo que é Diário da Fábrica: palavra-chave, eyebrow, barra, CTA. Mesmo --amber do site. **amber-soft** escuro #fbd791 · claro #7a4d00 Eyebrow e subtítulos do pilar Fábrica. **violet** escuro #8b6cff · claro #5a3ce6 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. **violet-soft** escuro #c9b8ff · claro #7c5cff Eyebrow e subtítulos do pilar Blog. **teal** escuro #2ec4b6 · claro #0f7a70 PILAR LIDERANÇA. Acento dos posts de times, cultura, carreira. Mesmo --teal do site (barra 'os agentes constroem'). **teal-soft** escuro #9ae8e0 · claro #0a5c54 Eyebrow e subtítulos do pilar Liderança. **danger** escuro #e5484d · claro #b3262b 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. **line** escuro #e6ecf5 12% · claro #101828 12% Hairlines de 1px, bordas de cartão (--line-dark do site). Tipografia ### Tipografia display 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. body IBM Plex Sans Texto de slides e legendas queimadas no vídeo. mono 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 **hook-xl** · display · 88px / 0.95 · 800 · -0.02em Gancho do slide 1 de carrossel (1080px). Caixa alta, no máximo 3 linhas. O token mais caro é o de uma IA esperando **hook-lg** · display · 64px / 1.0 · 800 · -0.015em Título de capa de reel e story (1080×1920). Sentence case, até 3 linhas. Nada vai pra main sem revisão **title-md** · display · 44px / 1.1 · 700 · -0.01em Título de slide interno de carrossel. DIÁRIO DA FÁBRICA **eyebrow** · display · 22px / 1.2 · 500 · 0.12em Rótulo acima do título, caixa alta, violet-soft ou amber-soft. Um agente escreve, outro revisa, outro testa. Nada entra sem a minha aprovação. **body-lg** · body · 34px / 1.35 · 400 Texto de slide interno. Máximo 45 palavras por slide. Fui dormir e acordei com 10 tarefas prontas **caption-video** · body · 40px / 1.25 · 600 Legenda queimada no vídeo, centro-superior do quadro, 2 linhas no máximo, palavra-chave em violet. edugalbs.com · Diário da Fábrica **body-sm** · body · 24px / 1.4 · 400 Rodapé, CTA final, fonte da citação. +200 **stat-xl** · mono · 120px / 1.0 · 700 Número grande de estatística (commits, tarefas, horas). Sempre com a unidade abaixo em body-sm. CAP. 04 **chapter** · mono · 26px / 1.2 · 500 · 0.06em Número do capítulo no canto superior direito de capas e slides, ink-muted. git merge --no-ff feature/night-shift **code** · mono · 26px / 1.5 · 400 Trechos de código e logs em slides, sobre bg-100. Espaço, cantos e luz ### Espaçamento, raios e o único efeito #### Espaçamento space-1 · 16pxGap entre eyebrow e título. space-2 · 32pxGap entre título e corpo; padding interno de cartões. space-3 · 64pxGap entre blocos de um slide. space-4 · 96pxMargem lateral de slides 1080×1080 e 1080×1350. space-5 · 160pxZona de segurança superior e inferior em 1080×1920 (interface do Instagram cobre essas faixas). #### Raios radius-sm 8px radius-md 20px radius-lg 40px radius-pill 999px #### glow-accent **Um efeito só** `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 ### 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` | | LinkedIn | `1200 × 1200` ou `1200 × 1500` | `space-4` | `space-3` | Mesmo molde do carrossel | Moldes ### 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. Fábrica (âmbar), fábrica com o marcador Quebrou, blog (violeta) e liderança (verde). [Abrir o molde](https://www.edugalbs.com/ds/moldes/ReelCover.html) #### 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. Fábrica (âmbar) e liderança (verde). [Abrir o molde](https://www.edugalbs.com/ds/moldes/CarouselHook.html) #### 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) e `danger` (o erro). - O slide final sempre existe e sempre tem o rosto: é o que converte visita em seguidor. - 6 a 10 slides por carrossel. Texto, caixa de código e slide final com CTA. [Abrir o molde](https://www.edugalbs.com/ds/moldes/CarouselSlide.html) #### 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`. Relatório da noite e story Quebrou com enquete. [Abrir o molde](https://www.edugalbs.com/ds/moldes/StoryCard.html) #### 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. Legenda e tarja de nome sobre o vídeo, e a tela de encerramento. [Abrir o molde](https://www.edugalbs.com/ds/moldes/LowerThird.html) Voz ### 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. Evitar ### 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 ### Arquivos - [`tokens.json`](https://www.edugalbs.com/ds/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`](https://www.edugalbs.com/ds/tokens.css): os mesmos tokens como variáveis CSS, com as fontes, os acentos por `data-pillar`, o `.broke-mark` e as classes `.t-`. - Os moldes: [ReelCover](https://www.edugalbs.com/ds/moldes/ReelCover.html), [CarouselHook](https://www.edugalbs.com/ds/moldes/CarouselHook.html), [CarouselSlide](https://www.edugalbs.com/ds/moldes/CarouselSlide.html), [StoryCard](https://www.edugalbs.com/ds/moldes/StoryCard.html), [LowerThird](https://www.edugalbs.com/ds/moldes/LowerThird.html). - [Esta página em Markdown](https://www.edugalbs.com/ds.md), para agentes de IA. Atualizado em 8 de novembro de 2026.