Logo Guidelines

Learn how to properly use the LawnGuru logo across different applications and contexts.

🎨 The LawnGuru Logo

The LawnGuru logo is a key element of our brand identity. It represents growth, nature, and professional lawn care services. Consistent and proper use of the logo helps build brand recognition and trust.

Logo Variations

We provide multiple logo variations for different use cases:

Primary Logo

Full color on light backgrounds

Reversed Logo

White on dark backgrounds

Monochrome Logo

Single color when needed

📏 Clear Space

Always maintain clear space around the logo equal to the height of the leaf element. This ensures the logo has room to breathe and remains visually distinct.

Minimum clear space on all sides

📐 Minimum Size

To maintain legibility and visual impact, never use the logo smaller than these minimum sizes:

Digital Applications

• Minimum width: 32px (icon/favicon)
• Recommended minimum: 40px (UI elements)
• Standard size: 80px (headers, navigation)

Print Applications

• Minimum width: 0.5 inches (12.7mm)
• Recommended minimum: 1 inch (25.4mm)

32px
(Minimum)

40px
(Recommended)

80px
(Standard)

🎨 Color Usage

Primary Logo Colors

The logo uses our brand green color palette:

#008934

Primary Green

#00A31B

Light Green

#056535

Dark Green

Background Color Guidelines

The logo should only be used on these approved backgrounds:

✅ Approved Backgrounds:

• White (#FFFFFF)
• Light neutral (#F6F6F6)
• Dark neutral (#0B0B0B, #2A2A2A) - use reversed/white logo
• Brand green gradients (with proper contrast)

❌ Avoid:

• Busy patterns or images
• Low contrast backgrounds
• Other brand colors (red, yellow, blue)
• Gradients that reduce logo visibility

🚫 Logo Don'ts

To maintain brand integrity, never:

❌ Don't Stretch or Distort

Always maintain the original proportions

❌ Don't Rotate

Logo should always be horizontal

❌ Don't Add Effects

No shadows, outlines, or gradients

❌ Don't Change Colors

Use only approved color variations

❌ Don't Recreate

Always use official logo files

❌ Don't Crowd

Maintain proper clear space

💻 Digital Usage

Website & Apps

• Header/Navigation: 40-80px width
• Footer: 32-40px width
• Loading screens: 120-160px width
• Favicon: 32x32px or 64x64px

Social Media

• Profile picture: 400x400px minimum
• Cover images: Include logo at 10-15% of image width
• Post graphics: 80-120px width for watermarks

📄 Print Usage

Business Collateral

• Business cards: 0.75-1 inch width
• Letterhead: 1-1.5 inches width
• Envelopes: 0.75-1 inch width
• Brochures: 1-2 inches width

Marketing Materials

• Posters: 3-6 inches width (depending on poster size)
• Banners: 12-24 inches width
• Vehicle wraps: 18-36 inches width
• Signage: Scale appropriately for viewing distance

📦 Logo Downloads

File Formats Available

• SVG - Scalable vector (recommended for web)
• PNG - Transparent background (web & presentations)
• PDF - Vector print file (professional printing)
• EPS - Vector file (legacy design software)

Download Options

• Primary logo (full color)
• Reversed logo (white)
• Monochrome logo (black/grayscale)
• Favicon sizes (16x16, 32x32, 64x64)
• Social media sizes (400x400, 1200x1200)

Asset Downloads

Contact the design team or check the Figma design library for the latest logo files and brand assets.

📝 Implementation Code

HTML

<!-- Primary logo -->
<img src="/logo.svg" alt="LawnGuru" width="80" height="80">

<!-- With link -->
<a href="/">
  <img src="/logo.svg" alt="LawnGuru Home" width="80" height="80">
</a>

React/JSX

import Logo from '/logo.svg';

function Header() {
  return (
    <a href="/">
      <img
        src={Logo}
        alt="LawnGuru"
        width={80}
        height={80}
        className="logo"
      />
    </a>
  );
}

CSS

.logo {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

/* Responsive logo */
.logo-responsive {
  width: 100%;
  max-width: 80px;
  height: auto;
}

♿ Accessibility

• Always include descriptive alt text
• Ensure sufficient contrast with background (4.5:1 minimum)
• Make logo images linkable to homepage when used in navigation
• Don't rely solely on the logo to convey important information

<!-- Good: Descriptive alt text -->
<img src="/logo.svg" alt="LawnGuru - Professional Lawn Care">

<!-- Better: Logo as clickable home link -->
<a href="/" aria-label="LawnGuru Home">
  <img src="/logo.svg" alt="LawnGuru">
</a>

📞 Questions?

If you have questions about logo usage or need additional file formats, please contact:

• Design Team: design@lawnguru.com
• Brand Guidelines: View full brand book
• Figma Library: Access design files

Next Steps:

• Colors →
• Typography →
• Icons →