Standard Operating Procedure: Marketing Web Design Standard

1.0 Purpose

To define the visual language and user experience standards for the HWB digital presence. This ensures that every page transition and component reinforces HWB’s "Industrial Authority" brand.

2.0 Scope

Covers the design and layout of all public-facing pages, including Home, Services, and specialized landing pages.

3.0 Universal Mandates (2026 Baseline)

1. Physical Truth: Reference absolute server paths for all CSS and asset files (static/).
2. Unified Cockpit: All new designs must integrate the Tier 1 Utility Bar and Mega Menu.
3. No Synthetic Logic: Visual components must map 1-to-1 to real backend routes.

4.0 The "Material Depth" Standard

• Pill Buttons: 50px radius for public CTAs.
• Centered Hero: Max-width 1000px for high-authority headlines.
• 4-Column Grid: Balanced distribution for service and value cards.
• Logo Logic: 28% Bisection Merge animation on the About Page.

5.0 Procedure

1. Staging: Place all generative images/videos in /static/gen_ai_staging/.
2. Review: CEO must approve all visual assets before deployment.
3. Hardening: Wrap all components in "Technical Identity Cards" within the documentation.

6.0 Verification (Zero-Defect Check)

• Page looks 100% identical to the production Source of Truth.
• Buttons lead to the correct Lead Pipeline route (/get-quote).
• Mobile responsive views follow the SigmaQuality™ layout.

7.0 Notes and Cautions

8.0 Revision History