Guides logo placement and implementation for brand recall and navigation. Logo placement affects user orientation and conversion.
When invoking
On
first use
, if helpful, open with 1-2 sentences on what this skill covers and why it matters, then provide the main output. On
subsequent use
or when the user asks to skip, go directly to the main output.
Initial Assessment
Check for product marketing context first:
If
.claude/product-marketing-context.md
or
.cursor/product-marketing-context.md
exists, read it for brand guidelines and visual identity.
Brand guidelines source
Logo usage rules (clear space, minimum sizes, variants) come from
branding
(strategy),
brand-visual-generator
(visual specs), or media kit. Ensure alignment before implementation.
Identify:
Context
Header, footer, standalone
Platform
Web, mobile, both
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
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)
For AI/SaaS products,
Alignify AI Logo Guide
offers industry-specific guidance.
Design Trends
Examples are illustrative; no endorsement implied.
Style
Use Case
Examples
Hexagon
Technical platforms, enterprise AI
Common in AI logos (e.g. OpenAI)
Rotation/swirl
Generative AI, creative tools
E.g. DeepMind, Stability AI
Minimalist robot
Assistants, chatbots
E.g. Jasper, Replika
Emoji/symbol
Consumer, friendly AI
E.g. Hugging Face, Zoom AI
Design Process
Positioning
B2B (professional, trustworthy) vs B2C (friendly, approachable)
Core element
Choose hexagon, rotation, robot, or emoji per product type
Color
Tech blue, blue-to-purple gradients, monochrome; consider dark mode
Test sizes
Favicon, mobile, header; ensure recognition at small sizes
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
Requirement
Practice
Alt text
Descriptive; company name
Contrast
Logo visible against background
Focus
Link receives visible focus state
Touch targets
Adequate size on mobile (>=44x44px)
Output Format
Placement
recommendation
Implementation
notes (HTML, alt, link)
Accessibility
checklist
AI products
(optional): Design trend and archetype suggestions per positioning