Brand Designer

Brand Designer Skill

I help you create cohesive brand identities, logos, and visual brand systems.

What I Do

Brand Identity:

• Logo design and variations
• Color palettes
• Typography systems
• Brand guidelines

Visual Assets:

• Business cards, letterheads
• Social media templates
• Marketing materials
• Brand presentation decks

Brand Strategy:

• Brand positioning
• Target audience definition
• Competitor analysis
• Brand voice and tone

Logo Design Process

Step 1: Brand Discovery

Questions to Answer:

• What does the company do?
• Who is the target audience?
• What are the brand values?
• What feeling should the logo evoke?
• Any colors/symbols to avoid?

Example Brief:

## Brand Brief: TechStart

**Industry:** SaaS, developer tools
**Target Audience:** Software developers, 25-40 years old
**Brand Values:** Innovation, simplicity, reliability
**Personality:** Modern, technical, approachable
**Competitors:** GitHub, GitLab, Vercel

**Logo Requirements:**

- Works in monochrome
- Scales from 16px (favicon) to billboard
- Modern, not trendy (should age well)
- Unique, memorable

---

Step 2: Logo Concepts

Concept 1: Wordmark

Clean, modern typography
Focus on the company name
Example: Google, Facebook, Netflix

Concept 2: Lettermark

Initials in a distinctive way
Good for long company names
Example: IBM, HBO, CNN

Concept 3: Icon + Wordmark

Symbol + company name
Most versatile option
Example: Nike, Apple, Twitter

Example SVG Logo (React Component):

// components/brand/Logo.tsx

interface LogoProps {
  variant?: 'full' | 'icon' | 'wordmark'
  color?: 'primary' | 'white' | 'black'
  size?: number
}

export function Logo({ variant = 'full', color = 'primary', size = 40 }: LogoProps) {
  const colors = {
    primary: '#0066CC',
    white: '#FFFFFF',
    black: '#000000'
  }

  const fillColor = colors[color]

  if (variant === 'icon') {
    return (
      <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
        <circle cx="20" cy="20" r="18" fill={fillColor} />
        <path
          d="M15 20 L25 15 L25 25 Z"
          fill="white"
        />
      </svg>
    )
  }

  if (variant === 'wordmark') {
    return (
      <svg width={size * 4} height={size} viewBox="0 0 160 40" fill="none">
        <text
          x="0"
          y="30"
          fontFamily="Inter, sans-serif"
          fontSize="24"
          fontWeight="700"
          fill={fillColor}
        >
          TechStart
        </text>
      </svg>
    )
  }

  // Full logo (icon + wordmark)
  return (
    <svg width={size * 5} height={size} viewBox="0 0 200 40" fill="none">
      <circle cx="20" cy="20" r="18" fill={fillColor} />
      <path d="M15 20 L25 15 L25 25 Z" fill="white" />
      <text
        x="50"
        y="30"
        fontFamily="Inter, sans-serif"
        fontSize="24"
        fontWeight="700"
        fill={fillColor}
      >
        TechStart
      </text>
    </svg>
  )
}

Usage:

// Different logo variations
<Logo variant="full" />
<Logo variant="icon" size={32} />
<Logo variant="wordmark" color="white" />

---

Color Palette

Primary Brand Colors

// config/brand-colors.ts

export const brandColors = {
  // Primary (main brand color)
  primary: {
    50: '#E6F0FF',
    100: '#CCE0FF',
    200: '#99C2FF',
    300: '#66A3FF',
    400: '#3385FF',
    500: '#0066CC', // Main brand color
    600: '#0052A3',
    700: '#003D7A',
    800: '#002952',
    900: '#001429'
  },

  // Secondary (accent color)
  secondary: {
    50: '#FFF4E6',
    100: '#FFE9CC',
    200: '#FFD399',
    300: '#FFBD66',
    400: '#FFA733',
    500: '#FF9100', // Main accent
    600: '#CC7400',
    700: '#995700',
    800: '#663A00',
    900: '#331D00'
  },

  // Neutral (grays)
  neutral: {
    50: '#F9FAFB',
    100: '#F3F4F6',
    200: '#E5E7EB',
    300: '#D1D5DB',
    400: '#9CA3AF',
    500: '#6B7280',
    600: '#4B5563',
    700: '#374151',
    800: '#1F2937',
    900: '#111827'
  },

  // Semantic colors
  success: '#10B981',
  warning: '#F59E0B',
  error: '#EF4444',
  info: '#3B82F6'
}

Color Usage Guidelines

// Tailwind config
module.exports = {
  theme: {
    colors: {
      primary: brandColors.primary,
      secondary: brandColors.secondary,
      gray: brandColors.neutral,
      green: brandColors.success
      // ...
    }
  }
}

Color Palette Documentation:

## Brand Colors

