📘 The brand guide, now digital
New here? One brand folder
(in English, brand_assets — “brand assets”) is just
a directory (a folder inside the project on your computer) where
the files that define the visual identity are stored together: the logo and its variations, official
colors, selected fonts, and sometimes even examples of how the brand “speaks.” Think of an old print shop:
every serious company had a visual identity manual, a thick booklet with the logo in vector format,
the palette with exact ink codes, and rules for use — so nobody would invent a different shade of green for a
flyer. The brand folder is that same booklet, just as files, and always at your agent’s fingertips.
The difference that matters here: the physical manual stayed in a drawer, and someone had to go get it, leaf through it, and copy things by hand. The brand folder stays inside the project — the same place where Claude Code is already working. When you ask, "create a new contact page," the agent can simply open this folder and read, without having to explain again and again, “use blue #0d9488, the font is Inter, the logo is located at such and such a place.”
💡 Main Concept
Brand folder = raw, permanent visual identity materials stored in the project, ready for any agent to consult without relying on your memory.
- •Without it, you have to explain the brand again in every new conversation—and sometimes you forget a detail.
- •With it: the agent reads the files and already knows. Your only job is to review the result.
🌐 One central source, multiple connected front ends
New here? Front end it’s the part of a website or app that appears on screen—what visitors see and click. If you build several pages over time (a landing page, an internal dashboard, a digital menu), each is a different front end, but they should all look like the same brand. Without a single source of truth, each front end ends up pulling the color one way and the logo another, and the result is a "family" that doesn't look like it belongs together.
The brand folder solves this by becoming the single source of truth: every time an agent is about to build a new front end, it checks this same folder before writing any CSS. The diagram below shows this relationship — one central folder, with several projects drawing from it.
Caption: the folder stays in the center, permanent. Each new front end draws from it instead of reinventing the identity — the visual result stays consistent across different projects, not just within one.
🔍 Inside
- Consistency: the exact same color, the same logo, on every page you build — without relying on you to remember the hex code by heart.
- Avoiding rework: The agent doesn’t waste time “guessing” the brand from an old screenshot; it reads the right file.
🗃️ The file structure, inside
There is no single, mandatory folder naming rule—the organization matters, not the exact name. But a simple, tested structure that helps the agent understand things right away is this folder tree. Each subfolder handles ONE type of asset, and a text file (Markdown or JSON) documents decisions you can’t “see” just by looking at the file—such as the exact hex code for each color.
meu-projeto/ ├── brand_assets/ │ ├── logo/ │ │ ├── logo-cor.svg # versão colorida, uso padrão │ │ ├── logo-branco.svg # pra fundos escuros/fotos │ │ ├── logo-preto.svg # pra fundos muito claros │ │ └── icone.svg # só o símbolo, sem o nome │ ├── fontes/ │ │ ├── Inter-Regular.woff2 │ │ └── Inter-Bold.woff2 │ ├── cores.md # paleta com códigos hex + quando usar cada uma │ ├── tipografia.md # qual fonte, quais tamanhos, quais pesos │ └── tom-de-voz.md # exemplos de frases "no estilo da marca" └── index.html, src/, etc. (o resto do projeto)
New here? Hex is the six-character code that represents an exact color (like #0d9488)—without it, “teal” could turn into five different shades depending on who’s looking. The file
cores.md exists specifically to lock in that
number once and for all. The same goes for typography — the set
of decisions about which font to use, and at what size and weight (light, regular, bold) in each situation.
✓ Well-written cores.md
- ✓Name + hex + when to use it: “Primary teal #0d9488 — buttons and prominent links”
- ✓Includes the light and dark variations, already calculated and ready to copy
- ✓Says what NOT to use (e.g., "never use amber text on a light background")
✗ Poorly written cores.md
- ✗Only the vague name: “brand blue”—no code, so each project uses a different blue
- ✗The right color exists only in an old screenshot, never written down in text
- ✗No usage context—the agent doesn’t know whether it’s a background color or text color
🛠️ Creating the folder with the agent
You don’t have to build this structure by hand. You can ask the agent itself to create the folder and document the decisions
based on a logo you already have (or a visual reference, as in module
5.5). The goal here: to leave this topic with a brand_assets/
for real in your project, not just the theory.
Bring together what you already have
A logo file (even if it’s only a PNG), a color reference from another site of yours, or even a screenshot of the brand’s Instagram. It doesn’t need to be perfect—the agent can help organize things based on it.
Request the creation using the prompt below
The agent creates the folders, extracts the colors from the logo (or uses the ones you provide), and writes the cores.md with the right hex codes.
Check before continuing
Open brand_assets/cores.md and confirm that the hex codes actually match your brand — if the agent "guessed" a color because it lacked a reference, correct it right there.
Create the folder brand_assets/ complete, with the logo organized, the palette documented with hex codes, and the font defined — based on a logo/reference you already have in the project.
Cria uma pasta brand_assets/ na raiz deste projeto pra guardar nossa identidade visual. Meu logo original está em <caminho/do/logo-original.png>. Faça o seguinte: 1. Crie brand_assets/logo/ e salve dentro: uma versão colorida (logo-cor), uma em branco pra fundo escuro (logo-branco) e o ícone isolado (icone). 2. Extraia as 2-3 cores principais do logo, documente em brand_assets/cores.md com nome + código hex + para que serve cada uma (ex.: "cor de destaque: botões e links"). 3. Em brand_assets/tipografia.md, registre a fonte <nome da fonte que você usa> com os tamanhos padrão de título e texto. 4. Não invente nada que não vier do logo/referência — se faltar informação, me pergunte em vez de chutar.
✅ How to verify
After it runs, open the folder brand_assets/ in the file explorer: all 4 logo files must actually exist (and not be empty), and cores.md should have real hex codes (starting with #), not vague descriptions like “light blue.”
🔗 Design skill + brand folder, together
It’s worth connecting this to what you’ve already seen in the learning path. In module 5.2, you created a skill for global design—a set of fixed instructions that teaches the agent how build an interface (the process: which components to use, how to structure the CSS). In 5.5, you gave a specific visual reference for a particular rebranding. The brand folder is different from the other two: it is the raw and permanent material — the "what," not the "how."
Together, the three things complement each other: the skill knows the process, the brand folder stores the fixed identity details, and a specific reference (5.5) handles a particular case when needed. When you ask, “build a new page following our design skill,” ideally that skill already knows look
to brand_assets/ before deciding on colors and fonts
—instead of reinventing them with each request.
💡 Main Concept
- •Design skill (5.2): the process — how to build.
- •Brand folder (5.6): the data — what to use (color, font, logo).
- •Visual reference (5.5): a one-off adjustment—when a specific case calls for something different from the standard.
💡 Practical Tip
In your design skill (from 5.2), add a simple line: "before deciding on colors/fonts, read brand_assets/cores.md e tipografia.md if they exist." That connects the two pieces without having to rewrite anything each time.
⚠️ Keeping it up to date: the most common mistake
A brand folder is only as good as what it contains current. The most common mistake isn't creating it wrong —
it's creating it once, forgetting about it, and letting the real brand evolve without updating the files. Six months later,
you changed the main color on a new site but cores.md
still has the old color, and the next project gets the wrong color—because the agent trusted the file, not
you to remember to mention it.
✓ Healthy practice
- ✓Every brand change (new color, new logo) updates
brand_assets/on the same day - ✓One place stores the assets — all projects point to it (or copy from it)
- ✓Asks the agent to "check whether brand_assets matches the live site" from time to time
✗ Common pitfall
- ✗Folder created once and never touched again — it becomes an outdated snapshot of the brand
- ✗Brand assets scattered around: one logo in Google Drive, another in an email, another only in someone’s memory
- ✗Each new project rediscovers the brand from scratch, eyeballing the previous site
Checklist before considering your brand folder ready:
cores.md with real hex codes and "when to use each one"📝 Exercise
If you already have a logo or a published site (even a personal one), create the folder now brand_assets/ in it using the prompt from topic 4. If you haven't defined any branding yet, choose a color and a font you'd like to use going forward, and document them the same way — it's easier to stay consistent from the start than to fix things later.
Quick check (optional): What is the main role of the brand folder compared with the design skill in module 5.2?