Goettl Air Conditioning & Plumbing Source · goettl.com

An 85-year HVAC design system, a homepage, three landing pages.

Real colors lifted from production CSS, the iconic flashlight-boy mascot logo, real production photography from goettl.com's WordPress media library, and free Roboto Slab + Mulish substitutes for paid Helserif and Sofia Pro. The system below; a homepage and three landing pages built on it.

The system

Tokens, type, and components — extracted, not invented.

Twelve color swatches with real hex values, a complete Roboto Slab + Mulish type ramp, four signature patterns (promo card, trust badges, review card, guarantee pillars, heritage stripe), service cards, and the photo + mascot library that ties it all together.

Open the design system
#cd163f
#9c0e2c
#003963
#0c4d80
#D87D0C
#f76a0c
#000426
#2B6CB0
#f5f6f8
Homepage preview
Done
the right way.
The homepage

Everything the system ships at full strength.

Hero with the founders' fleet, stat strip, services grid, guarantee pillars, promo cards, review cards, trust badges, heritage stripe, and a final phone-line CTA. Same tokens, full beat.

Open the homepage

Three landing pages on the same system.

Click to open
Landing 01
Three pillars

Services

A pillar-led page with three service lanes (AC, heating, plumbing), the Total Home Comfort Guarantee, sub-service detail, and the trust-badge strip.

Open landing
Landing 02
Promo cards

Financing

Promo-card grid with $2,200 / $129 / 10% offers, 0% APR financing, the Smart Sadie membership program, and a calculator-style impact tier.

Open landing
Landing 03
Six service areas

Book Service

Service-area picker, full booking form, phone-line CTA, hours-of-operation card, and the "we'll be there in 4 hours" reassurance — the conversion page.

Open landing