# Design system · Edugalbs
URL: https://www.edugalbs.com/ds/en
> The edugalbs.com design system: colours, type, spacing and the templates for Eduardo Galbiati's reels, carousels and stories, with the tokens as JSON and CSS for people and AI agents.
Design system
## 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.
How to use it
### For people and agents
1. Read this whole page: the pillars, the principles and the don'ts matter more than the numbers.
2. Use the tokens, never a colour or font outside them: [`tokens.json`](https://www.edugalbs.com/ds/tokens.json) (each token with its use) or [`tokens.css`](https://www.edugalbs.com/ds/tokens.css) (the same variables as CSS, with the fonts and the per-pillar accents).
3. Copy the structure of the format's [template](https://www.edugalbs.com/ds/en#templates), set `data-pillar` on the frame and change the text. The accent follows by itself.
```
FACTORY DIARY
I went to sleep and woke up to 10 tasks done
```
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.
Pillars
### 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.
data-pillar="fabrica"
#### Factory
amber #f5b041 · The Factory Diary, chapters, the night's numbers, agents, token costs. 40 to 60% of the posts.
data-pillar="blog"
#### Blog
violet #8b6cff · Technical, outside the factory: 12-Factor Agents, the AI-native site, tools, Claude Code in general.
data-pillar="lideranca"
#### Leadership
teal #2ec4b6 · Teams, culture, career, talks, "I led 40 people".
What broke
#### 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.
Principles
### Seven rules
1. **The background is the night.** Everything happens on `bg-000` (#0b1220). Faint stars are allowed (dots of `ink` at 20–40% opacity, 60 per frame at most); glow only in the pillar's colour, diffuse, behind the title.
2. **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.
3. **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.
4. **Short, heavy title, 3 lines.** Hooks in `hook-xl` or `hook-lg`, Archivo 800. The search keyword (agentic factory, AI agents, Claude Code) takes the pillar's colour inside the title.
5. **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.
6. **One effect only.** `glow-accent` behind the title. No text gradients, no shadows on letters, no animated particles, no glassmorphism.
7. **Fixed signature.** Every piece ends with `edugalbs.com · ` in `body-sm`, `ink-muted`, in the bottom left corner (Factory Diary, Blog or Leadership). Chapters carry `CH. NN` in `chapter` in the top right corner; blog and leadership carry the pillar's name in the same place.
Colours
### 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`.
**bg-000**
dark #0b1220 · light #f3efe6
The background of everything: reels, carousels, stories, covers. The site’s --night (night blue).
**bg-100**
dark #111a2e · light #e9e3d5
Cards, code boxes, caption and lower-third bars.
**bg-200**
dark #18233b · light #ddd6c6
Hover, progress bar track, picture-in-picture frame.
**ink**
dark #e6ecf5 · light #101828
Main text and captions burned into the video (the site’s --on-night).
**ink-muted**
dark #9aa8c0 · light #4a5468
Secondary text, timestamps, chapter number, signature.
**amber**
dark #f5b041 · light #9a6200
FACTORY PILLAR. The accent of everything Factory Diary: keyword, eyebrow, bar, CTA. The site’s --amber.
**amber-soft**
dark #fbd791 · light #7a4d00
Eyebrow and subtitles of the Factory pillar.
**violet**
dark #8b6cff · light #5a3ce6
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.
**violet-soft**
dark #c9b8ff · light #7c5cff
Eyebrow and subtitles of the Blog pillar.
**teal**
dark #2ec4b6 · light #0f7a70
LEADERSHIP PILLAR. The accent of posts on teams, culture, career. The site’s --teal.
**teal-soft**
dark #9ae8e0 · light #0a5c54
Eyebrow and subtitles of the Leadership pillar.
**danger**
dark #e5484d · light #b3262b
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.
**line**
dark #e6ecf5 12% · light #101828 12%
1px hairlines, card borders (the site’s --line-dark).
Type
### Type
display
Archivo
Titles, hooks, eyebrows. Weight 800 for hooks, 700 for inner titles. Uppercase for carousel hooks; sentence case for reel covers.
body
IBM Plex Sans
Slide text and captions burned into the video.
mono
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
**hook-xl** · display · 88px / 0.95 · 800 · -0.02em
Hook of carousel slide 1 (1080px). Uppercase, 3 lines at most.
The most expensive token is an AI waiting
**hook-lg** · display · 64px / 1.0 · 800 · -0.015em
Title of reel and story covers (1080×1920). Sentence case, up to 3 lines.
Nothing hits main without review
**title-md** · display · 44px / 1.1 · 700 · -0.01em
Title of an inner carousel slide.
FACTORY DIARY
**eyebrow** · display · 22px / 1.2 · 500 · 0.12em
Label above the title, uppercase, in the pillar’s soft accent.
One agent writes, another reviews, another tests. Nothing gets in without my approval.
**body-lg** · body · 34px / 1.35 · 400
Text of an inner slide. 45 words per slide at most.
I went to sleep and woke up to 10 tasks done
**caption-video** · body · 40px / 1.25 · 600
Caption burned into the video, upper centre of the frame, 2 lines at most, keyword in the pillar’s colour.
edugalbs.com · Factory Diary
**body-sm** · body · 24px / 1.4 · 400
Footer, final CTA, source of a quote.
+200
**stat-xl** · mono · 120px / 1.0 · 700
Big statistic (commits, tasks, hours). Always with the unit below in body-sm.
CH. 04
**chapter** · mono · 26px / 1.2 · 500 · 0.06em
Chapter number in the top right corner of covers and slides, ink-muted.
git merge --no-ff feature/night-shift
**code** · mono · 26px / 1.5 · 400
Code snippets and logs in slides, on bg-100.
Space, corners and light
### Spacing, radii and the only effect
#### Spacing
space-1 · 16pxGap between eyebrow and title.
space-2 · 32pxGap between title and body; inner padding of cards.
space-3 · 64pxGap between the blocks of a slide.
space-4 · 96pxSide margin of 1080×1080 and 1080×1350 slides.
space-5 · 160pxTop and bottom safe zone in 1080×1920 (the Instagram interface covers those strips).
#### Radii
radius-sm
8px
radius-md
20px
radius-lg
40px
radius-pill
999px
#### glow-accent
**One effect only**
`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
### 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` |
| LinkedIn | `1200 × 1200` or `1200 × 1500` | `space-4` | `space-3` | Same template as the carousel |
Templates
### 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.
Factory (amber), factory with the Broke marker, blog (violet) and leadership (green). [Open the template](https://www.edugalbs.com/ds/moldes/ReelCover.en.html)
#### 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.
Factory (amber) and leadership (green). [Open the template](https://www.edugalbs.com/ds/moldes/CarouselHook.en.html)
#### 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) and `danger` (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.
Text, code box and final slide with a CTA. [Open the template](https://www.edugalbs.com/ds/moldes/CarouselSlide.en.html)
#### 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`.
The night's report and a Broke story with a poll. [Open the template](https://www.edugalbs.com/ds/moldes/StoryCard.en.html)
#### 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.
Caption and name bar over the video, and the end screen. [Open the template](https://www.edugalbs.com/ds/moldes/LowerThird.en.html)
Voice
### 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.
Avoid
### 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-100` bar.
- 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
### Files
- [`tokens.json`](https://www.edugalbs.com/ds/tokens.json): colours (dark and light), type families and styles, spacing, radii and the glow, each with its use (descriptions in Portuguese).
- [`tokens.css`](https://www.edugalbs.com/ds/tokens.css): the same tokens as CSS variables, with the fonts, the accents per `data-pillar`, the `.broke-mark` and the `.t-