My Clients Needed a Design System Before They Needed a Website.

In Part 7 I built a design system for a company of one in an evening and thought of it as groundwork for a website. It turned out to matter more for something smaller: the first branded email I sent. I now do brand work with clients before there's any web page to put it on, and this is why.

The email comes first, so the brand has to

Once a client's domain and mailbox exist, the next build is usually a templated email: a reminder, a status update, a welcome note. The moment you template an email, you've made brand decisions. Which logo goes in the header. What color the button is. What typeface the customer sees. If nobody decided, the template decides, and it decides badly.

Every template is a brand decision. Make it once, on purpose, before you make it forty times by accident.

What I learned from my own first client email

The first invite email I sent from the portal had a logo that looked fine on my screen and fell apart in the inbox. The emblem's rings are six units thick on a mark more than a thousand units wide. At email size that's a third of a pixel, so they rendered as broken grey dots, and the word CONSULTING came out about two pixels tall.

The fix was a second version of the logo for anything under about 120 pixels: rings five times heavier, the wordmark beside the emblem instead of under it. It's a saved component now, with a note explaining why. Every client I've worked with since has needed the same thing, or a simpler mark altogether.

What I set up for a client, and how small it is

• A logo that survives small sizes. Tested at 200 pixels, on white and on black, before anything else.
• A short palette with named roles. Background, text, accent, button. Two or three colors, each checked for contrast. The names outlive the hex codes.
• Type that email can actually render. Most mail clients ignore custom fonts, so the system names the web font and the safe fallback, and the template is checked in both.
• Light emails, even for a dark brand. Clarent's site is dark navy. Its emails are light, because dark HTML email renders unpredictably across mail clients.
• One source of truth. A Figma file the client owns, or a design system Claude can read, so every later template, document and page pulls from the same place.

Why not wait for the website?

• The website may never be the priority. For many of my clients, email and documents are the whole customer experience.
• The website goes faster afterward. Colors, type and logos are decided and tested. The site becomes assembly, not invention.
• AI drifts without it. Ask for a branded email with no system to read and you get a slightly different brand every time. Give it the system and it follows it.

What I'd tell a small business owner

• Decide a few things now: logo, two or three colors, one font and its fallback.
• Test your logo at 200 pixels, on white and on black. That's where most people will see it.
• Keep it in one place you own, not in a former designer's account.
• Brand the email before the homepage if email is where your customers actually meet you.

Questions I get about this

Isn't a design system overkill for a five-person business? The word is bigger than the thing. Mine is a logo in three versions, a handful of colors, one typeface and a few spacing rules. It fits on a page. The overkill version has 200 components nobody uses.

Can AI design my logo? It gets you a strong draft fast; mine started that way. What it won't do on its own is notice the logo turning into a smudge at signature size, or reading as something you didn't intend when small. That part takes looking at it, at real sizes, before you commit.

Do I need Figma? No. You need one place where the decisions live and everyone, including the AI, can read them. Figma is what I use because it exports straight to code and to email.

If your business sends email that doesn't look like your business, ask me where I'd start. And if you're a designer who thinks email should never come before the site, I'd like the argument.