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',
  e