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:

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
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
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

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)

Project Type	Style	Examples
Developer/CLI/Open Source	Clean, technical, monochrome	GitHub, Linear, Vercel
SaaS/Productivity	Ultra-minimal, Apple-style	Notion, Stripe, Figma
Startup	Bold, distinctive, high-contrast	YC-style companies
Enterprise/B2B	Professional, trustworthy	Salesforce, IBM
Consumer/Mobile	Friendly, vibrant, icon-first	Instagram, Spotify

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:

Design Rationale
- Why these colors were chosen
- Symbol meaning and connection to product
- Typography choice reasoning

Color Specification

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

Tailwind Config Addition

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

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

logo-designer

NPX Install

Tags

SKILL.md Content