When the user wants to optimize logo placement, linking, or branding on a website. Also use when the user mentions "logo," "brand logo," "header logo," "logo placement," "AI logo design," "logo link," "logo alt text," "logo sizing," "favicon logo," or "logo usage."
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.
Check for project context first: If .claude/project-context.md or .cursor/project-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:
<a href="/"> wrapping logo imagealt text: company/product name, not "logo"alt="Acme Inc." not alt="Logo"For AI/SaaS products, Alignify AI Logo Guide offers industry-specific guidance.
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 |
| 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) |