master theme playbook

Technical Operating Manual v1.0

Master Theme Playbook

The permanent source of truth for the Timberwolf Construction ecosystem. This manual defines the WHY, the HOW, and the WHAT behind every pixel and line of code.

Global Design Tokens

Purpose

To establish a consistent visual grammar. These tokens solve the problem of “design drift”—the tendency for a site to become visually fragmented over time as new contributors add content without adhering to the original system.

Psychology

Trust through Consistency: Human brains interpret visual consistency as professional reliability. When colors, fonts, and spacing are predictable, cognitive load decreases, allowing the user to focus on the message (authority) rather than the interface.

The Evergreen Palette: Using deep greens and gold triggers associations with nature, durability, and premium craftsmanship—essential for a high-ticket construction brand.

Business Goals

Establish Timberwolf as the “Lexus of Roofing” in New Mexico. Efficiency in development by using CSS variables instead of hard-coded values.

Color Tokens

Primary Green

Gold Accent

Evergreen

Warm White

WordPress Implementation

–td-color-primary: #1E3932;
–td-color-accent: #C5A059;
–td-font-body: ‘DM Sans’, sans-serif;
Mentor Note: Never use hex codes directly in CSS or block settings. Always map to these CSS variables. This allows us to update the entire brand identity in 5 seconds by changing the :root variables.
Map colors to Theme.json
Define fluid typography scales
Register custom font faces

Global Header System

Purpose

To provide instant contact access and clear hierarchical navigation. It identifies the brand immediately and offers “escape hatches” (CTA) from every page.

Conversion Strategy

The “Free Inspection” button in the top right is the primary macro-conversion trigger. It is the only high-contrast element in the header, utilizing the gold accent to command immediate attention.

SEO Considerations

Semantic Nav: Uses <nav> and <ul> for screen readers. Internal linking hierarchy follows the hub-and-spoke model where “Services” links to high-value category pages.

The “F-Pattern” Rule: Users scan in an F-pattern. We place the logo on the left, the primary contact in the top center/right, and the CTA at the far right “end point” of the scan.
Sticky behavior enabled for desktop
Mobile toggle accessibility tested
Phone link uses tel: protocol

Global CTA & Form System

Psychology

Risk Reduction: Instead of “Submit” or “Contact Us,” we use “Get My Free Inspection.” This frames the action as something the user *gains* (an inspection) rather than a task they *perform* (filling a form).

UX Goals

Minimize friction. Forms should never have more than 5 fields unless it’s the detailed “Insurance Claim Audit” tool. Mobile-first keyboard triggers (numeric pad for phones) are mandatory.

Primary Button Style

Common Mistakes

Mistake: Adding a “Clear Form” button. This leads to accidental deletions and user frustration.

Mistake: Using “Placeholder text” instead of proper labels. Screen readers cannot always read placeholders, and users forget what the field was once they start typing.

Reusable Implementation Checklist:

Verify “Success Message” tone matches brand
Test GTM Event Tracking on click
Validate WCAG 2.2 contrast on gold buttons

Performance & Technical

Core Web Vitals

LCP (Largest Contentful Paint): Heroes must use optimized WebP images with explicit width/height to prevent layout shifts. Above-the-fold CSS must be inlined or prioritized.

Accessibility (WCAG 2.2 AA)

Interactive elements must have a minimum touch target of 44x44px. Every image MUST have alt text that describes the *purpose* of the image, not just the content (e.g., “Technician installing Timberwolf flashing” rather than “man on roof”).

Mentor Note on SEO: We do not build for Google. We build for the *Entities* Google recognizes. Every Service page must link to its corresponding City page to create a local authority loop.