### Primary Blue (#0066CC)

- **Use for:** Primary buttons, links, active states, brand elements
- **Don't use for:** Backgrounds, large areas
- **Accessibility:** Passes WCAG AA for text on white

### Secondary Orange (#FF9100)

- **Use for:** CTAs, highlights, important actions
- **Don't use for:** Body text
- **Pairing:** Works best with primary blue

### Neutral Grays

- **Use for:** Text, borders, backgrounds, UI elements
- **Hierarchy:**
  - 900: Headings
  - 700: Body text
  - 500: Secondary text
  - 300: Borders
  - 100: Backgrounds

---

Typography System

Font Selection

/* Google Fonts import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  /* Font families */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Font sizes */
  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.875rem; /* 14px */
  --text-base: 1rem; /* 16px */
  --text-lg: 1.125rem; /* 18px */
  --text-xl: 1.25rem; /* 20px */
  --text-2xl: 1.5rem; /* 24px */
  --text-3xl: 1.875rem; /* 30px */
  --text-4xl: 2.25rem; /* 36px */
  --text-5xl: 3rem; /* 48px */

  /* Font weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Line heights */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;
}

Typography Scale:

// components/Typography.tsx

export function Heading1({ children }: { children: React.ReactNode }) {
  return (
    <h1 className="text-4xl font-bold leading-tight text-gray-900">
      {children}
    </h1>
  )
}

export function Heading2({ children }: { children: React.ReactNode }) {
  return (
    <h2 className="text-3xl font-semibold leading-tight text-gray-900">
      {children}
    </h2>
  )
}

export function BodyText({ children }: { children: React.ReactNode }) {
  return (
    <p className="text-base font-normal leading-normal text-gray-700">
      {children}
    </p>
  )
}

export function Caption({ children }: { children: React.ReactNode }) {
  return (
    <p className="text-sm font-normal leading-normal text-gray-500">
      {children}
    </p>
  )
}

---

Brand Guidelines Document

Creating brand-guidelines.md

# TechStart Brand Guidelines

## Logo Usage

### Logo Variations

- **Full Logo**: Use on marketing materials, website header
- **Icon Only**: Use for app icon, favicon, social media avatars
- **Wordmark**: Use when icon doesn't fit context

### Clear Space

Maintain clear space around logo equal to height of the "T" in TechStart

### Minimum Size

- **Digital**: 120px width (full logo), 40px (icon)
- **Print**: 1 inch width (full logo), 0.25 inch (icon)

### Don'ts

❌ Don't rotate the logo
❌ Don't change colors (except approved variations)
❌ Don't add effects (shadows, gradients, etc.)
❌ Don't distort or stretch

---

## Color Palette

### Primary Colors

- **Brand Blue**: #0066CC
  - RGB: 0, 102, 204
  - CMYK: 100, 50, 0, 20
- **Accent Orange**: #FF9100
  - RGB: 255, 145, 0
  - CMYK: 0, 43, 100, 0

### Usage

- Primary buttons, links: Brand Blue
- CTAs, highlights: Accent Orange
- Backgrounds: Neutral grays

---

## Typography

### Fonts

- **Headings**: Inter Bold (700)
- **Body**: Inter Regular (400)
- **Code**: JetBrains Mono Regular (400)

### Hierarchy

- H1: 48px / Bold / Tight leading
- H2: 36px / Semibold / Tight leading
- Body: 16px / Regular / Normal leading
- Caption: 14px / Regular / Normal leading

---

## Voice & Tone

### Brand Personality

- **Professional** but not corporate
- **Technical** but approachable
- **Innovative** but reliable

### Writing Style

- Use active voice
- Be concise and clear
- Avoid jargon (unless technical docs)
- Use "we" and "you" (not "I" or "one")

### Examples

✅ "Deploy your app in seconds"
❌ "Applications can be deployed quickly"

✅ "We built this for developers like you"
❌ "This product was designed for developer users"

---

Social Media Templates

Profile Image (SVG Template)

// templates/SocialProfileImage.tsx

export function SocialProfileImage() {
  return (
    <svg width="400" height="400" viewBox="0 0 400 400">
      {/* Background */}
      <rect width="400" height="400" fill="#0066CC" />

      {/* Logo (centered) */}
      <circle cx="200" cy="200" r="120" fill="white" />
      <path
        d="M160 200 L240 160 L240 240 Z"
        fill="#0066CC"
      />
    </svg>
  )
}

Social Media Post Template

// templates/SocialPost.tsx

interface SocialPostProps {
  title: string
  description: string
  imageUrl?: string
}

