hermes-config/skills/.archive/small-business-website/references/blueprint-template.md

Website Blueprint Template

Use this format when designing a website before building. Write the blueprint first, then build from it.

---

Business Context

• Client: [name]
• Business: [type — HVAC, handyman, plumbing, etc.]
• USPs: [2-4 unique selling propositions — 24/7, family-owned, flat-rate, fast response]
• Service Areas: [city list]

URL Structure

/                         → Homepage
/service-a                → Service page A
/service-a/landing        → Standalone landing page (for ads)
/service-b                → Service page B
/contact                  → Contact / Quote Request

Technology

• Static HTML/CSS/JS — no backend
• Form submissions via Web3Forms (free tier)
• No frameworks, no build step
• System font stack, CSS custom properties

---

Per-Page Blueprint

For each page, list sections top-to-bottom with:

• Section name
• Visual elements (icons, photos, layout)
• Copy and headlines (with SEO keywords)
• CTAs (buttons, phone links)
• Psychology notes (what the visitor feels, what they need to see)

Global Header

Layout: Logo | Nav links | Phone | CTA button
Mobile: Logo | Hamburger + sticky tap-to-call bar below

Global Footer

Layout: Brand | Service links | Contact | Service areas
SEO: All service area cities in footer on every page

Page: [Name]

Section 1: Hero

• Headline: [H1 with primary keyword + city]
• Subcopy: [1-2 lines]
• CTAs: [primary CTA, secondary CTA]
• Psychology: [what the visitor is thinking]

Section 2: [Name]

• ...

[Repeat for all sections]

---

Color Palette

Role	Color	Usage
Primary	hex	primary CTAs, brand elements
Secondary	hex	secondary CTAs
Emergency	hex	urgency CTAs if applicable
Dark	hex	body text, dark sections
Light	hex	page background

Implementation Priority

1. Global shell (header, footer, CSS, JS)
2. [Highest-conversion page]
3. [Contact form]
4. [Homepage]
5. [Remaining service pages]
6. Polish (schema, meta, images)