Generate a Complete Brand Kit from Your Terminal: Logo, Colors, Style Guide

The Fiverr Logo and the Broken Promise

You paid someone forty dollars for a logo. It arrived three days later as a PNG attachment — 800 by 800 pixels, white background, no layers. It looked fine on your website header. Then you tried to put it on a business card. Blurry. You tried to put it on a dark background. White square. You tried to change the shade of blue to match your slide deck. You could not. The file was a flat image, like a photograph of a painting. You could look at it, but you could not touch the paint.

So you went back and paid for "the source files." You got an Adobe Illustrator file you could not open without a $23-a-month subscription. You also got a second PNG. Neither came with any documentation: no color codes, no font names, no spacing rules. Just two files and a "good luck."

Six months later, you had a website in one shade of blue, social media posts in another shade of blue, and a pitch deck in a third shade of blue. They were all supposed to be the same blue. None of them were.

This is not a design problem. This is a documentation problem. The logo was never the real deliverable. The real deliverable was a system — a set of rules that says "this is the exact blue, these are the fonts, this is how much space goes around the logo, and here is the logo in every format you will ever need." That system is called a style guide.

And you can build one from your terminal in about thirty minutes.

What You Are Actually Building

Let us be clear about the output. By the end of this article, you will have a folder containing:

1. SVG logo files — your main logo, a compact icon version, and a dark-background variant. SVG is a vector format. It scales to any size without blurring — billboard or favicon, same file.
2. A color palette — your primary color, secondary color, accent, and neutrals, each with the exact hex code and a note on when to use it.
3. Typography rules — which fonts to use, at what sizes, for headings versus body text.
4. A style guide document — a markdown file that ties everything together. This is the rulebook. Anyone who makes anything for your brand — a social post, a slide, a t-shirt — can open this file and know exactly what to do.

The whole thing lives in a git repository. That means every change is tracked. If you tweak the green six months from now, you can see what it used to be. Version control for your brand identity.

What You Need

Two things:

1. Claude Code — the AI CLI tool. Requires a Claude Pro subscription ($20/month). If you have never used it, the First Hour with Claude Code tutorial covers installation.
2. A terminal — the black window where you type commands. Mac users: search "Terminal" in Spotlight. Windows: open PowerShell.

You do not need Illustrator. You do not need Figma. You do not need to know what SVG stands for (Scalable Vector Graphics, but it does not matter). You need the ability to describe what you want in words.

Step 1: Set Up Your Brand Repo (3 minutes)

Open your terminal and create a project folder:

mkdir my-brand && cd my-brand
git init

git init turns this folder into a git repository. Think of it as turning on "track changes" for every file you create here.

Now start Claude Code:

claude

You are ready.

Step 2: Describe Your Brand (10 minutes)

This is the most important step. You are not asking for a logo. You are describing a personality. Think of your brand as a person standing in a room. What are they wearing? How do they talk? Are they loud or quiet? Playful or serious?

Here is an example prompt. Write your own — this one is for a fictional tea brand:

I am building a brand for an artisanal tea company called "Leaf & Stone."

Brand personality: calm, Japanese-influenced minimalism, a sense of quiet ritual.
Think warm neutrals, muted greens, lots of whitespace.
The feeling should be: a ceramic cup on a wooden table, morning light.

Please create the following in a folder called "brand":

1. brand/logo.svg — the main logo. The word "Leaf & Stone" in a clean
   serif font. A simple, abstract leaf mark to the left of the text.
   Keep it minimal. No gradients, no shadows.

2. brand/logo-icon.svg — just the leaf mark, no text.
   This is for favicons and small spaces.

3. brand/logo-dark.svg — the main logo but with light-colored text,
   suitable for dark backgrounds.

4. brand/colors.md — a color palette document with:
   - Primary color (a muted sage green)
   - Secondary color (a warm stone/beige)
   - Accent color (a terracotta or clay tone)
   - Dark neutral (for text)
   - Light neutral (for backgrounds)
   Each color should have: hex code, RGB values, and a one-line note
   on when to use it.

5. brand/typography.md — font recommendations with:
   - Heading font (a serif)
   - Body font (a clean sans-serif)
   - Sizes for h1, h2, h3, body, and small text
   - Line height and letter spacing recommendations

6. brand/style-guide.md — a master document that:
   - States the brand personality in 2-3 sentences
   - References the color palette and typography docs
   - Shows logo usage rules (minimum size, clear space around logo,
     what NOT to do)
   - Includes example do's and don'ts

Make all SVG files clean and hand-editable.
Use web-safe fonts or Google Fonts so anyone can use them.

Press Enter. Watch Claude Code work.

It will create the brand folder, generate three SVG files, and write three markdown documents. The whole process takes about a minute.

The key insight: the more specific your personality description, the more coherent the output. "Make me a logo" gets you clip art. "Calm, Japanese-influenced minimalism, a ceramic cup on a wooden table, morning light" gets you a design system that hangs together.

