Genz-Ryan · Design System Showcase

Red urgency. Blue trust. Gold signature.

A full kit-of-parts extracted from genzryan.com — real CSS tokens from the live WordPress theme, real family + tech photography, the branded Twin Cities map illustration, and the "I Love These Guys" customer-quote-as-graphic. Single-family Manrope typography (substituting proprietary Uniform) on a disciplined tri-color: red #c92a39, blue #196cb6, gold #fad604, deep blue #005289, warm-dark ink. The register is 75-year-old Twin Cities multi-trade family business — heritage-confident, photo-led, Midwestern.

Sourcegenzryan.com
TypeManrope 300–800
Red#c92a39
Blue#196cb6
Gold#fad604
Captured2026-05-11
Coverage4 trades · Twin Cities · Since 1950
Four doors into the system

Reference. Catalog. Demo. Source.

Each file does one job. Open the reference for the kitchen-sink, the catalog for every section pattern in Genz-Ryan's voice, the demo pages for full compositions, or the spec for the source-of-truth narrative.

01 · Reference

Design System

Every color, font, button, card, field-stripe, and component documented from the live theme's CSS. The kitchen-sink — everything you can build with.

Open the reference 02 · Catalog

Sections

Every section pattern from the universal catalog rendered in Genz-Ryan's voice — 4-trade service grid, Twin Cities map heritage, 5-step process, "I Love These Guys" trust block, coupon strip, multi-trade pricing.

Browse the catalog 03 · Demo

Pages

Full-page compositions: flagship homepage plus three service-line landings (heating, plumbing, electrical) — each composed only from _shared.css tokens and the catalog patterns.

See the pages 04 · Source

Brand Spec

The markdown source-of-truth: voice anchors verbatim from the live site, color tokens with semantic mapping, signature patterns, forbidden moves, and the five mood keywords. Read it before you change anything.

Read the spec
At a glance

What's in this kit.

One CSS file, one brand spec, ten HTML pages, sixteen brand assets. The CSS is the source of truth; the pages are the receipts.

Files in this kit

_shared.css All tokens, all components. Imports Manrope 300–800 from Google Fonts. Edit only here — the demo pages reference these classes.
brand-spec.md Source-of-truth narrative. Voice anchors, signature patterns, color extraction notes, forbidden moves, mood keywords. Read this first.
palettes.json Color tokens in machine-readable form. Four palettes: Tri-Tone canonical, Arctic blue-led, Heritage gold-led, Night Shift dark-mode.
index.html This page. System overview + at-a-glance.
design-system.html Token + component reference. Every color, font, button, card, and signature pattern visible.
sections.html Pattern catalog. Every reusable block rendered in Genz-Ryan's voice with real copy.
homepage.html Flagship homepage demo. Tri-color hero, 4-trade grid, Twin Cities heritage, 5-step process, "I Love These Guys" block, CTA band.
landing-1-heating.html Heating service landing. Furnace install + repair, tune-up pricing, 5-step process, FAQ, emergency CTA.
landing-2-plumbing.html Plumbing service landing. Water heater, drain & sewer, leak detection, pricing, master-plumber credentials.
landing-3-electrical.html Electrical service landing. Panels, EV chargers, generators, code-compliance, gold-accent CTA system.
pages.html Gallery picker linking to every page in this kit.
assets/genz-ryan-brand/ SVG logo, real family + tech photography from the live brand CDN, Twin Cities map illustration system, "I Love These Guys" graphic (gold + dark), promise badge, coupon graphic, 4 service-icon PNGs, 5-step process icons.

Quick characterizations

Vibe
Heritage-confident, photo-led, Midwestern family-trade. A "75-year hardware-store-meets-modern-home-services" register — not bargain, not luxury, not mascot-aggressive. The tri-color (red urgent / blue primary / gold signature) keeps patriotic energy without slipping into Goettl/Pink-Plumber mascot trades cliché.
Audience
Single-track B2C residential. Twin Cities metro homeowner. Unlike multi-track DS like no-limit-turf (3 audiences) or master-craftsmen (dealer-led), Genz-Ryan is one audience, four service lines.
Voice anchors (verbatim)
"Family Owned & Operated Since 1950."
"Same Day Service & Installation Guaranteed."
"We've got your back when the unexpected happens."
"I love those guys!"
"From one Minnesota family to another."
Forbidden
No purple gradients. No mascot, cartoon, hand-drawn illustration. No Light/Regular weight for headings — all h1-h6 are 800. No serif anywhere. No emoji-as-icon. No "Since 1950" if the sprinkle client isn't actually 1950. No tri-color overuse — each color has a role. No stock photography; the brand is real-team-led.
Mood keywords
Heritage-confident Multi-trade Tri-color Family-photo-led Midwest-friendly