brand-designer

What this skill does

# 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:**

```markdown
## 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):**

```typescript
// 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:**

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

---

## Color Palette

### Primary Brand Colors

```typescript
// 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

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

**Color Palette Documentation:**

```markdown
## 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

```css
/* 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:**

```typescript
// 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

```markdown
# 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