
Brand Style Guide
Visual Identity & Design Standards
v2.3 | January 2026Contents
1. Brand Overview
Company Information
| Business Name | FineTurf Lawn Care |
| Headquarters | Matthews, NC |
| Service Area | Charlotte, NC and surrounding areas |
| Industry | Residential Lawn Care Services |
| Website | fineturflawncare.com |
Tagline
"Creating lawns neighbors notice."
Brand Personality
Modern and approachable—not luxury or intimidating. We're the friendly neighborhood experts who make lawn care simple and stress-free. Professional but personal.
Mission Statement
To help Charlotte homeowners take back control of their lawns with science-driven lawn care that eliminates weeds, restores health, and brings yards back to life—built on reliable communication, local expertise, and a results-first approach.
Core Values
- Results-Driven—We don't just treat lawns, we transform them
- Reliable Communication—We show up, knock on your door, and keep you informed
- Local Expertise—We understand Charlotte's soil, clay, and weather patterns
- Science-Backed—Turf science, soil testing, and seasonal timing deliver real results
- Customer Partnership—We fight the battle alongside you
2. Brand Story & Positioning
Brand Positioning
FineTurf positions itself as the partner that helps Charlotte homeowners win the battle against weeds and lawn problems. Unlike generic lawn care companies, FineTurf uses a science-driven approach combined with reliable communication to deliver visible, lasting results.
Target Audience
Charlotte-area homeowners who are frustrated with their lawn's appearance—dealing with weeds, bare spots, and thin turf. They've likely tried DIY solutions or been disappointed by other lawn care companies and want a reliable partner who will actually solve their lawn problems. They're busy professionals and families who'd rather spend weekends enjoying their yard than working on it.
Key Differentiators
- Science-driven lawn care with turf science expertise
- Reliable communication—always knock on the door to check in
- Local Charlotte expertise in soil, clay, and weather patterns
- Results-first approach with visible improvement
- Battle-themed messaging that resonates with frustrated homeowners
StoryBrand Framework
The Problem
Weeds and bare spots spread, they fight back, and they always find the weak spots. They won't stop on their own and with every season you wait, the problem only gets worse.
The Guide
FineTurf understands the frustration—the time, the money, the disappointment. We're the Charlotte-based lawn care team built to solve these problems for good.
The Plan
- Request your free quote—We build a custom plan for your lawn
- We go to battle for your lawn—Science-backed treatments shift the battle in your favor
- Enjoy a thick, healthy, green lawn—Take pride in a yard that looks great every season
3. Brand Personality & Voice
Brand Personality Traits
- Battle-Ready—We're here to fight for your lawn
- Knowledgeable—Science-backed expertise you can trust
- Reliable—Consistent, dependable service every time
- Empathetic—We understand your frustration
- Local—Your Charlotte neighbors, invested in the community
Brand Voice
FineTurf's voice is confident, action-oriented, and empathetic—like a trusted ally who understands your lawn struggles and has the expertise to help you win. We use battle metaphors to make lawn care feel important and achievable.
Voice Characteristics
| We Are | We're Not |
|---|---|
| Friendly & Approachable | Stiff or Corporate |
| Confident & Knowledgeable | Arrogant or Condescending |
| Action-Oriented | Passive or Vague |
| Empathetic & Understanding | Dismissive of Concerns |
| Straightforward & Honest | Overpromising or Exaggerating |
Key Messaging Themes
- Battle Language: "Fight back," "win the battle," "enemies of your lawn"
- Science Focus: "Science-backed," "turf science," "custom formulations"
- Results Emphasis: "Visible results," "real improvement," "transformation"
- Local Connection: "Charlotte homeowners," "your neighbors," "local expertise"
4. Logo Usage
Primary Logo
Clear Space
Maintain minimum clear space around the logo equal to the height of the "F" in FineTurf. No other elements should intrude into this space.
Minimum Size
| Digital | 120px width minimum |
| 1.5 inches width minimum |
Logo Don'ts
- Don't stretch or distort the logo
- Don't change the colors
- Don't add effects (shadows, outlines, gradients)
- Don't place on busy or low-contrast backgrounds
- Don't rotate or tilt the logo
5. Color Palette
Color Strategy
Following the 60-30-10 rule for visual hierarchy:
- 60% Primary: Neutrals, white space, backgrounds
- 30% Secondary: FineTurf Blue, section backgrounds
- 10% Accent: Orange CTAs, Green accents
Primary Brand Colors
HEX: #134e93
RGB: 19, 78, 147
Token: --ft-blue
Usage: Headlines, dark sections, trust elements
HEX: #71bf44
RGB: 113, 191, 68
Token: --ft-green
Usage: Accents, checkmarks, success states, icons
HEX: #d96a1a
RGB: 255, 117, 31
Token: --ft-orange
Usage: Primary CTA buttons ONLY
Neutral Colors
HEX: #231f20
Token: --ft-text-dark
Usage: Primary body text
HEX: #6b7280
Token: --ft-text-muted
Usage: Secondary text, captions
HEX: #FFFFFF
Token: --ft-white
Usage: Backgrounds, text on dark sections
Color Usage with Button Examples
| Usage | Color | Example |
|---|---|---|
| Primary CTA Buttons | Orange #d96a1a | Request Quote |
| Section Backgrounds | Blue #134e93 or White | Alternate for visual rhythm |
| Icons & Checkmarks | Green #71bf44 | Positive indicators |
| Body Text | #231f20 / #ffffff | Light bg / dark bg |
Accessibility Requirements
- Body text: minimum 4.5:1 contrast ratio (WCAG AA)
- Large text (18px+): minimum 3:1 contrast ratio
- Interactive elements: visible focus states
- Never rely on color alone to convey meaning
6. Typography System
Font Pairing Strategy
Headlines: Nunito (friendly, modern, trustworthy)
Body: Mulish (clean, readable, professional)
Primary Typeface: Nunito
| Font Family | Nunito, Helvetica, Arial, sans-serif |
| Weights Used | Semi-Bold (600), Bold (700), Extra Bold (800) |
| Source | Google Fonts |
| Token | --ft-font-heading |
Secondary Typeface: Mulish
| Font Family | Mulish, Helvetica, Arial, sans-serif |
| Weights Used | Regular (400), Semi-Bold (600) |
| Source | Google Fonts |
| Token | --ft-font-body |
Type Scale
| Element | Font | Size | Weight | Line Height |
|---|---|---|---|---|
| H1 - Hero | Nunito | 64px | 800 | 1.1 |
| H2 - Section | Nunito | 48px | 700 | 1.25 |
| H3 - Subsection | Nunito | 30px | 700 | 1.3 |
| H4 | Nunito | 24px | 600 | 1.4 |
| Body | Mulish | 18px | 400 | 1.625 |
| Button | Nunito | 14-16px | 700, uppercase | 1 |
Type Examples (Current Homepage)
H1 - Hero Headlines
Creating lawns neighbors notice.
H2 - Section Headings
The Enemies of a Healthy Lawn
H3 - Sub-sections
A Lawn Care Partner Who Gets Results
Body Text
Tired of patchy grass, stubborn weeds, and lawn care companies that overpromise? FineTurf brings science-backed treatments and real accountability to Charlotte homeowners who deserve better.
8. Photography & Imagery
Subject Matter
- Lawns: Before/after comparisons, thick healthy grass, problem areas
- Team: Real FineTurf team members at work
- Equipment: Branded trucks, professional equipment
- Community: Charlotte neighborhoods, local landmarks
Photography Style
- Natural lighting, bright and optimistic
- Authentic—real lawns, real results
- High resolution, professional quality
- Avoid overly staged or stock-looking images
Image Treatment (Service Pages)
| Border Radius | 12px (--ft-radius-lg) |
| Box Shadow | 0 10px 25px rgba(0,0,0,0.1) (--shadow-lg) |
| Max File Size | Under 100KB each |
| Format | WebP preferred, JPEG fallback |
| Alt Text | Required on ALL images |
| CSS Classes | ft-img-rounded ft-img-shadow |
Icon Style
Custom SVG icons with consistent styling for service cards and marketing materials.
| Background | Blue circle (#134e93) |
| Primary Stroke | White, 2-3px weight |
| Accent Color | Green (#71bf44) for grass/nature elements |
| Style | Clean, professional, minimalist line art |
| Display Size | 80px in service cards |
| ViewBox | 120 x 120px |
9. Do's and Don'ts
✓ BRAND DO'S
- Use the logo on clean, high-contrast backgrounds
- Maintain consistent voice across all touchpoints
- Use battle/action language in messaging
- Show real photos of lawns and team
- Keep messaging customer-focused
- Use Orange for primary CTAs only
- Emphasize science-backed expertise
- Acknowledge customer frustration empathetically
- Use Nunito for headlines, Mulish for body
- Follow the 8pt spacing grid
- Use design tokens for all values
✗ BRAND DON'TS
- Stretch, crop, or recolor the logo
- Use generic stock photography
- Make empty claims like "best" or "cheapest"
- Use colors outside the approved palette
- Sound corporate, distant, or impersonal
- Use technical jargon without explanation
- Promise "quick fixes"
- Make FineTurf the hero instead of the customer
- Make buttons lighter on hover
- Use magic numbers instead of spacing tokens
- Use inline styles instead of global CSS classes
10. Service Icons NEW
Custom SVG icons designed for service cards and marketing materials. All icons follow consistent styling with blue circular backgrounds, white strokes, and green accents.
Download All Icons
Get all 12 service icons in a single ZIP file
Icon Specifications
All 12 Service Icons
Usage Instructions
- Use in Divi Blurb modules with "Image" option (not Icon)
- Upload to
/wp-content/uploads/2025/12/ - Set image width to 80px in service cards
- Icons scale cleanly to any size (SVG format)
- Do not modify colors or stroke weights
- Use on white or light gray backgrounds only
Design System Contents
1. Design Philosophy
Every design decision should support FineTurf's brand positioning as a trustworthy, modern, results-driven lawn care partner. The visual system creates a cohesive experience that feels professional yet approachable.
Core Principles
Low Cognitive Load
Users should never have to think about navigation or next steps. Clear hierarchy, obvious CTAs, and intuitive flow.
Warmth + Sophistication
Professional without being cold. Approachable without being cheap. Modern and trustworthy.
Conversion-Focused
Every element serves the StoryBrand narrative. Guide users toward taking action naturally.
Systematic Consistency
Use design tokens, not magic numbers. Maintain visual rhythm through spacing and typography scale.
Mobile-First
Design for thumb-reach first. Touch targets minimum 44px. Responsive at all breakpoints.
Performance as Feature
Fast loading builds trust. Optimize images, minimize CSS, leverage caching. Target 90+ PageSpeed.
Generous White Space
White space is a feature, not waste. Let content breathe. Avoid cramped layouts.
Global Over Inline
Use global CSS classes and tokens. Avoid inline styles. Maintain single source of truth.
2. 8pt Grid System
Why 8pt?
- Divisible by 2 and 4 (scales well)
- Aligns with most device pixel densities
- Creates natural visual rhythm
- Reduces decision fatigue
Spacing Scale
--space-1
--space-2
--space-3
--space-4
--space-5
--space-6
--space-8
--space-10
--space-12
--space-16
Application Rules
| Context | Value | CSS Variable |
|---|---|---|
| Section padding (top/bottom) | 64px ★ | --ft-space-10 |
| Headline to body gap | 24px | --ft-space-5 |
| Between components | 32px | --ft-space-6 |
| Blurb/list item gaps | 8px | --ft-space-2 |
| Card padding | 24-32px | --ft-space-5/6 |
| Button padding | 12px 32px | --ft-space-3 / --ft-space-6 |
Documented Exceptions
| Element | Value | Reason |
|---|---|---|
| Hero top padding | 162px | Clears fixed navigation + visual balance |
| Hero bottom padding | 80px | Aligned with --space-12 |
| Form inputs | padding: 12px | Touch-friendly target |
| Blurb icons | 26px | Optimal visual balance |
3. CSS Design Tokens
Use these CSS variables throughout. Never hardcode values. Current file: ft-global-v4.7.css
Colors
- --ft-blue#134e93
- --ft-blue-dark#0f3d75
- --ft-green#71bf44
- --ft-green-dark#5fa336
- --ft-green-accessible#3d7a1f (WCAG AA)
- --ft-orange#d96a1a
- --ft-orange-dark#c45f17
- --ft-text#231f20
- --ft-text-muted#6b7280
- --ft-white#ffffff
- --ft-error#E02B20
Typography
- --ft-font-heading'Nunito', sans-serif
- --ft-font-body'Mulish', sans-serif
- --ft-weight-regular400
- --ft-weight-semibold600
- --ft-weight-bold700
- --ft-weight-extrabold800
Spacing (8pt Grid)
- --ft-space-14px
- --ft-space-28px
- --ft-space-312px
- --ft-space-416px
- --ft-space-524px
- --ft-space-632px
- --ft-space-848px
- --ft-space-1064px (section padding)
- --ft-space-1280px
- --ft-space-1696px
Border Radius
- --ft-radius-sm4px
- --ft-radius-md8px
- --ft-radius-lg12px (images)
- --ft-radius-xl16px
- --ft-radius-full9999px (buttons)
Shadows
- --ft-shadow-sm0 1px 2px rgba(0,0,0,0.05)
- --ft-shadow-md0 4px 6px rgba(0,0,0,0.07)
- --ft-shadow-lg0 10px 25px rgba(0,0,0,0.1)
4. Layout Principles
Container Widths
| Container | Max Width | Usage |
|---|---|---|
| Narrow | 640px | Text-heavy content, forms |
| Default | 1024px | Standard page content |
| Wide | 1280px | Service grids, galleries |
| Full | 1440px | Maximum content width |
Breakpoints
| Name | Width | Target |
|---|---|---|
| Mobile | < 480px | Small phones |
| Tablet | 480px - 768px | Large phones, small tablets |
| Desktop | 768px - 1024px | Tablets, small laptops |
| Wide | 1024px - 1280px | Laptops, desktops |
| Ultra | > 1280px | Large monitors |
Section Structure
- Section padding: 64px top/bottom (--ft-space-10)
- Hero sections: 162px top, 80px bottom
- Alternate background colors for visual rhythm
- One clear CTA per section maximum
5. Component Specifications
Images
| Border Radius | 12px (--ft-radius-lg) |
| Box Shadow | --ft-shadow-lg |
| CSS Classes | ft-img-rounded, ft-img-shadow |
| Format | WebP preferred |
| Max Size | 100KB per image |
Service Cards
| Background | White |
| Border Radius | 12px |
| Padding | 24-32px |
| Shadow | --ft-shadow-md |
| Icon Size | 80px |
| CSS Class | ft-service-card |
Blurbs (Inline)
| Icon Size | 26px |
| Icon Color (Problem) | #E02B20 (red X) |
| Icon Color (Solution) | #71bf44 (green check) |
| Spacing | 8px between items |
| CSS Class | ft-blurb-problem, ft-blurb-solution |
Forms
| Input Padding | 12px |
| Border Radius | 8px |
| Focus State | Blue border + glow |
| Error State | Red border + message |
| Touch Target | Minimum 44px height |
6. Animation & Transitions
Transition Timing
| Fast | 0.15s ease |
| Normal | 0.3s ease |
| Slow | 0.5s ease |
Hover Effects
- Buttons: Darker background, lift -2px, shadow increase
- Cards: Subtle lift -4px, shadow increase
- Links: Color change only
Hero Animation
The hero section includes an animated green accent line that draws in from left to right on page load. This uses CSS keyframes defined in the global stylesheet.
| Animation | ft-accent-line |
| Duration | 0.8s |
| Delay | 0.3s |
| Easing | ease-out |
7. Performance Standards
Target Metrics
| Metric | Target | Tool |
|---|---|---|
| PageSpeed (Mobile) | 90+ | Google PageSpeed Insights |
| PageSpeed (Desktop) | 95+ | Google PageSpeed Insights |
| LCP | < 2.5s | Core Web Vitals |
| FID | < 100ms | Core Web Vitals |
| CLS | < 0.1 | Core Web Vitals |
Optimization Checklist
- All images in WebP format
- Images under 100KB each
- Lazy loading on below-fold images
- Minified CSS and JavaScript
- Browser caching enabled
- GZIP compression active
- No render-blocking resources
8. Accessibility Standards
WCAG 2.1 AA Compliance
- Color contrast: 4.5:1 minimum for body text
- Color contrast: 3:1 minimum for large text (18px+)
- Focus indicators visible on all interactive elements
- Alt text on all meaningful images
- Proper heading hierarchy (H1 → H2 → H3)
- Skip to content link for keyboard users
- Touch targets minimum 44px
9. Page Audit Checklist
Apply to every page before launch. Target: 95%+ compliance (52/55 points).
SEO Meta (7 points)
- Title 30-60 chars, unique, includes "Charlotte NC"
- Meta description 120-160 chars, unique
- Focus keyword present in title and H1
- Schema markup present (LocalBusiness or Service)
- Canonical URL set
- OG image set for social sharing
- No duplicate meta across pages
Heading Structure (6 points)
- Exactly one H1 per page
- H1 is 20-70 characters, unique
- Proper hierarchy (no skipped levels)
- Nunito font on all headings
- Correct weights (H1: 800, H2: 700, H3: 600)
- Proper color (--ft-text-dark or --ft-blue)
Typography (8 points)
- Nunito for headlines
- Mulish for body text
- Correct font sizes per type scale
- Correct font weights
- Line height 1.625 for body
- No orphan words in headlines
- Proper letter-spacing on buttons
- No font loading issues
Colors (5 points)
- Using approved brand colors only
- Orange reserved for primary CTAs
- Contrast ratios pass WCAG AA
- Using CSS tokens, not hex values
- No unapproved color variants
Buttons (6 points)
- Orange primary CTA present
- Pill shape (border-radius: 9999px)
- Uppercase with letter-spacing
- Hover state darker (not lighter)
- One CTA per section maximum
- Touch target minimum 44px
Images (7 points)
- WebP format
- Under 100KB each
- Descriptive alt text on all
- 12px border radius
- Box shadow applied
- Lazy loading on below-fold
- No placeholder images remaining
Spacing (5 points)
- Following 8pt grid
- Section padding 64px
- No off-grid values
- Consistent component spacing
- Proper white space between sections
Development (5 points)
- Global CSS file loaded (ft-global-v4.7.css)
- Using design tokens, not magic numbers
- No inline styles
- Proper ft-* class naming
- Divi defaults overridden where needed
Mobile (4 points)
- Responsive at all breakpoints
- Touch targets 44px minimum
- No horizontal scroll
- Readable text without zooming
Content (2 points)
- Follows StoryBrand structure
- Copy approved by client