Step 3: Review the SVGs (5 minutes)

Ask Claude Code to let you see what it made:

Open brand/logo.svg in my browser.

Your browser shows the logo. It is an SVG — you can zoom in infinitely and it stays sharp. That is the whole point. This file works on a business card and on a billboard.

Now here is the part that matters: you can edit it with words.

The leaf mark is too detailed. Simplify it to 3-4 strokes maximum.
Make the font weight slightly lighter.
Move the leaf mark closer to the text — reduce the gap by about 30%.

Claude Code edits the SVG directly. Refresh your browser. New version.

This loop is the same one a designer goes through in Illustrator — sketch, review, revise. The difference is you are directing with language instead of dragging anchor points. And every revision is a file change that git can track.

Once you are happy with the main logo, check the icon and dark versions:

Open brand/logo-icon.svg and brand/logo-dark.svg in my browser too.
Make sure the icon version works at 32x32 pixels — simplify if needed.

Step 4: Review the Color Palette (5 minutes)

Open the color document:

Show me the contents of brand/colors.md.

You will see something like:

```markdown
# Leaf & Stone — Color Palette

## Primary: Sage Green
- Hex: #7A8B6F
- RGB: 122, 139, 111
- Use: Main brand color. Buttons, headings, logo fill.

## Secondary: Warm Stone
- Hex: #C4B5A0
- RGB: 196, 181, 160
- Use: Backgrounds, cards, secondary elements.

## Accent: Terracotta
- Hex: #B86F4A
- RGB: 184, 111, 74
- Use: Calls to action, highlights, sparingly.

## Dark Neutral: Charcoal
- Hex: #2D2D2D
- RGB: 45, 45, 45
- Use: Body text, dark backgrounds.

## Light Neutral: Warm White
- Hex: #F5F2ED
- RGB: 245, 242, 237
- Use: Page backgrounds, whitespace.
```

Those hex codes are the truth. From now on, every time you make a slide, pick a social media template, or hand something to a developer, you point at this file. "#7A8B6F" is your green. Not "sort of sage-ish." Not "like that green we used on the website." A six-character code that produces the exact same color on every screen in the world.

If a color does not feel right, adjust it:

The sage green feels too gray. Make it slightly more saturated
and a touch warmer. Update the hex in colors.md and also update
all three SVG logos to use the new color.

One prompt. Every file updates. Every file stays consistent. That is the power of having everything in one repo, managed by one tool.

Step 5: Review Typography and Style Guide (5 minutes)

Check the typography rules:

Show me brand/typography.md.

Make sure the font choices feel right for your brand. If you want to swap fonts:

Change the heading font to Playfair Display and the body font to
Source Sans 3. Update typography.md with the new recommendations.

Now the style guide — the master document:

Show me brand/style-guide.md.

This is the file you will share with anyone who creates anything for your brand. It should contain the brand personality statement, references to the color and typography documents, logo usage rules (minimum size, clear space, what not to do), and example do's and don'ts.

If anything reads wrong, say so:

The brand personality section is too generic. Rewrite it to emphasize
the "quiet ritual" aspect. Mention that the brand should never feel
rushed, loud, or cluttered.

Step 6: Commit to Git (2 minutes)

Your brand kit is done. Lock it into version control.

Exit Claude Code (/exit or Ctrl+C) and run:

git add -A
git commit -m "Initial brand kit: logos, colors, typography, style guide"

That snapshot is permanent. You can change anything you want from here, and you can always come back to this exact version. Six months from now, when you tweak the accent color for a holiday campaign, you can see what the original was.

This is something no Fiverr deliverable gives you: a history of every decision.

Going Further

A brand kit in a git repo is a foundation. Here is what you can build on it:

• Social media templates: Tell Claude Code to create SVG templates for Instagram posts and stories that use your brand colors and fonts. Generate ten variations. Pick the ones you like.
• Slide deck theme: Describe a presentation template that follows your style guide. Claude Code can generate HTML slides (using tools like reveal.js) that match your brand exactly.
• Website integration: When you build your landing page, hand Claude Code your style guide and say "follow these brand rules." The colors, fonts, and spacing will match everything else.
• Brand refresh: Want to evolve the look next year? Create a git branch, make changes, compare the before and after. If you hate it, switch back. One command.

What You Built

You built a brand system, not just a logo. The system has five parts:

1. Vector logos — scalable to any size, editable with text commands
2. Color palette — exact codes, not vibes
3. Typography rules — consistent text treatment everywhere
4. Style guide — the rulebook that ties it all together
5. Version history — every change tracked, every decision reversible

The logo is the part people notice. The style guide is the part that makes everything else work. Without it, you drift. With it, every slide, every social post, every business card looks like it came from the same place — because it did. It came from a documented system that you own, you control, and you can change with a sentence.

No designer retainer. No Illustrator subscription. No "can you send me the hex code for that blue?"

Open the style guide. The hex code is right there.