An 85-year trades identity, in tokens.

The "flashlight boy" mascot is the company's identity since 1939 — never wordmark-only, never a flat circle, never a generic AC icon. The mascot lives inside a red shield-banner that reads GOETTL, framed above by "Since 1939" and below by "AIR CONDITIONING · PLUMBING." This is the single most recognizable element of the brand. The 85-year anniversary mark is a milestone variant used on collateral around heritage moments.

A trades-flag palette: mascot-banner red does the loudest work — the primary CTA, the "Call Now" pill, the top rule on every promo card. Flag-navy carries gravity for footer + dark sections, and mirrors the deep band on the 85-year mark. Safety-orange is the secondary voice for financing/promotions (the WP theme's accent). The page background is a soft cool gray, never pure white — reserved for cards. All values lifted from goettl.com via grep.

Goettl ships Helserif / Rockwell as the heading slab and Sofia Pro as the humanist-geometric body face. Helserif is descended from Rockwell — the chunky, no-nonsense slab that reads as "trades-trusted" without veering into Western kitsch. The free analog is Roboto Slab at 800/900. Sofia Pro is paid (Mostardesign Studio) — the closest free analog is Mulish, which shares the rounded geometric DNA. No serifs in body anywhere — the slab does the heritage work; Mulish does the friendly work.

Primary buttons are solid mascot-red with chunky uppercase Mulish. The "Call Now" phone pill is the signature trades pattern — a phone number is the most-clicked element on every Goettl page. Warm orange is the secondary voice (financing, promotions). Navy is the third (about, careers). The arrow-link is the soft alternative wherever a button would be too loud.

Goettl's signature "deal sticker." A chunky figure ($2,200 OFF, $129, 10% OFF) anchors the card; uppercase service name; small terms; and an expiry date. The 6px red top rule and faint card border are the signature treatment — this pattern is the conversion engine of the homepage. Featured (navy) variant for hero offers; standard (white) for the rest.

Goettl leads with third-party verification because trust is the entire purchase decision in trades. The strip is a row of 5–8 desaturated logos — BBB A+, HomeAdvisor Elite, Google 4.8, ACCA, Air Conditioning Contractors of America — restoring full color on hover. Below: text-only mock to demonstrate the layout.

Single customer review treated as a hero quote — a 5-star row in red, the quote in italic Mulish, and the customer's avatar from Google reviews + first name + city. Goettl's primary social-proof unit. Three themes: cream (default), navy, and brand-red for full-bleed feature cards.

The "Total Home Comfort Guarantee" pattern — three pillars, each illustrated with a real-home photo (couple on couch, hand on faucet, finger on smart thermostat) and a 1-line promise. Functions as the brand's value-proof scaffolding. Use on the homepage and services landing.

Two-frame band — vintage B&W founder photo on one side, present-day color photo on the other, with a "Since 1939 → Today" arrow line between them. Uses the brand's heritage-meets-now editorial rhythm. Use sparingly — once per page max, on About or homepage mid-page anchor.

Standard three-up grid for the main service categories: Air Conditioning, Heating, Plumbing. Photo-led, white-on-cream, with a brand-red bottom border on hover. Eyebrow announces the service number; H3 is the service name; one paragraph of body; arrow link.

Multi-era. Vintage B&W (the founders' fleet) carries heritage moments. Bright, clean color photography of real American homes (couples on couches, granite kitchens, hand on a smart thermostat) carries the present-day pillars of the Total Home Comfort Guarantee. Smart Sadie graphics — the membership-tech mascot named for former CEO Ken Goodrich's senior-recruiter dog — carry the membership program. Every asset shown below is real production media from goettl.com.

Fourteen inline SVG icons sized for trades-context UI — phone (the most-clicked element on the site), service-category glyphs (snowflake / flame / wrench / droplet), trust glyphs (shield / star / check), and the four social platforms Goettl publishes to. The signature long-arrow leads the row. Fill is currentColor so each glyph inherits the surrounding text color.

Goettl's quietest visual signature — a 45° alternating navy + red stripe pattern used as a service ribbon. Three variants (thin, default, fat) and a couple of solid solo bands. Reads as a service ribbon, not as a flag — never use as a literal flag stripe. Use as a section-divider punctuation, a hero corner accent, or a top/bottom rule on a CTA band.

Every token is a CSS custom property on :root. Reference by var() — never hardcode hex in a component.

See the system applied across three real Goettl landing pages.