Spacing Standards

One advantage of a design system is consistency.

For your hero patterns, I’d standardize:

Section padding: 100–120px top and bottom (slightly less on mobile)
Content width: About 600–700px for text
Headline: 48–60px on desktop, scaling down on tablets and phones
Supporting text: 18–20px
Button gap: Around 16px between buttons

Document these values in your Global Styles page so every hero feels like part of the same family.

Every Hero Should Include

Strong Headline

Avoid:

Welcome to ABC Plumbing

Instead:

Plumbing Services You Can Count On

Professional Websites That Grow Your Business

Benefit-focused headlines connect faster with visitors.

Supporting Paragraph

One or two sentences.

Not a full introduction.

Primary Button

Examples:

Get a Free Quote
Schedule a Consultation
Contact Us Today
Request an Estimate

Secondary Button

Examples:

View Portfolio
Learn More
Our Services
See Our Work

Trust Indicators

Below the buttons, include a few quick credibility points, such as:

✓ Mobile Friendly

✓ SEO Ready

✓ Fast Loading

✓ Secure

Or, once you have them:

⭐ 5-Star Rated

⭐ 20+ Websites Built

⭐ Local Service

These should always be truthful and updated as your business grows.

Pattern Name	Best For
Hero – Classic Business	Most local businesses
Hero – Split Image	Service companies
Hero – Background Image	Churches, nonprofits, tourism
Hero – Centered Card	Professional services
Hero – Minimal	Modern, clean websites

Hero Pattern 1: Classic Business Hero

Professional Websites That Help Your Business Grow

We design fast, mobile-friendly WordPress websites
that help small businesses attract customers and build
credibility online.

[ Get a Free Quote ] [ View Portfolio ]

Layout

Left: Text
Right: Professional photo or illustration
White background
Plenty of whitespace

Perfect for:

Electricians
Plumbers
HVAC
Contractors
Landscapers
Accountants

Hero Pattern 2: Full-Width Background

       Your Website Should Work as Hard
             as You Do

Affordable websites designed to help your business
stand out online.

[ Schedule a Consultation ]

Large background image with a dark overlay.

Works well for:

Restaurants
Churches
Tourism
Local businesses

Hero Pattern 3: Split Image Hero

| [Get Started] | |

Hero Pattern 4: Card Hero

Background image

Centered white card

      [ White Card ]

Professional Websites
for Local Businesses

Helping you attract more customers.

[ Free Consultation ]

Hero Pattern 5: Minimal Hero

Professional.
Affordable.
Local.

Websites built for small businesses.

[ Let’s Talk ]

Nothing fancy.

Just typography.

This works beautifully.

Hero Library