templates/brands/hanzo/guidelines/logo-usage.md

Hanzo AI Logo Usage Guidelines

Logo Assets

The Hanzo AI logo comes in several variations to suit different contexts:

Primary Logo

• File: hanzo-logo.svg (vector, preferred)
• Usage: Default logo for all contexts
• Contains: Icon + wordmark in brand colors

Logo Variations

• Icon Only: hanzo-icon.svg - Square icon for small spaces
• Wordmark Only: hanzo-wordmark.svg - Text-only version
• Monochrome: hanzo-logo-mono.svg - Single-color version
• Inverse: hanzo-logo-inverse.svg - White version for dark backgrounds

File Formats

• SVG: Vector format, scalable without quality loss (preferred)
• PNG: Raster format in various sizes (1x, 2x, 4x)
• PDF: Print-ready vector format

Logo Specifications

Primary Logo Dimensions

• Aspect Ratio: 4:1 (horizontal)
• Minimum Size: 120px width (digital), 0.5 inches (print)
• Clear Space: Minimum padding equal to the height of the icon

Color Versions

Full Color (Primary)

Use on white or light backgrounds:

• Icon: Orange (#FF6B35) to Blue (#004E89) gradient
• Wordmark: Deep Blue (#004E89)

Monochrome

Use when color is not available:

• Single color: Deep Blue (#004E89) or black
• Maintains all proportions and details

Inverse/White

Use on dark backgrounds:

• All elements: White (#FFFFFF)
• Ensure sufficient contrast with background

Usage Rules

Clear Space

Always maintain clear space around the logo equal to the height of the icon element. No text, graphics, or other elements should intrude into this space.

[Clear Space]
    ╔════════════════════════════╗
    ║    [Icon] HANZO AI         ║  ← Logo
    ╚════════════════════════════╝
[Clear Space]

Minimum Sizes

Digital Applications:

• Website headers: 180px minimum width
• Mobile apps: 140px minimum width
• Social media profiles: 400x400px minimum (icon only)
• Favicons: 32x32px minimum (icon only)

Print Applications:

• Business cards: 0.75 inches minimum width
• Letterhead: 1.5 inches minimum width
• Signage: Size for visibility at intended viewing distance
• Large format: Scale up freely (vector format)

Background Guidelines

Approved Backgrounds

✅ Good Examples:

• Pure white (#FFFFFF)
• Off-white (#F8F9FA)
• Light gray (#E9ECEF)
• Dark gray (#343A40) with inverse logo
• Pure black (#000000) with inverse logo
• Solid brand colors with appropriate contrast

❌ Avoid:

• Busy patterns or textures
• Low-contrast backgrounds
• Gradients that interfere with logo legibility
• Photos without sufficient solid background area
• Competing visual elements near logo

Alignment

Horizontal Alignment:

• Left-align in navigation bars and headers
• Center-align on landing pages and marketing materials
• Right-align in footers (with other org info)

Vertical Alignment:

• Optically center when paired with other elements
• Align baseline of wordmark with companion text

Do's and Don'ts

✅ Do's

1. Use Official Assets

   • Always use logo files from this repository
   • Download the most recent version
   • Use vector (SVG) format when possible

2. Maintain Proportions

   • Never distort or stretch the logo
   • Scale uniformly (maintain aspect ratio)
   • Use provided variations for different contexts

3. Ensure Contrast

   • Use full-color logo on light backgrounds
   • Use inverse logo on dark backgrounds
   • Test visibility in all contexts

4. Follow Clear Space Rules

   • Maintain minimum clear space
   • Don't crowd the logo with other elements
   • Give logo room to breathe

5. Use Appropriate Size

   • Never use logo smaller than minimum size
   • Scale up for better visibility when needed
   • Consider viewing distance for print materials

❌ Don'ts

1. Don't Modify the Logo

   ❌ Don't change colors
   ❌ Don't rearrange elements  
   ❌ Don't add effects (shadows, glows, bevels)
   ❌ Don't outline or stroke the logo
   ❌ Don't rotate or skew
   

2. Don't Recreate the Logo

   ❌ Don't redraw or trace
   ❌ Don't use similar fonts to recreate
   ❌ Don't use outdated versions
   ❌ Don't create your own variations
   

3. Don't Place on Inappropriate Backgrounds

   ❌ Don't use on busy photos
   ❌ Don't place on low-contrast backgrounds
   ❌ Don't use on colors outside brand palette
   ❌ Don't overlay on competing visual elements
   

4. Don't Crowd the Logo

   ❌ Don't violate clear space requirements
   ❌ Don't place text too close
   ❌ Don't surround with borders or boxes
   ❌ Don't compete with other visual elements
   

Incorrect Usage Examples

Common Mistakes

Mistake 1: Wrong Colors

❌ Using green instead of orange
❌ Using purple instead of blue
❌ Using custom gradient colors

Mistake 2: Distortion

❌ Stretching logo to fit space
❌ Squishing logo vertically
❌ Rotating logo at angle

Mistake 3: Effects

❌ Adding drop shadow
❌ Adding outer glow
❌ Adding 3D effects or bevels

Mistake 4: Low Contrast

❌ Orange logo on red background
❌ Blue logo on dark blue background
❌ White logo on light gray background

Mistake 5: Cluttered Placement

❌ Logo touching edge of container
❌ Text overlapping logo
❌ Multiple logos competing for attention

Special Use Cases

Social Media

Profile Pictures:

• Use icon-only variation
• Minimum 400x400px
• Ensure visibility at thumbnail size
• Use full-color version with white/light background

Cover Photos:

• Use full logo (icon + wordmark)
• Position with clear space on all sides
• Ensure legibility on all devices
• Consider safe zones for profile pic overlap

Posts:

• Place logo in corner with clear space
• Don't obscure important content
• Use appropriate size for post format
• Maintain brand consistency

Website

Navigation/Header:

• Left-aligned in navigation bar
• Clickable link to homepage
• Appropriate size for viewport
• Responsive sizing on mobile

Footer:

• Can be smaller than header
• Often centered or right-aligned
• Include copyright notice nearby
• Link to homepage or about page

Favicon:

• Use icon-only variation
• Generate all required sizes (16x16 to 512x512)
• Ensure visibility at smallest size
• Use PNG format with transparency

Print Materials

Business Cards:

• Front: Logo + contact info
• Back: Optional logo watermark
• Maintain print minimum size (0.75")
• Use vector format for printing

Letterhead:

• Header: Full logo, appropriate size
• Footer: Optional small logo or wordmark
• Maintain clear space from content
• Use high-resolution files (300dpi)

Presentations:

• Title slide: Larger logo, centered or left
• Content slides: Smaller logo in corner
• Consistent placement throughout deck
• Use template for consistency

Signage:

• Scale logo for viewing distance
• Use vector format for large format
• Ensure sufficient contrast
• Consider lighting conditions

Digital Products

Applications:

• App icon: Icon-only variation
• Loading screen: Full logo, centered
• About screen: Full logo with version info
• Follow platform guidelines (iOS, Android)

Software UI:

• Header/title bar: Appropriate size
• Splash screen: Centered, larger
• About dialog: Full logo with copyright
• Login screen: Prominent but not overwhelming

Co-Branding

When the Hanzo logo appears with partner logos:

1. Equal Prominence: All logos should be similar size
2. Consistent Alignment: Align all logos to same baseline
3. Clear Separation: Use dividers or spacing between logos
4. Respect Partners: Follow their brand guidelines too

Example Layout:

[Hanzo Logo]  |  [Partner Logo]  |  [Another Partner]

Logo Misuse Reporting

If you see the Hanzo logo being used incorrectly:

1. Document: Take screenshot/photo
2. Report: Email [email protected] with details
3. Context: Provide URL or location
4. Suggest: Offer to provide correct logo files

Questions?

For logo usage questions or requests for custom variations:

• Email: [email protected]
• GitHub: https://github.com/hanzoai/brand/issues

---

Last Updated: 2025-10-29
Version: 1.0.0