# Genz-Ryan — Design System Spec > Source: genzryan.com (live site, captured 2026-05-11) > Stack: WordPress · custom theme `wp-content/themes/genzryan-theme/` · Bootstrap 5 scaffolding · "Uniform" proprietary type family · Gravity Forms · Instagram Feed Pro > Built by Hook Agency / in-house (Twin Cities marketing). All tokens grepped from the live theme `main.min.css` (`?ver=1778261657`). > Asset completeness: **complete** (canonical 4-color palette in theme CSS, SVG logo, real family + tech photography, branded Twin Cities map illustration, "I Love These Guys" signature graphic). --- ## At-a-glance - **Business**: Genz-Ryan — Twin Cities multi-trade home services (HVAC + plumbing + electrical) - **What they actually do**: 1. **Four-trade home services** — heating, cooling, plumbing, electrical. Each runs as a co-equal service line; the brand is *deliberately* not specialist. 2. **Same-day install + repair** — the load-bearing speed promise: *"Same Day Service & Installation Guaranteed."* 3. **HomePulse** — proprietary maintenance-membership program (the SaaS-y up-sell layer that newer trades players have). 4. **Tune-ups + new-system installs + emergency repair** — three customer entry-paths per service line. - **Geography**: Twin Cities metro (Minneapolis–St. Paul, Minnesota) and surrounding communities. **Showroom: 2200 West Highway 13, Suite 204, Burnsville, MN 55337.** The geography is core to the brand identity — they lean into "From one Minnesota family to another." - **Phone**: (612) 491-5496 - **Founded**: 1950 — 75 years family-owned-and-operated. The heritage is a load-bearing trust anchor used in nav, hero, and every footer. - **Audience tracks (single-track residential)**: B2C residential homeowner. Unlike `no-limit-turf` (3 tracks) or `master-craftsmen` (dealer-led), Genz-Ryan is **single-audience**. Commercial is not promoted. - **Voice anchors (verbatim from the live site)**: - *"Family Owned & Operated Since 1950"* - *"Same Day Service & Installation Guaranteed"* - *"We've got your back when the unexpected happens"* - *"I love those guys!"* (verbatim customer review elevated to brand graphic — see core assets) - *"From one Minnesota family to another"* - **Register**: **Mid-priced, heritage-confident, family-friendly Midwestern**. NOT bargain ("we beat anyone"), NOT luxury ("white-glove"), NOT mascot-aggressive (Goettl/Pink-Plumber territory). The closest tonal cousin is a 75-year-old hardware-store-meets-modern-home-services hybrid. Tri-color (red+blue+gold) keeps the patriotic energy without slipping into mascot-trades cliché. --- ## 🎯 Core assets (one-class citizens) ### Logo - **File**: `assets/genz-ryan-brand/logo.svg` (SVG vector, 20 KB, the canonical 2025-09 refresh) - **Composition**: stacked wordmark — "GENZ-RYAN" set in a tall geometric sans with the integrated "EST. 1950" trust line below; red `#c92a39` on white. No separate iconic mark. - **Usage scenarios**: header (max 60-72px height, never recolored), footer (light-on-dark inversion), business card, vehicle wrap. - **Variants needed for sprinkle**: a dark-on-light + light-on-dark + favicon-mark + iconic glyph. **TODO when a real client engagement starts**: source white/light-bg variants and an iconic glyph from the client. - **Honest framing**: SVG vector source available, no resolution caveats. Logo follows "have-it = use-it." - **Forbidden**: never recolor the wordmark (red is part of identity); never stretch; never lay over busy patterns without solid scrim. ### Signature graphic: "I Love These Guys" The most distinctive non-logo asset in the brand. A verbatim customer-review tagline (`i love these guys!`) stylized as an **SVG script graphic** — used as a brand-voice device wherever testimonials and trust anchors appear. - **Gold variant**: `assets/genz-ryan-brand/i-love-these-guys-gold.svg` (6.7 KB) — for dark/photo backgrounds - **Dark variant**: `assets/genz-ryan-brand/i-love-these-guys.svg` (11 KB) — for light backgrounds - **Why it matters**: it converts user-generated content into a brand mark. Most trades brands invent taglines top-down ("the punctual plumber"). Genz-Ryan elevated a real customer line into a graphic device — 75 years of legitimacy compressed into 4 words. **Reserve for trust-anchor placements only** — over-using dilutes it. ### Promise badge - **File**: `assets/genz-ryan-brand/promise-badge.svg` (12 KB) - **Use**: guarantee/promise blocks. Circular seal — pair with the heritage line. ### Photography + illustration system (curated per 5-10-2-8, scored) The brand is **illustration-rich** in a way most trades sites are not — the Twin Cities map + crew overlay + service-van illustration system is its visual signature alongside real photography. We capture both. | Asset | Type | Resolution | Score | Role | |---|---|---|---|---| | `logo.svg` | SVG | vector | **10/10** | Header / footer (have-it = use-it) | | `ryan-family.png` | Photo | ~1200×1200 | **9/10** | "Family Owned Since 1950" anchor section | | `hero-techs.jpg` | Photo | ~1600×900 | **9/10** | Homepage hero — multi-trade team shot | | `tech-by-van.jpg` | Photo | 1024×768 | **8.5/10** | Service-line landing hero — tech with branded van | | `mpls-experts.jpg` | Photo | 1024×683 | **8.5/10** | About-page / heritage page hero | | `twin-cities-map.png` | Illustration | ~1600×900 | **9/10** | Service-area visualization (signature) | | `map-crew.png` | Illustration | ~1200×800 | **9/10** | Map overlay — crew + branded vans | | `service-van.png` | Illustration | ~800×500 | **9/10** | Service-van as cutout for hero/CTA bands | | `icon-heating.png`, `icon-cooling.png`, `icon-plumbing.png`, `icon-electrical.png` | Illustration | ~400×400 each | **8.5/10** | 4-trade service-tile system | | `step1.png` → `step5.png` | Illustration | ~300×300 each | **8/10** | Numbered 5-step process visualization | | `i-love-these-guys-gold.svg` / `i-love-these-guys.svg` | SVG | vector | **10/10** | Signature script graphic (see above) | | `promise-badge.svg` | SVG | vector | **9/10** | Guarantee seal | | `coupon-red.svg` | SVG | vector | **8.5/10** | Coupon/promo blocks | **Total**: 16 assets pulled, all ≥ 8/10. Honest framing: photography + illustrations are all from the live brand CDN, owned by Genz-Ryan or their long-term agency. Use freely within sprinkle. For client engagements, re-request high-res originals. --- ## 🎨 Color tokens (extracted verbatim from live `main.min.css`) Frequency-ranked palette from the live theme CSS: ``` #c92a39 (54×) → BRAND RED — primary CTA, logo color #196cb6 (37×) → BRAND BLUE — primary blue, headings on light #005289 (33×) → DEEP BLUE — emphasis, body header weight #434343 (31×) → INK GRAY — body copy #fad604 (24×) → GOLD ACCENT — signature ("I Love These Guys" gold) #1690d0 (18×) → LIGHT BLUE — link / hover #f4f4f4 (19×) → SURFACE GRAY — section panel ground #969696 (10×) → MUTED GRAY — meta, labels #6095b8 ( 5×) → MUTED TEAL — secondary blue lighten #b00c1c ( 2×) → DEEP RED — emphasis hover on red ``` → canonical token mapping in `_shared.css`: ``` /* PRIMARY RED */ --brand-red #c92a39 /* live theme red — primary CTA */ --brand-red-deep #b00c1c /* live deep red — hover */ --brand-red-soft #e04553 /* derived lighten — focus glow */ --brand-red-pale #fce5e7 /* derived pale — surface tint */ /* PRIMARY BLUE */ --brand-blue #196cb6 /* live theme blue — headings, secondary CTA */ --brand-blue-deep #005289 /* live deep blue — body header, footer */ --brand-blue-soft #1690d0 /* live light blue — link hover */ --brand-blue-pale #d2f0ff /* live pale blue — surface tint */ --brand-teal #6095b8 /* live muted teal — secondary accent */ /* SIGNATURE GOLD */ --gold #fad604 /* live gold — "I Love These Guys" + arrow accent */ --gold-deep #c8a803 /* derived darken — hover, text on light */ --gold-soft #fee685 /* derived lighten — surface glow */ --gold-pale #fff7cf /* derived pale — large background washes */ /* INK */ --ink #434343 /* live body text */ --ink-deep #212529 /* BS gray-900 — emphasis */ --ink-soft #545454 /* live mid */ --ink-mid #969696 /* live muted */ --ink-quiet #adb5bd /* BACKGROUNDS */ --bg #ffffff --bg-soft #f4f4f4 /* live surface gray */ --bg-warm #fff7cf /* derived gold-pale ground for value-prop bands */ --bg-cool #d2f0ff /* live pale blue — for blue-led panels */ --bg-dark #005289 /* deep blue ground for inverted sections */ --bg-deepest #212529 /* near-black ground for footer */ /* BORDER + RULE */ --border #e8e8eb /* live light border */ --border-mid #969696 --rule #212529 ``` **Signature gradients** (derive, not in source) — used for hero scrims and emphasis bands: ```css --grad-patriot: linear-gradient(135deg, #c92a39 0%, #196cb6 100%); /* red → blue */ --grad-warm-hero: linear-gradient(135deg, #fad604 0%, #c92a39 100%); /* gold → red — heritage feel */ --grad-hero-scrim: linear-gradient(180deg, rgba(0,82,137,0) 35%, rgba(0,82,137,0.55) 75%, rgba(33,37,41,0.85) 100%); ``` --- ## ✏️ Typography (proprietary "Uniform" — substituted for sprinkle) **Live brand uses Uniform** (Process Type Foundry / Pintassilgo Prints proprietary geometric sans) loaded with weights **300 / 400 / 500 / 600 / 700 / 800**: - `Uniform-Reg` → body - `Uniform-Bold` → headings (h1-h6 weight 800 baked in) - `Uniform-Black` → display emphasis **For sprinkle template we substitute Manrope** (open-source, geometric sans, weights 300-800 available, closest visual analog with same confidence-and-geometry character). Single-family discipline preserved — same as live brand. → canonical mapping: ``` --font-display 'Manrope', 'Uniform', system-ui, sans-serif --font-body 'Manrope', 'Uniform', system-ui, sans-serif --font-mono ui-monospace, SFMono-Regular, Menlo, Consolas, monospace ``` Live type scale (from theme CSS, desktop / mobile): | Token | Desktop | Mobile | Weight | Notes | |---|---|---|---|---| | h1 | **64px** (4rem) | 44px (2.75rem) | **800** | Display hero | | h2 | 52px (3.25rem) | 36px (2.25rem) | **800 + UPPERCASE** | Section heading | | h3 | 36px (2.25rem) | 30px (1.875rem) | **800** | Sub-section heading | | h4 | 30px (1.875rem) | 26px (1.625rem) | **800** | Card heading | | body-lg | 18px | 16px | 400 | Lede / intro paragraph | | body | 16px | 16px | 400 | Standard body | | meta | 14px | 14px | 500 | Eyebrow / label | **The defining typographic moves**: 1. **All headings at weight 800** — Manrope ExtraBold (Uniform-Bold in source). Very confident, no Light-display contrast. Brand has *no soft headings* — every header is bold. 2. **No serif anywhere** — pure single-family discipline, like Lato in `no-limit-turf` but with a geometric/Midwestern rather than landscape/horticultural character. 3. **Default Manrope tracking** at body sizes; tighten to **-0.015em** on H1/H2 at large sizes for display polish. 4. **Body color is `#434343`** (warm-dark gray) NOT pure `#212529` — softer Midwestern feel. --- ## 🏗️ Site-specific patterns (signature visual moves) These get baked into `_shared.css` from the start. ### 1. Tri-color CTA system (red / blue / gold) Most trades brands pick one accent. Genz-Ryan splits **three roles** with three colors: ```css .btn-red { background: #c92a39; color: #fff; } /* urgent — emergency, book now */ .btn-blue { background: #196cb6; color: #fff; } /* primary — service request, learn more */ .btn-gold { background: #fad604; color: #212529;} /* signature — "I Love These Guys" CTA bands */ ``` Hover states use the `-deep` variant. **3-way semantic system** is the rare move — preserve carefully. ### 2. "I Love These Guys" customer-quote-as-graphic See core assets. Use the gold variant on dark grounds (hero scrims, photo overlays). Use the dark variant in testimonial sections on light backgrounds. **Maximum once per page** — it's a hero-strength asset. ### 3. Twin Cities map illustration system Custom illustration of the Twin Cities metro with branded service vans + crew overlay. Used in the **Service Areas** section. Render as a stacked composite: - `twin-cities-map.png` as ground layer (~1600×900 PNG) - `map-crew.png` as foreground crew overlay - `service-van.png` as cutout for moving callouts (van driving across the map) For sprinkle scenarios where the client is in another metro, **swap with a local map illustration** — the *pattern* is "branded map with crew" not "Minneapolis specifically." ### 4. 5-step process visualization 5 numbered illustrated steps with a horizontal flow (`step1.png` → `step5.png`). Each step is a small illustration; horizontal layout on desktop, stacked vertically on mobile. The "process" section CSS hook in source is `section.process`. ### 5. 4-up service grid (heating / cooling / plumbing / electrical) Equal-weight 4-column grid with named PNG illustrations per service. Differs from competitor sites that pick a "lead service" — Genz-Ryan refuses to specialize visually. The 4 are co-equal. ### 6. Promise badge + heritage line pair Every trust block pairs the `promise-badge.svg` with the verbatim "Family Owned & Operated Since 1950" line. This is the highest-frequency trust anchor — appears in footer, About page hero, and at least one homepage band. ### 7. Coupon / promo system Branded coupon shape (`coupon-red.svg`) with serrated edge. Used in HVAC tune-up / install seasons. Reserve for actual offers — placeholder coupons read as filler. ### 8. Multi-color arrow system (red / blue / gold / black) The theme ships **four arrow color variants** as separate SVG sprites — used to signal CTA hierarchy: - `right-arrow-red.svg` → emergency / urgent - `right-arrow-blue.svg` → primary CTAs - `right-arrow-gold.svg` → signature accent CTAs (paired with "I Love These Guys") - `right-arrow-black.svg` → tertiary links ### 9. Heritage anchor: "Since 1950" embedded everywhere 75-year mark is in: logo, footer, hero, About page, every staff bio. **Genz-Ryan's age IS the trust signal.** A 5-year company replacing this with "Since 2020" loses the spell. For younger sprinkle clients: replace with a different trust anchor (license # / # of installs / reviews-count) — don't fake the year. ### 10. Customer-photo + testimonial pairing Real photos of customers + the technician who served them, paired with the verbatim review and a star rating. NOT stock photos. The "4.7★ / 8036 reviews" social-proof block at the top is load-bearing. --- ## 🚫 Forbidden / off-brand - ❌ **No purple, no neon teal, no AI-default-purple-to-pink** gradients. Palette is locked at red/blue/gold + grayscale. - ❌ **Never substitute gold with yellow-green-lime**. `#fad604` is warm-yellow-gold; lime drifts into "Pink Plumber" / "No Limit Turf" territory and loses Midwestern register. - ❌ **Never use Light or Regular weight for headings** — all h1-h6 are 800 in the live theme. Light-weight display drifts toward editorial/luxury, off-brand for trades. - ❌ **No emoji-as-icon, no mascot, no cartoon character**. The brand is photo + illustration system, not character-led (this distinguishes from Goettl / Pink Plumber / Benjamin Franklin franchise mascots). - ❌ **No "Since 1950" claim if the sprinkle client isn't 1950**. Replace truthfully — heritage line is verifiable or omitted. - ❌ **No "I love these guys" graphic on every page** — once per page max; it's the hero signature, not décor. - ❌ **No fake review count**. The 4.7★ / 8036 reviews is a real Genz-Ryan number; substitute the client's actual aggregate or omit. - ❌ **No tri-color overuse**. Each color has a role: red = urgent/emergency, blue = primary, gold = signature accent. Don't randomly assign. - ❌ **No stock photography**. Brand is real-team-led; stock breaks the "from one Minnesota family to another" promise. - ❌ **No serif anywhere**. Single-family Manrope discipline — no Fraunces, no Source Serif accent runs. --- ## ✅ Vibe / mood keywords (5) **Heritage-confident · multi-trade · tri-color · family-photo-led · Midwest-friendly** If a design choice doesn't land in 3+ of those buckets, it's drifting. --- ## 🪞 Position in the design-systems library Slots into the **Commercial / services** group, tag `data-tags="trades"`. Differentiated against the existing trades systems: | System | Anchor | Genz-Ryan differs by | |---|---|---| | `goettl` | Patriot-mascot HVAC | Photo + illustration (not mascot); tri-color (not red/blue/white-flag); 75-yr heritage anchor (not patriot-rhetoric) | | `horizon-fix` | Multi-trade sunrise optimistic | Heritage-confident not optimistic-can-do; tri-color (not single-warm-accent); illustrated map system; Midwestern register not generic-trades | | `no-limit-turf` | Single-trade supplier-direct | Multi-trade (4 service lines); illustration-rich (not photo-only); tri-color (not 2-color grass+chartreuse); residential-only (not 3-track) | | `master-craftsmen` | Authorized-dealer windows/doors | Family-owned-trade not dealer-network; multi-trade not specialist; in-house service van + crew (not manufacturer-led marks) | | `centimark` | Commercial B2B roofing | B2C residential-only; family-photo-led not corporate-blue-corporate; 4-trade not single-trade | **Best fit for**: **multi-generation family HVAC / plumbing / electrical / general home-services**, brands with **3+ co-equal service lines**, **regional Midwest / heritage-trade brands** with a **named family** at the center, brands that have **elevated a real customer quote** to brand-mark status. Also fits with adjustments: roofing-and-gutters family operations, garage-door-plus-fencing combos, pool-service + landscape combos, any **multi-trade regional brand with a 50+ year heritage** and a **family-owned story to lean on**.