export function SocialPost({ title, description, imageUrl }: SocialPostProps) {
  return (
    <svg width="1200" height="630" viewBox="0 0 1200 630">
      {/* Background gradient */}
      <defs>
        <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor="#0066CC" />
          <stop offset="100%" stopColor="#003D7A" />
        </linearGradient>
      </defs>
      <rect width="1200" height="630" fill="url(#bg)" />

      {/* Content */}
      <text
        x="60"
        y="200"
        fontSize="60"
        fontWeight="700"
        fill="white"
        fontFamily="Inter"
      >
        {title}
      </text>
      <text
        x="60"
        y="270"
        fontSize="32"
        fill="#CCE0FF"
        fontFamily="Inter"
      >
        {description}
      </text>

      {/* Logo */}
      <Logo variant="icon" size={60} color="white" />
    </svg>
  )
}

---

Business Card Design

// templates/BusinessCard.tsx

interface BusinessCardProps {
  name: string
  title: string
  email: string
  phone: string
}

export function BusinessCard({ name, title, email, phone }: BusinessCardProps) {
  return (
    <svg width="350" height="200" viewBox="0 0 350 200">
      {/* Front side */}
      <rect width="350" height="200" fill="white" />

      {/* Logo */}
      <Logo variant="full" size={30} />

      {/* Contact info */}
      <text x="20" y="120" fontSize="20" fontWeight="700" fill="#111827">
        {name}
      </text>
      <text x="20" y="145" fontSize="14" fill="#6B7280">
        {title}
      </text>
      <text x="20" y="170" fontSize="12" fill="#6B7280">
        {email}
      </text>
      <text x="20" y="185" fontSize="12" fill="#6B7280">
        {phone}
      </text>
    </svg>
  )
}

---

Brand Asset Management

File Organization

brand-assets/
├── logo/
│   ├── svg/
│   │   ├── logo-full.svg
│   │   ├── logo-icon.svg
│   │   └── logo-wordmark.svg
│   ├── png/
│   │   ├── logo-full@1x.png
│   │   ├── logo-full@2x.png
│   │   └── logo-full@3x.png
│   └── favicon/
│       ├── favicon-16x16.png
│       ├── favicon-32x32.png
│       └── favicon.ico
├── colors/
│   └── palette.json
├── fonts/
│   ├── Inter-Regular.woff2
│   ├── Inter-Bold.woff2
│   └── JetBrainsMono-Regular.woff2
├── templates/
│   ├── social-profile.svg
│   ├── social-post.svg
│   └── business-card.svg
└── guidelines/
    └── brand-guidelines.pdf

---

Favicon Generation

// scripts/generate-favicons.ts

import sharp from 'sharp'
import fs from 'fs'

async function generateFavicons() {
  const sizes = [16, 32, 48, 64, 128, 256]

  for (const size of sizes) {
    await sharp('logo-icon.svg')
      .resize(size, size)
      .png()
      .toFile(`public/favicon-${size}x${size}.png`)

    console.log(`Generated ${size}x${size} favicon`)
  }

  console.log('Favicons generated!')
}

generateFavicons()

Favicon HTML:

<!-- In layout/head -->
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />

---

When to Use Me

Perfect for:

• Creating new brand identities
• Designing logos and visual systems
• Building brand guidelines
• Creating marketing templates
• Ensuring brand consistency

I'll help you:

• Design memorable logos
• Create cohesive color palettes
• Build typography systems
• Generate brand assets
• Document brand guidelines

What I'll Create

🎨 Logo Designs (SVG)
🌈 Color Palettes
📝 Typography Systems
📄 Brand Guidelines
🖼️ Social Media Templates
💼 Business Cards

Let's build a strong, cohesive brand identity!

Brand Designer Skill

Expert in brand identity, logo design, and visual brand systems.

Quick Start

# Activate skill
claude-code --skill brand-designer

What This Skill Does

• 🎨 Designs logos (SVG, responsive, accessible)
• 🌈 Creates brand color palettes
• 📝 Builds typography systems
• 📄 Generates brand guidelines
• 🖼️ Creates social media templates
• 💼 Designs business cards and marketing materials

Common Tasks

Design Logo

"Design a modern logo for a SaaS company targeting developers"

Create Brand Colors

"Create a professional color palette with primary, secondary, and neutral colors"

Build Typography System

"Set up a typography scale using Inter font with proper hierarchy"

Generate Brand Guidelines

"Create brand guidelines document with logo usage, colors, and voice"

Technologies

• SVG - Scalable vector graphics
• React - Component-based logos
• Tailwind - Design system
• Sharp - Image processing
• Figma - Design handoff

Example Output

// Responsive logo component
<Logo variant="full" size={40} color="primary" />
<Logo variant="icon" size={24} color="white" />
<Logo variant="wordmark" color="black" />

Related Skills

• ui-designer - Interface design
• design-system-builder - Component libraries
• visual-designer - Visual assets

Learn More

See SKILL.md for comprehensive brand design patterns.