Brand Identity & Visual Design

A brand is not a logo. It’s the gut feeling people have about your product. This skill helps you make the decisions that define your brand — then hand them to Claude Code to implement everywhere.

Core Principles

• Consistency is more important than creativity. A mediocre system applied consistently beats brilliant one-offs.
• Visual design should make the product feel inevitable — like it couldn’t look any other way.
• Every SaaS product should feel: trustworthy, modern, and clear. Your differentiator comes on top of these.
• Design for recognition at every scale: favicon, app icon, social preview, full-screen dashboard.

What You Decide vs. What AI Implements

Rule: Make the creative decisions. Let AI handle the math, code, and consistency.

Color System

You need three things:

1. Primary Color (You Pick This)

Your brand’s signature. Used for buttons, links, and key accents.

How to choose:

• What emotion should your product evoke? (Blue = trust, Green = growth, Purple = premium, Orange = energy)
• Look at competitors — pick something that stands out from them
• Test it: does it look good as a button on a white background?

Tell AI:

My brand's primary color is [your hex code or color name].
Generate a full color system:
- Primary scale (50-900 tints)
- Neutral scale (warm/cool gray, 50-900)
- Semantic colors (success green, warning amber, error red, info blue)
- Surface colors (background, card, elevated, overlay)
Apply this as CSS custom properties and/or Tailwind config.

2. Neutral Scale (AI Generates This)

9-11 shades from near-white to near-black. This does 80% of the work in your UI (text, backgrounds, borders). AI generates this from your warm/cool preference.

3. Semantic Colors (AI Generates This)

Success (green), Warning (amber), Error (red), Info (blue). AI picks these to not clash with your primary color.

Typography

Two decisions to make:

1. Heading font: Pick one with personality but legibility. Good defaults for SaaS: Inter, Plus Jakarta Sans, Outfit, Geist.
2. Body font: Prioritize readability at 14-16px. Often the same as headings.

Tell AI:

My heading font is [font name] and body font is [font name].
Set up a typography system:
- Scale: 0.75rem to 3rem
- Weights: Regular (400) for body, Medium (500) for emphasis, Semibold (600) for headings
- Line heights optimized for readability
- Apply across all headings, body text, and UI elements.

Skip for now: Monospace font selection. Only matters if your product shows code or data tables — Claude Code will pick a sensible default.

Logo

Most solo founders should NOT design their own logo. Instead:

Minimum viable logo:

1. Choose a clean sans-serif font
2. Type your product name
3. Pick your primary brand color

Tell AI:

Create a simple text-based logo for [product name]:
- Font: [your heading font] in Semibold
- Color: [your primary color]
- Create versions: full wordmark, icon-only (first letter or abbreviation), favicon (16x16)
- Export as SVG for web

Requirements for any logo:

• Works at 16×16 (favicon), 32×32, and full size
• Horizontal lockup (icon + wordmark) for headers
• Icon-only version for compact spaces
• Works on light and dark backgrounds
• SVG format for web (not PNG)

When to invest in a real logo: After you’ve validated your product and have paying customers. Budget $200-500 for a freelance designer on Fiverr or 99designs. Don’t spend $5,000 pre-launch.

Icons

One decision: pick an icon library and stick with it.

Tell AI:

Use [Lucide/Heroicons/Phosphor] icons throughout the app.
Never mix icon libraries. Keep icons at consistent sizes (16px inline, 20px buttons, 24px navigation).

Brand Voice Attributes

Define 3-4 positions on these spectrums. These feed into copywriting and UI text decisions:

• Casual ←————→ Formal
• Playful ←————→ Serious
• Technical ←————→ Approachable
• Bold ←————→ Understated

Example: A project management tool for freelancers might be: Casual, Slightly Playful, Approachable, Bold.

Tell AI:

Our brand voice is [casual/formal], [playful/serious], [approachable/technical], and [bold/understated].
Apply this tone to all UI copy, error messages, and empty states.

Social Preview / OG Image

Every page needs an Open Graph image for social sharing.

• Size: 1200x630px
• Template: Brand color background + page title in heading font + product logo in corner

Tell AI:

Create a reusable OG image template:
- Background: our primary color (or gradient)
- Title text: white, our heading font, centered
- Logo: small, bottom-right corner
- Generate dynamically for blog posts using page title.

Dark Mode (Decide Later)

For your MVP, ship light mode only. Dark mode is a nice-to-have that doubles your design surface area.

When to add dark mode:

• Users are requesting it
• Your product is used for long sessions (dashboards, writing tools, dev tools)
• You’re past MVP and have bandwidth

When you’re ready, Tell AI:

Add dark mode support:
- Background: dark gray (#111), not pure black
- Cards: slightly lighter than background (#1a1a1a)
- Text: off-white (#e5e5e5 body, #fafafa headings), not pure white
- Adjust primary color if needed for contrast
- Use CSS custom properties so themes switch cleanly
- Add a toggle in the header/settings

Common Mistakes

Output Format

When creating or reviewing brand identity:

1. Decisions: What primary color, fonts, icon library, and voice attributes were chosen
2. System: Color scale, type scale, and spacing as CSS properties or Tailwind config
3. Application: Show how system applies across 2-3 contexts (button, card, page header)
4. Assets: Logo versions, OG image template, favicon