BASEL.FM

Personal dispatches & reflections

Branding, Guidelines, and Design Systems: The Marketing Layer Most Builders Skip

You shipped something good. The code works, the idea is real, people can use it today.

Then you look at it across every place it actually lives, the landing page, the app itself, the GitHub README, the two slides you made for a demo, and they look like four different products built by four different people. Different greens. Different fonts. A logo that's sharp in one place and stretched in another.

The problem isn't your code. It's that there's no brand holding any of it together.


It Starts With a Logo, and an Identity

A logo isn't decoration. It's the one mark that has to show up everywhere and still read as you, so it carries more weight than any single screen in your app.

Underneath the logo sits a color palette, and the palette should come from the product, not from whatever looked nice that afternoon. A blood-donation platform, a CLI tool, and a kids' app should not share a mood. Pick colors that match the idea and its scope, then make sure the palette actually covers the situations you'll hit: a dark version and a light version of the logo, how it behaves on a colored background, what happens when it has to go monochrome. If the palette only works in one context, it isn't finished.

The point of all this is boring and important: one identity, reused everywhere. That repetition is the whole game.


Branding Guidelines: The Rulebook

Guidelines take that logo and put it in a controlled environment, so it stops getting corrupted the moment someone else touches it. A good set covers:

  • What the logo is and how it's built, so anyone using it understands the intent, not just the file.
  • Clear space and sizing, the margins and padding the logo needs to breathe, and the smallest size it's still allowed to appear at.
  • The colors, exact values, plus typography, which fonts, which weights, for headings versus body.
  • The full palette for both themes, light and dark, not one with the other bolted on later.
  • Logo variations and lockups, the mark on its own, the wordmark beside it, the wordmark stacked below it, so you're never improvising a layout under pressure.
  • Banners and mockups, the logo shown in context, on a site header, a social card, an app icon, so people can see how it's meant to live.
  • Do and don't, the part everyone skips and everyone needs: don't stretch it, don't recolor it, don't drop it on a busy photo, don't crowd it. These rules are what stop the brand from quietly falling apart.

Guidelines are how a brand survives contact with other people.


Design Systems: The Part That Ships

Branding is how your product looks from the outside. A design system is how it gets built on the inside, and it's where most of the actual consistency is won or lost.

It carries the brand, the logo, the colors, the type, and then it goes further and defines the interface itself: components and widgets, spacing, sizes, padding and margins, buttons and their states (hover, click, disabled), menus, headers, footers, icons, even which emojis are on-brand and which aren't, and the font sizes for each kind of section. Not vibes, actual values.

Done right, it's a contract the frontend follows. A new page isn't a fresh set of decisions, it's the same buttons, the same spacing, the same type scale as every other page. That's why a mature product feels calm to use: every screen was built from the same rules.


Why This Is Really Marketing

Here's the part that's easy to miss when you're heads-down building.

A brand isn't a logo, it's what people recognize before they read a word. When your landing page, your app, your banners, your GitHub pages, your campaigns, and your decks all pull from the same identity, every touchpoint reinforces the last one. Consistency reads as recognition, and recognition reads as trust.

The inverse is just as true. When each surface looks like a different product, people can't tell they're looking at the same thing twice, and a good product ends up feeling smaller and less serious than it actually is. Your brand is your first impression, repeated. A design system is how you make sure it's the same impression every time.


Hand It to Your AI

There's a newer reason to write all of this down: the thing building your interface might not be a person.

A design system is a spec, and a spec is exactly what an assistant like Claude needs to do good work. Hand it your colors, type scale, spacing, and component rules, a DESIGN.md it can read, and it builds on-brand instead of guessing. Without one, every request is a fresh negotiation and you spend your time correcting drift. With one, you describe what you want and the how is already settled. The results get noticeably better, and you get them faster.


Don't Have One Yet?

Most people don't, and that's fine. There are two honest paths.

You can build it yourself in a tool like Adobe Illustrator, draw the logo, define the palette, write the rules. It's real work and it's worth doing if you enjoy it.

Or you can generate it. Claude Design is one of the tools that's genuinely good at this, it can take a rough idea and produce a logo, a set of branding guidelines, and a design system, and it'll even design plug-and-play GitHub pages for you. Either way, the goal is the same: get to a written-down identity you can reuse, instead of re-deciding it every time.


Real Examples

This isn't theory for me. I've used Claude Design to design and prototype the identity for several of my own projects:

  • Open WebUI Exporter, the logo and the look for the repo.
  • DM Donation, a full brand identity for a live product, the one place where all of this comes together end to end.
  • Bareai CLI, logo plus a plug-and-play GitHub page, brand and docs in one pass.

Different projects, same approach: decide the identity once, then let it show up everywhere the same way.


Wrapping Up

A logo, a set of guidelines, and a design system aren't three chores you do after the product is done. They're the layer that makes the product look as good as it actually is, on every screen, in every README, on every slide. Build it once, write it down, and reuse it, whether you draw it by hand or generate it with a tool like Claude Design. Your future self, and anyone who touches your project after you, will build on rails instead of guesses.


Building something and not sure where to start on the brand? Feel free to reach out.

Next StepDM Donation: a full brand identity, built with Claude Design