Logo Designer

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

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

Colors:

• Use detected brand colors OR suggest based on industry
• High contrast, WCAG AA compliant (4.5:1 minimum)
• Always provide light, dark, and transparent versions

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)
   Background Light: #FFFFFF
   Background Dark: #0A0A0A
   

3. Tailwind Config Addition

   colors: {
     brand: {
       primary: '#HEXCODE',
       secondary: '#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**: Monochrome (#0A0A0A) for technical credibility, matching Vercel/Linear aesthetic
- **Typography**: Geist Mono for CLI tool authenticity

## Colors
Primary: #0A0A0A
Accent: #3B82F6 (optional highlight)

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 16×16 pixels