Edugalbs
Agentic software factory · what works and what breaks
The visual identity of edugalbs.com for Instagram, YouTube Shorts and LinkedIn. Deep night blue, one accent per pillar, condensed heavy type for titles, numbers in mono. Sober, technical, with a single light effect. Eduardo's face is the human element; the rest is screens, code and data.
It exists so that anyone, or any AI agent, can make reels, carousels, stories and covers to the same standard without reinventing anything. The colours and fonts are the site's own.
For people and agents
- Read this whole page: the pillars, the principles and the don'ts matter more than the numbers.
- Use the tokens, never a colour or font outside them:
tokens.json(each token with its use) ortokens.css(the same variables as CSS, with the fonts and the per-pillar accents). - Copy the structure of the format's template, set
data-pillaron the frame and change the text. The accent follows by itself.
<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)">FACTORY DIARY</p>
<h1 class="t-hook-lg">I went to sleep and woke up to <em style="color: var(--accent)">10 tasks</em> done</h1>
</div>Sizes are for a 1080px-wide frame. The token names and the data-pillar values are the same in both languages. This is version 1, of November 8, 2026.
Three pillars, one colour each
The colour changes only in the accent: the highlighted word in the title, the eyebrow, the big number, the progress bar, the CTA and the glow. Background, type, layout and signature are identical in all three. That is what makes the grid look like one channel with three sections rather than three accounts.
Factory
amber #f5b041 · The Factory Diary, chapters, the night's numbers, agents, token costs. 40 to 60% of the posts.
Blog
violet #8b6cff · Technical, outside the factory: 12-Factor Agents, the AI-native site, tools, Claude Code in general.
Leadership
teal #2ec4b6 · Teams, culture, career, talks, "I led 40 people".
Broke
danger #e5484d · Not a pillar or a colour: a marker inside the Factory. Eyebrow "WHAT BROKE", a 12px danger stroke on the left edge (.broke-mark) and the error in danger in code snippets. The title stays amber.
Seven rules
- The background is the night. Everything happens on
bg-000(#0b1220). Faint stars are allowed (dots ofinkat 20–40% opacity, 60 per frame at most); glow only in the pillar's colour, diffuse, behind the title. - One accent per post. Never two pillars on the same slide. A post about leadership that uses the factory as its example is Leadership (green); a factory chapter that teaches a leadership principle is Factory (amber). Decide by what the reader takes away, not by the example.
- Numbers in mono. Every statistic (+200 commits, 10 tasks, 22 h, 371 runs) goes in
stat-xl, IBM Plex Mono. It is what makes it look like a factory and not a motivational post. - Short, heavy title, 3 lines. Hooks in
hook-xlorhook-lg, Archivo 800. The search keyword (agentic factory, AI agents, Claude Code) takes the pillar's colour inside the title. - The face shows. Reels have Eduardo talking to the camera in the lower third, with the screen in picture-in-picture (
radius-lg). Carousels end with a face slide and a CTA. No avatar, no drawing of a person. - One effect only.
glow-accentbehind the title. No text gradients, no shadows on letters, no animated particles, no glassmorphism. - Fixed signature. Every piece ends with
edugalbs.com · <section>inbody-sm,ink-muted, in the bottom left corner (Factory Diary, Blog or Leadership). Chapters carryCH. NNinchapterin the top right corner; blog and leadership carry the pillar's name in the same place.
Colours
The dark theme is the default for everything; the light one is for documents only. Contrast on bg-000: ink 15:1, amber 10:1, teal 9:1, ink-muted 7:1, violet 5:1. Text on an amber or green button is bg-000 (dark), not white; on a violet button, ink.
The background of everything: reels, carousels, stories, covers. The site’s --night (night blue).
Cards, code boxes, caption and lower-third bars.
Hover, progress bar track, picture-in-picture frame.
Main text and captions burned into the video (the site’s --on-night).
Secondary text, timestamps, chapter number, signature.
FACTORY PILLAR. The accent of everything Factory Diary: keyword, eyebrow, bar, CTA. The site’s --amber.
Eyebrow and subtitles of the Factory pillar.
BLOG PILLAR. The accent of technical posts outside the factory (12-Factor, AI-native, tools). The violet of the home’s planet and of the blog.
Eyebrow and subtitles of the Blog pillar.
LEADERSHIP PILLAR. The accent of posts on teams, culture, career. The site’s --teal.
Eyebrow and subtitles of the Leadership pillar.
The “What broke” marker inside the Factory pillar: a 12px stroke on the left edge and the error in code snippets. Never a title or pillar colour. The site’s --danger.
1px hairlines, card borders (the site’s --line-dark).
Type
Archivo
Titles, hooks, eyebrows. Weight 800 for hooks, 700 for inner titles. Uppercase for carousel hooks; sentence case for reel covers.
IBM Plex Sans
Slide text and captions burned into the video.
Plex Mono
Numbers, code, chapter, timestamps.
All three come from Google Fonts. The scale is for a 1080px width, and each style below is shown at half size. No text under 24px at 1080px: on a phone it becomes unreadable.
SCALING 6×1? HERE IT’S 24×7
The most expensive token is an AI waiting
Nothing hits main without review
FACTORY DIARY
One agent writes, another reviews, another tests. Nothing gets in without my approval.
I went to sleep and woke up to 10 tasks done
edugalbs.com · Factory Diary
+200
CH. 04
git merge --no-ff feature/night-shift
Spacing, radii and the only effect
Spacing
Radii
8px
20px
40px
999px
glow-accent
0 0 120px 20px #f5b04155: the halo behind the title, in the pillar's colour (amber for the factory, violet for the blog, green for leadership).
Formats and safe zones
| Format | Size | Side margin | Safe zone | Use |
|---|---|---|---|---|
| Reel, Short, Story | 1080 × 1920 | space-4 (96px) | space-5 (160px) at the top, 320px at the bottom (Instagram's caption and buttons) | Video and cover |
| Carousel | 1080 × 1350 (4:5) | space-4 | space-3 | The default for carousels; takes more screen than 1:1 |
| Grid cover | 1080 × 1080 | — | — | The centre crop of the 4:5, what the profile shows: the title must fit in the central square |
| Highlight cover | 1080 × 1920 | — | Icon in the central 600px circle | Line icon in the pillar's colour on bg-000 |
1200 × 1200 or 1200 × 1500 | space-4 | space-3 | Same template as the carousel |
The templates
Each template is the literal layout of its format, at half its real size. All of them take data-pillar="fabrica" | "blog" | "lideranca" on the frame, and the accent follows by itself. The grey boxes mark where the real face and screen go.
ReelCover
Cover and first frame of a reel, short or story (1080 × 1920). Title in hook-lg, eyebrow in accent-soft, chapter number in chapter in the top right corner, glow-accent behind the title, the face in the lower third with the screen in picture-in-picture.
- The title sits in the upper third, below the 160px interface zone. 3 lines at 64px at most.
- The keyword (the number, the search term) takes the pillar's colour.
- A "Broke" post: Factory pillar, eyebrow "WHAT BROKE" and the
.broke-mark. - Grid 1:1 crop: the whole title must sit between y=420 and y=1500.
- In video, the same layout is frame 0 for 1 second; then the title moves up and becomes the
LowerThird. - No background photo. The face is real video, not a drawing.
CarouselHook
Carousel slide 1 (1080 × 1350). Hook in hook-xl, uppercase, aligned to the bottom. An optional big number in stat-xl in the pillar's colour above the title. Eyebrow with the pillar or the series, chapter in the corner, footer with the signature and "swipe →".
- Hook of 12 words and 3 lines at most, one word highlighted in the pillar's colour.
- The number only goes in when it is the point of the post (commits, tasks, hours, runs). Without it, the title moves up.
- The glow sits in the top left quadrant, so the title below reads on a clean background.
- Everything fits in the central 1:1 crop (y between 135 and 1215) for the grid cover.
CarouselSlide
Inner and final carousel slides (1080 × 1350). Numbering 03 / 08 in mono, title in title-md, body in body-lg, a progress bar in the pillar's colour on bg-200. A variant with a code box. The final slide has the round face, a question and the CTA as a pill.
- One point per slide, 45 words at most. If it needs two paragraphs, it is two slides.
- The progress bar is the only sign of position besides the number; no dots.
- Code: 6 lines at most, highlights in
accent-soft(keywords) anddanger(the error). - The final slide always exists and always has the face: it is what turns a visit into a follower.
- 6 to 10 slides per carousel.
StoryCard
Behind-the-scenes story (1080 × 1920): eyebrow with the time of day, numbers in bg-100 cards in mono, room for the real screenshot, one sentence in a smaller hook-lg and, when there is one, a poll as pills. 160px free at the top and 320px at the bottom.
- The screenshot is real and recent; no mockups.
- Up to 4 numbers per story. More than that is a carousel.
- Instagram's polls and question boxes go over the area marked
.poll. - A "Broke" story: Factory pillar, eyebrow "ERROR OF THE DAY" and the
.broke-mark. - Face (camera) stories don't use this template: only the
LowerThird.
LowerThird
What goes over the video: the burned-in caption (caption-video, in the upper third, on a bg-000 bar), the name bar and an 8px progress bar at the bottom. The end screen (2 s) has edugalbs.com, the pillar's line and the CTA as a pill.
- The caption is 2 lines at most and never covers the mouth.
- One word per caption in the pillar's colour: the keyword of that stretch.
- No animated word-by-word captions; whole sentences, changing every 2 to 3 s.
- The name bar shows only in the first 3 s and at the end.
- The end screen always has the same text and duration: it is the channel's signature.
Voice and copy
- First person, short sentences, concrete numbers. "I went to sleep and woke up to 10 tasks done", not "AI can transform your workflow".
- The hook is a question or a counter-intuitive statement in the first 3 seconds or on slide 1.
- Terms for the first lines of captions: "agentic software factory", "agentic engineering", "AI agents", "Claude Code".
- Never: "revolutionary", "the future is here", emojis as bullet points, more than 3 emojis per caption.
- Always close with a comment CTA ("comment FACTORY and I'll send you the chapter") or a question.
The posts themselves are mostly in Portuguese; these are the same rules in English.
What not to do
- A violet-to-blue gradient background (the AI cliché).
- Two accents in the same post; red as a title colour.
- Cards with a coloured left border, except the
.broke-mark, which is the only one and has a meaning. - White text on a photo without the
bg-100bar. - Montserrat, Poppins, Space Grotesk or any serif font.
- A cover that is only a screen of code, with no readable title in the central square.
Files
tokens.json: colours (dark and light), type families and styles, spacing, radii and the glow, each with its use (descriptions in Portuguese).tokens.css: the same tokens as CSS variables, with the fonts, the accents perdata-pillar, the.broke-markand the.t-<style>classes.- The templates: ReelCover, CarouselHook, CarouselSlide, StoryCard, LowerThird.
- This page as Markdown, for AI agents.
Updated November 8, 2026.