05 — OUTPUT SKILL: Homepage

Scope

Produces: A complete, self-contained HTML homepage for a root domain. Audience: Warm and cold traffic — prospects, referrals, organic visitors. Filename: homepage-[brandname]-v[n].html Lifecycle: Living document — updated when offers, proof, or events change.

Required Inputs

1. Brand variant — cyp or aos (determines palette, fonts, tone)
2. Brand name — consumer-facing name (e.g., "Practice Builders")
3. Tagline — short descriptor for meta and header
4. Domain URL — root domain the homepage lives on
5. Owner name — person behind the brand
6. Owner photo URL — CDN-hosted image for about hero background
7. Logo URL — CDN-hosted logo for header
8. Hero headline — H1 text
9. Hero subheadline — supporting paragraph(s)
10. Target audience descriptor — eyebrow text (e.g., "For Consultants, CPAs & Advisors")
11. Featured product — name, URL, description, sample output (4-5 bullets)
12. Paid offer — name, URL, description, logistics (when, format, price, what you keep)
13. Pattern/Problem copy — 2-3 paragraphs naming the audience's situation
14. About copy — 2-3 paragraphs of bio
15. Testimonial(s) — at least 1 with quote, name, title, company
16. Contact email — for footer
17. Social links — LinkedIn, Substack, etc. (optional)
18. Legal page URLs — privacy, terms, disclaimer (optional)

Content Rules

