00 — START HERE: Homepage
This is the setup and orientation document for the Homepage Kit. Read this to understand what it is, what it does, what files it needs, and how to use it.
What This Is
This kit produces a complete, branded HTML homepage for a root domain. The homepage introduces the brand, shows offers, establishes authority, and routes visitors to the right next action. It is not an offer page (one offer, one action) — it is the front door that presents everything at once and lets the visitor choose.
Audience: Warm and cold traffic arriving at the root domain — prospects, referrals, anyone who Googled you. Format: Single HTML file, self-contained (inline styles, Google Fonts via CDN, no external CSS/JS dependencies). Lifecycle: Living document — updated when offers change, testimonials rotate, or events launch.
Operating Modes
| Mode | Trigger | What It Produces |
|---|---|---|
| Mode 1 — Build | New brand needs a homepage, or a full rebuild is warranted | Complete HTML homepage file |
| Mode 2 — Improve This Kit | QC surfaced issues, manual changes were made, or the kit needs to do more | Updated kit files (golden example, output skill, quality) |
| Mode 3 — Update Content | Offer details changed, new testimonials, event dates shifted, photo updated | Updated HTML with content swaps — structure stays the same |
Mode 1 — Build
When to run: You have a brand with defined offers, at least one testimonial, brand references, and a photo. Follow the output skill (file 05) from Step 1 through delivery.
Before building, confirm understanding of inputs and plan: "Here is what I am going to build. Here are the inputs I am working from. Does this match your intent, or am I missing something?"
Do not start production until confirmed.
Mode 2 — Improve This Kit
The self-improvement loop. After running this kit:
- Did I change anything in the output by hand? → Update golden example + output skill
- Did QC miss something I caught? → Update quality checklist
- Should the kit do something it doesn't? → Update output skill
Mode 3 — Update Content
The most frequent mode. Swap offer details, testimonials, event dates, or CTAs without rebuilding the page. The section architecture stays fixed — only content within sections changes.
What This Does NOT Do
- Does not produce single-offer pages (that is the offer page kit)
- Does not produce landing pages for paid traffic (those are campaign assets with different architecture)
- Does not include scroll-reveal animations or JavaScript-driven interactivity (inline styles only, no JS)
- Does not use CSS
var()— all values hardcoded as hex for Convertri compatibility - Does not create the brand system — it consumes existing brand references (visual-style, voice, copy-qc)
The Section Architecture
Every homepage has these sections, in this order. Each section has one job.
| # | Section | Job |
|---|---|---|
| 1 | Header | Logo + nav (anchor links) + CTA button. Sticky. |
| 2 | Hero | Who you serve + primary value + CTA. Two-column: main copy + side panel preview. |
| 3 | Problem/Pattern | Validate their situation — name the pattern they are stuck inside. |
| 4 | Featured Product | Free or low-ticket entry point (skill, tool, download). Show what it does + sample output. |
| 5 | Paid Offer | Event, program, or service. Logistics grid (when, format, price, what you keep). |
| 6 | About | Hero photo treatment (full-bleed background image with gradient overlay + bio copy). |
| 7 | Proof | Testimonial(s) with attribution. Context disclaimer for advisory-sourced proof. |
| 8 | Pull Quote | Single testimonial on accent background. Emotional beat between proof and CTA. |
| 9 | Bottom CTA | Repeat primary CTA. Gradient background. |
| 10 | Footer | Meta disclaimer, testimonial context, brand attribution, contact, social links, legal links. |
Brand Variants
This kit supports two brand systems. The output skill documents both.
| Element | CYP / Practice Builders | AOS |
|---|---|---|
| Primary background | Deep Teal #0f2d3e | Charcoal #1a1a1a |
| Secondary background | Slate Teal #3e666e | Deep Black #111111 |
| Light background | Cream #f1ede6 | Cream #f5f4f0 |
| Heading font | Fraunces (serif) | Cormorant Garamond (serif) |
| Body font | Montserrat (sans-serif) | Inter (sans-serif) |
| Gold accent | #b79d64 (shared) | #b79d64 (shared) |
| Tone | Warm Professional | Dark Authority |
File Inventory
| # | File | What It Is |
|---|---|---|
| 00 | 00-homepage-start-here.md | This file — orientation, modes, section architecture |
| 01 | 01-homepage-context.md | Required inputs, validation rules, brand variant selection |
| 02 | 02-homepage-terminology.md | Locked vocabulary — what terms mean in this kit |
| 03 | 03-homepage-golden-example.html | Reference output — the Practice Builders homepage |
| 04 | 04-homepage-quality.md | QC checklist — 100-point weighted, 90 threshold |
| 05 | 05-homepage-output-skill.md | The production skill — how to build a homepage |
Total: 6 files.
Relationship to Other Kits
| Kit | Relationship |
|---|---|
| Offer Page | Homepage links TO offer pages. Homepage shows the offer summary; the offer page closes the sale. Do not replicate offer page depth on the homepage. |
| Skill Delivery Page | Homepage Featured Product section links to the skill delivery page. Different architecture (skill delivery is a download page, not a homepage section). |
| AOS Interactive Narrative | Homepage may link to articles. No architectural dependency. |
| Kit Builder | This kit was produced by the Kit Builder (Mode 1). Improvements flow through Mode 2. |
The Self-Improvement Loop
Build homepage → QC the output → Compare to golden example
↓
QC passes → Ship it. Done.
↓
QC fails OR you make manual changes → Mode 2
↓
Update golden example (if output changed)
Update output skill (if process needs to change)
Update quality checklist (if QC missed something)
↓
Next build is better.After every build, ask:
- Did I change anything in the output by hand? → If yes, Mode 2.
- Did QC miss something I caught? → If yes, Mode 2.
- Is there something the kit should do that it doesn't? → If yes, Mode 2.
File Location
advisory-os-vault/content/frameworks/kit-homepage/
00-homepage-start-here.md (this file)
01-homepage-context.md
02-homepage-terminology.md
03-homepage-golden-example.html
04-homepage-quality.md
05-homepage-output-skill.md