Brand & Design Without a Designer

You Don't Need a Designer. You Need a System.

The temptation is to hire a designer. Or spend three weeks learning Figma. Or endlessly tweak colors and fonts until your product looks "professional." None of that is the bottleneck.

The bottleneck is consistency. Pick a handful of rules and follow them everywhere. That's it. That's the design system.

RESTAURANT: You don't need a Michelin-starred plating consultant. You need white plates, consistent portions, and the same garnish on every dish. Nobody complains about a restaurant with clean, consistent presentation. They complain when every plate looks different.

The Rules

Colors: Pick 5-6, then stop.

You need: a background color, a primary text color, an accent color for buttons and links, a secondary accent for less important elements, and maybe a warning color. That's it. Define them as CSS variables and reference them everywhere.

--bg: #1A1612;
--cream: #F9F5F0;
--warm-brown: #A0694B;
--olive: #8B9556;
--gold: #D4AF37;
--dark-brown: #3D2B1F;

Fonts: Pick 1, maybe 2.

One font family for everything. Use weight variations (light, regular, semibold, bold) instead of different fonts. If you must use two, pair a display font for headings with a body font for text. Never use more than two.

Spacing: Use a scale.

Don't eyeball spacing. Pick a base unit (8px works well) and use multiples: 8, 16, 24, 32, 48, 64. Everything aligns to this grid. Padding, margins, gaps between elements — all multiples of 8.

DEF: CSS variables — Named values you define once and use everywhere. Instead of typing #A0694B fifty times, you type var(--warm-brown). Change the value once, it updates everywhere. This is how professionals maintain consistency.

Dark vs. Light

Pick one and commit. Dark themes look more premium but are harder to read for some people. Light themes are safer but feel more generic. Whatever you choose, be consistent — don't mix dark and light sections without a deliberate reason.

Generating Assets

AI image generation is usable for: placeholder images, hero backgrounds, character avatars, and social media graphics. It is not yet reliable for: logos, icons, or anything that needs to be pixel-perfect at small sizes.

For icons, use an icon library. Heroicons is excellent — clean, consistent, and available as inline SVGs so they scale perfectly and match your color system.

NOTE: The fastest way to make something look designed is: consistent spacing, consistent colors, and generous whitespace. Whitespace is free and it makes everything look more expensive.