Logo Designer

Design modern, professional logos by analyzing project context and generating SVG-based brand assets.

Repo Sync Before Edits (mandatory)

Before creating/updating/deleting files in an existing repository, sync the current branch with remote:

branch="$(git rev-parse --abbrev-ref HEAD)"
git fetch origin
git pull --rebase origin "$branch"

If the working tree is not clean, stash first, sync, then restore:

git stash push -u -m "pre-sync"
branch="$(git rev-parse --abbrev-ref HEAD)"
git fetch origin && git pull --rebase origin "$branch"
git stash pop

If origin is missing, pull is unavailable, or rebase/stash conflicts occur, stop and ask the user before continuing.

Workflow

Phase 1: Project Analysis

Automatically analyze the current project to understand brand context:

1. Detect product identity - Check these files in order:

   • README.md - Product name, description, tagline
   • package.json - Name, description, keywords
   • pyproject.toml - Project name and description
   • Cargo.toml - Package name and description
   • go.mod - Module name

2. Find existing brand assets - Search for:

   • /docs/brand_kit.md, /.docs/brand_kit.md, brand_kit.md
   • /docs/prd.md, prd.md - Product requirements with brand info
   • /assets/logo/, /public/logo, /static/logo - Existing logos
   • Tailwind config for existing color palette

3. Identify project type from codebase structure:

   • Developer/CLI/Open Source - .github/, CLI entry points, MIT license
   • SaaS/Productivity - Web app structure, auth, dashboard patterns
   • Startup - Lean structure, MVP patterns
   • Enterprise/B2B - Complex architecture, integrations
   • Consumer/Mobile - React Native, Flutter, mobile-first patterns

4. Summarize findings before proceeding:

   Product: [name]
   Type: [Developer Tool / SaaS / Startup / Enterprise / Consumer]
   Purpose: [1-sentence description]
   Audience: [target users]
   Existing colors: [hex codes if found, or "None detected"]
   Assets found: [list or "None"]
   

Phase 2: Logo Design

Generate logo based on project type and context.

Style Selection (auto-select based on project type)

Design Principles

Visual:

• Minimalist, clean, strong geometry
• Abstract symbol or monogram related to core purpose
• Works at all sizes (16px favicon to hero banner)
• Flat or semi-flat design, no gradients or visual clichés
• Incorporate visual depth using cards, lines, borders, and subtle shadows

Colors:

• Use detected brand colors if available, OR user-provided palette
• If neither exists, apply the Default Style Guide below
• High contrast, WCAG AA compliant (4.5:1 minimum)
• Always provide light, dark, and transparent versions

Default Style Guide (used when user provides no style preference):

• Palette: Strictly four core colors only — Black (#000000), White (#FFFFFF), Gray (#6B7280), and Bright Green (#22C55E)
• Aesthetic: Elegant, clear, clean, and professional
• Bright Green constraint: Reserved for highlights only (text, borders, lines) — never as a background color
• System status colors: Danger (#EF4444), Warning (#F59E0B), Info (#3B82F6) may only be applied to text elements, never to backgrounds or primary UI components

Typography:

• Modern sans-serif (Inter, SF Pro, Geist, or match detected fonts)
• Medium to Bold weight
• Confident and readable at small sizes

Phase 3: Deliverables

Generate these SVG files:

/assets/logo/
├── logo-full.svg      # Mark + wordmark (horizontal)
├── logo-mark.svg      # Symbol/icon only
├── logo-wordmark.svg  # Text only
├── logo-icon.svg      # App icon (square, padded)
├── favicon.svg        # 16x16 optimized
├── logo-white.svg     # White version for dark backgrounds
└── logo-black.svg     # Black version for light backgrounds

SVG Requirements:

• Vector-style, crisp edges
• No embedded rasters
• Optimized paths
• viewBox properly set

Phase 4: Documentation

After generating logos, provide:

1. Design Rationale

   • Why these colors were chosen
   • Symbol meaning and connection to product
   • Typography choice reasoning

2. Color Specification

   Primary: #HEXCODE
   Secondary: #HEXCODE (if applicable)
   Accent/Highlight: #HEXCODE (for borders, lines, highlight text)
   Background Light: #FFFFFF
   Background Dark: #0A0A0A
   

3. Tailwind Config Addition

   colors: {
     brand: {
       primary: '#HEXCODE',
       secondary: '#HEXCODE',
       accent: '#HEXCODE',
     }
   }
   

4. Next Steps

   • Create or update brand_kit.md
   • Add logo to README
   • Update favicon in HTML/framework config

Example Output

For a CLI tool called "fastbuild":

## Analysis Summary
Product: fastbuild
Type: Developer/CLI Tool
Purpose: Fast incremental build system for large codebases
Audience: Software developers, DevOps engineers
Existing colors: None detected
Assets found: None

## Design Rationale
- **Symbol**: Abstract "F" formed by stacked horizontal bars suggesting speed and layered builds
- **Colors**: Default style guide — Black/White/Gray base with Bright Green highlight on the speed bars
- **Typography**: Geist Mono for CLI tool authenticity

## Colors
Primary: #000000
Secondary: #6B7280
Accent: #22C55E (highlights only — borders, lines)
Background Light: #FFFFFF
Background Dark: #0A0A0A

Notes

• Always show logo previews on both light (#FFFFFF) and dark (#0A0A0A) backgrounds
• For wordmarks, ensure the product name is spelled exactly as found in project files
• If no project context is found, ask the user for: product name, type, and purpose
• Prefer simplicity - a logo should be recognizable at 16x16 pixels