Components: Logo

Initial Assessment

.claude/product-marketing-context.md

.cursor/product-marketing-context.md

1. Context: Header, footer, standalone
2. Platform: Web, mobile, both
3. Brand guidelines: Size, clear space, variants (from brand-visual-generator or media kit)

Placement Best Practices

Optimal: Top-Left

• Brand recall: Users are 89% more likely to remember logos in top-left vs. right
• Left-aligned: ~39% brand recall vs. 21% for right-aligned
• Navigation anchor: Users expect logo to link to homepage; left placement is intuitive
• Scan pattern: Aligns with left-to-right reading flow

Avoid

• Centered logos: Users navigating home from centered logos are ~6x more likely to fail
• Right-aligned: Violates conventions; harms brand recognition

When Center May Work

• Minimal headers with few elements
• Brand-heavy landing pages where logo is focal point
• Ensure logo still links to homepage and is clearly clickable

Implementation

Linking

• Always link to homepage from logo
• Use

  <a href="/">

  wrapping logo image
• Expected behavior; don't break convention

Image

• Use appropriate format (SVG preferred for scalability)
• Provide

  alt

  text: company/product name, not "logo"
• Example:

  alt="Acme Inc."

  not

  alt="Logo"

Size & Clear Space

• Minimum size: Document in brand guide; prevent illegibility at small sizes (favicon, mobile header).
• Clear space: Minimum space around logo; no text or graphics within this zone. Defined in brand-visual-generator.
• Responsive: Ensure readability on mobile; test at 375px, 768px, 1024px.
• Variants: Primary, secondary, monogram; light/dark backgrounds per brand guidelines.

AI Product Logo Design (Optional)

Design Trends

Design Process

1. Positioning: B2B (professional, trustworthy) vs B2C (friendly, approachable)
2. Core element: Choose hexagon, rotation, robot, or emoji per product type
3. Color: Tech blue, blue-to-purple gradients, monochrome; consider dark mode
4. Test sizes: Favicon, mobile, header; ensure recognition at small sizes
5. Trademark check: Avoid conflicts with existing marks

Avoid

• Overly complex; modern AI logos favor minimalism
• Too similar to competitors; balance industry recognition with uniqueness
• Overly technical symbols for B2C; use friendlier designs
• Ignoring mobile display; test at multiple sizes
• Frequent rebranding; choose a long-term design

SEO

• Alt text supports accessibility and image SEO
• Logo link contributes to internal linking (homepage)

Accessibility

Output Format

• Placement recommendation
• Implementation notes (HTML, alt, link)
• Accessibility checklist
• AI products (optional): Design trend and archetype suggestions per positioning

Related Skills

• branding: Brand strategy; logo rules defined in brand guidelines
• navigation-menu-generator: Logo typically sits in header with nav
• hero-generator: Logo appears in hero context on landing pages
• media-kit-page-generator: Logo assets, brand guidelines, usage rules
• favicon-generator: Favicon derived from logo; consistent brand in browser tabs
• brand-visual-generator: Typography, colors, spacing; logo clear space and variants