1. Zero internal acronyms in visible text. Spell out every product name, brand name, and framework name. "Client Intelligence Brief" not "CIB."
2. Zero forbidden vocabulary. No leverage, synergy, coaching, mindset, journey, game-changer, crush it, level up, revolutionary, groundbreaking.
3. Problem section validates, never lectures. Name the pattern. Do not say "you need to" or "the problem is you." The reader should nod in recognition, not feel scolded.
4. About section states what the person does, not a credential list. Lead with the pattern they solve and how long they have been doing it. Credentials are implied by specificity.
5. Featured product shows enough to click, not enough to buy. The delivery page closes the conversion. The homepage section creates curiosity and shows a sample.
6. Paid offer shows logistics, not the full pitch. The offer page handles objections, framework details, and the full case. The homepage section shows: what, when, how much, what you walk away with.
7. Pull quote stands alone. The single testimonial on the accent background must be powerful without context. Choose the most emotionally resonant quote, not the most specific.
8. Footer is brand-neutral and Meta-compliant. No marketing copy in the footer. Disclaimers, attribution, contact, legal links only.
9. Every CTA button uses the same visual treatment. Gold background (#b79d64), dark text (primary background color of the variant), 700 weight, 0.9rem, 4px border-radius, 1rem 2rem padding.
10. Non-breaking spaces before em dashes and at line-break-prone word boundaries. Use   to prevent orphans and awkward breaks.
11. HTML entities for special characters. Use — ’ “ ” – × · — never raw unicode.

Brand Variant Reference

CYP / Practice Builders

COLORS
  Primary background:    #0f2d3e (Deep Teal)
  Secondary/gradient:    #3e666e (Slate Teal)
  Light sections:        #f1ede6 (Cream)
  Alternate light:       #f7f5f0 (Off White)
  Text on dark:          #f1ede6 (Cream)
  Text on light:         #0f2d3e or #3e666e
  Muted text on light:   #6b5d3e
  Secondary text:        #64748b
  Gold accent:           #b79d64
  Gold dark:             #9d8556

FONTS
  Heading:  'Fraunces', serif (weights 400, 600, 700, 800)
  Body:     'Montserrat', sans-serif (weights 300, 400, 500, 600, 700, 800)

GOOGLE FONTS
  <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,400;0,600;0,700;0,800;1,400&family=Montserrat:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">

HERO GRADIENT
  background: linear-gradient(135deg, #0f2d3e 0%, #3e666e 100%)

SCROLLBAR
  track: #0f2d3e
  thumb: #b79d64
  thumb hover: #9d8556

AOS (Advisory OS)

COLORS
  Primary background:    #1a1a1a (Charcoal)
  Secondary/gradient:    #111111 (Deep Black)
  Light sections:        #f5f4f0 (Cream)
  Alternate light:       #faf9f7 (Off White)
  Text on dark:          #ffffff or #f5f4f0
  Text on light:         #1a1a1a
  Muted text:            #999999
  Gold accent:           #b79d64
  Gold light:            #d4b87a (hover)
  Gold dark:             #8a7548

FONTS
  Heading:  'Cormorant Garamond', serif (weights 400, 600, 700)
  Body:     'Inter', sans-serif (weights 300, 400, 500, 600)

GOOGLE FONTS
  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">

HERO GRADIENT
  background: linear-gradient(135deg, #1a1a1a 0%, #111111 100%)

SCROLLBAR
  track: #1a1a1a
  thumb: #b79d64
  thumb hover: #d4b87a

Production Steps

Step 1: Validate Inputs

Confirm all 18 required inputs are present. If any are missing, ask before building. Do not guess at copy, URLs, or brand details.

Load these reference files before writing any copy:

• business-aos/reference/core/voice.md — vocabulary, tone, cadence
• business-aos/reference/brand/visual-style-cyp.md (CYP) or visual-style.md (AOS)
• business-aos/reference/brand/copy-qc.md — AI pattern detection

Step 2: Build the HTML

Build sections in order. Use the golden example (03-homepage-golden-example.html) as the structural reference.

Document structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- meta charset, viewport, title, description, OG tags -->
    <!-- Google Fonts preconnect + link -->
    <style>
        /* Scrollbar styles */
        /* About hero class-based CSS (all breakpoints) */
        /* Responsive media queries (968px, 840px, 640px, 480px) */
    </style>
</head>
<body style="margin: 0; padding: 0; font-family: '{{BODY_FONT}}', sans-serif; color: {{PRIMARY_BG}}; background: {{CREAM}}; line-height: 1.6; overflow-x: hidden;">
    <!-- HEADER -->
    <!-- HERO -->
    <!-- THE PATTERN -->
    <!-- FEATURED PRODUCT -->
    <!-- PAID OFFER -->
    <!-- ABOUT -->
    <!-- PROOF -->
    <!-- PULL QUOTE -->
    <!-- BOTTOM CTA -->
    <!-- FOOTER -->
</body>
</html>

Step 3: Section-by-Section Build

HEADER

<!-- HEADER -->
<header style="background: {{PRIMARY_BG}}; padding: 1.5rem 5%; position: sticky; top: 0; z-index: 100; border-bottom: 3px solid #b79d64;">
    <div style="max-width: 1400px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem;">
        <a href="{{DOMAIN_URL}}" style="display: flex; align-items: center; gap: 1rem; text-decoration: none;">
            <img src="{{LOGO_URL}}" alt="{{BRAND_NAME}}" style="height: 45px;">
            <div>
                <div style="font-family: '{{HEADING_FONT}}', serif; font-size: 1.5rem; color: {{TEXT_ON_DARK}}; font-weight: 700; line-height: 1;">{{BRAND_NAME}}</div>
                <div style="font-size: 0.7rem; color: #b79d64; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; margin-top: 0.35rem;">{{OWNER_NAME}}</div>
            </div>
        </a>
        <nav>
            <a href="#{{FEATURED_ANCHOR}}" style="color: {{TEXT_ON_DARK}}; text-decoration: none; margin-left: 2rem; font-weight: 500; font-size: 0.95rem;">{{FEATURED_NAV_LABEL}}</a>
            <a href="#{{PAID_ANCHOR}}" style="color: {{TEXT_ON_DARK}}; text-decoration: none; margin-left: 2rem; font-weight: 500; font-size: 0.95rem;">{{PAID_NAV_LABEL}}</a>
            <a href="#about" style="color: {{TEXT_ON_DARK}}; text-decoration: none; margin-left: 2rem; font-weight: 500; font-size: 0.95rem;">About</a>
        </nav>
        <a href="{{FEATURED_PRODUCT_URL}}" style="color: {{PRIMARY_BG}}; background: #b79d64; text-decoration: none; font-weight: 700; font-size: 0.85rem; padding: 0.75rem 1.25rem; border-radius: 4px;">{{HEADER_CTA_TEXT}}</a>
    </div>
</header>

Header responsive (in