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