Offer Page Kit — Start Here
What This Kit Does
This kit produces complete, branded HTML offer pages for Advisory OS products and services. An offer page presents one offer to warm traffic and drives one action — either a purchase or a booking.
Every page built through this kit follows the same production path: inputs extraction → page generation → QC validation → visual verification.
Two Page Types
| Type | CTA | When to Build |
|---|---|---|
| Purchase Page | "Get Instant Access — $[price]" (checkout link) | Self-serve products, low-ticket offers, digital tools |
| Booking Page | "Book a [Diagnostic/Call]" (Calendly link) | Services, engagements, anything requiring a conversation first |
The section architecture is the same for both. The CTA, price framing, and distinction section adapt to the type.
What It Produces
A single HTML file. Named [offer-name]-v[n].html. Self-contained — Google Fonts loaded via CDN, no other external dependencies.
The page uses the AOS design system: Cormorant Garamond + Inter fonts, charcoal/cream/gold color palette, gold scrollbar, hover states with translateY(-4px), responsive design with 4 breakpoints.
The 13-Section Architecture
Every page has these sections, in this order. Each section has one job.
| # | Section | Job |
|---|---|---|
| 1 | Header | Logo + primary CTA button (escape hatch for ready buyers) |
| 2 | Hero | Who it's for + What they get + CTA |
| 3 | Problem | Validate their situation — what they've tried, why it hasn't worked |
| 4 | Distinction | Justify the price — what this is vs. what it's not |
| 5 | How It Works | Show the mechanism or framework with real examples |
| 6 | Time Investment | What it costs THEM in hours (services only — omit for self-serve products) |
| 7 | What You Get | Deliverables list |
| 8 | Who It's For | Qualification — help them self-select in or out |
| 9 | Proof | Featured testimonial with pull-quote + supporting |
| 10 | Investment | Price, includes, CTA |
| 11 | FAQ | Objection handling (2x2 or 2x4 grid) |
| 12 | Final CTA | Repeat primary CTA |
| 13 | Footer | Links, copyright, disclaimers |
Section 6 (Time Investment) is only used for service pages where the buyer's time commitment matters. Omit for self-serve products.
Design System Quick Reference
| Element | Value |
|---|---|
| Headings font | Cormorant Garamond, serif (weight 400) |
| Body font | Inter, sans-serif (weights 300, 400, 500, 600) |
| Gold | #b79d64 (accents, CTAs, borders, active states) |
| Gold Light | #c4aa74 (hover states) |
| Charcoal | #1a1a1a (dark backgrounds, text) |
| Deep Charcoal | #0f0f0f (gradients) |
| Cream | #f9f7f4 (light backgrounds) |
| Off-White | #faf9f7 (cards, alternating sections) |
| Stone | #8a8680 (muted text, inactive states) |
| Slate Blue | #4a5a6a (body text) |
| Gold scrollbar | Required on every page |
| Card hover | translateY(-4px) + box-shadow |
| Breakpoints | 1024px, 768px, 600px, 480px |
Technical Rules
These break the page if violated (particularly on Convertri):
- No CSS variables in final Convertri output — Every color hardcoded as hex. CSS variables are fine for development/preview but must be replaced for Convertri deployment.
- No mailto links — Use Calendly or checkout links only.
- Explicit text alignment —
text-align: lefton all content sections. - Gold scrollbar styles — Required in every page.
File Inventory
| File | Purpose | When to Use |
|---|---|---|
00-offer-page-start-here.md | Orientation — page types, section architecture, design system | Start here every time |
01-offer-page-context.md | Required inputs and validation rules | Before every build — complete inputs before opening the build skill |
02-offer-page-terminology.md | Locked vocabulary for this kit | Reference when writing or reviewing any page |
03-offer-page-golden-example.html | Golden example — Deploy Sprint page (booking type) | Study before building any page |
04-offer-page-quality.md | QC checklist — 42 items, weighted scoring | Run after every build |
05-offer-page-build-skill.md | Build workflow — from inputs through generation and validation | Follow for every build |
06-offer-page-template.html | Convertri-ready HTML template with section annotations | Reference during builds |
07-offer-page-workflow.html | Master workflow with process flow diagram | Reference for production pipeline |
Relationship to Other Kits
Campaign Production System: Offer pages are one output in the campaign pipeline. The campaign workflow determines when a page is needed and what inputs are available.
Brand Kit: The design system values (colors, fonts, spacing) are drawn from the AOS brand kit. This kit applies them to offer page production.
business-aos (Connected Repo) — Required Reference:
Every offer page build must reference these files from the connected business-aos repo. Organized by category — load what you need for each section.
Core (Load Before Writing Any Copy)
| File | What It Provides | Informs |
|---|---|---|
business-aos/reference/core/voice.md | Brand vocabulary, tone, cadence, core phrases, quality test | Every section — highest-priority copy reference |
business-aos/reference/core/audience.md | Who buys, their constraints, their language | Hero, Problem, Who It's For |
business-aos/reference/core/offer.md | Brand thesis, multi-offer positioning umbrella | Distinction, Investment, FAQ |
business-aos/reference/core/ip-inventory.md | All IP — Communication Optimizer (2019) + Advisory OS methodology | How It Works, What You Get (framework lineage) |
Proof (Load When Writing Sections 5, 9, 11)
| File | What It Provides | Informs |
|---|---|---|
business-aos/reference/proof/testimonials.md | 5 testimonials with outcomes, sources, offer tags | Proof section — pull-quotes, transformation arcs |
business-aos/reference/proof/case-studies/ | Anonymized engagement arcs | How It Works examples, FAQ objection handling |
business-aos/reference/proof/angles/ | 5 messaging entry points (Subtract/Add, Proof Gap, etc.) | Hero headline, Problem framing, Distinction |
Brand (Load for Design + Copy QC)
| File | What It Provides | Informs |
|---|---|---|
business-aos/reference/brand/visual-style.md | Full design system — colors, typography, layout rules, image guidelines | All visual decisions, section styling |
business-aos/reference/brand/copy-qc.md | 11 AI pattern checks (P1/P2/P3 severity) | Step 4 Copy QC — mandatory gate before validation |
Domain (Load for Positioning + Pricing)
| File | What It Provides | Informs |
|---|---|---|
business-aos/reference/domain/product-ladder.md | Full product ladder, cross-sell flow, offer relationships | Distinction, Investment, FAQ (where this offer sits) |
business-aos/reference/offers/[offer]/offer.md | Offer-specific details — price, timeline, deliverables, positioning | Hero, What You Get, Investment, Who It's For |
Priority order: Voice is the highest-priority reference — it determines what words to use, what to avoid, and the quality test every line must pass. The copy QC file catches AI-generated patterns that undermine credibility. Both are mandatory gates in the build workflow (see Step 4 in 05-offer-page-build-skill.md).
Gold Standard Reference
The golden example is the Deploy Sprint v3 page — a $3,500 service with "Book a Systems Diagnostic" CTA. It demonstrates all 13 sections, interactive elements (sprint timeline click-to-reveal, example tabs), and the full responsive design. It is a styling and structure reference, not a content source.
When building a purchase page (like a low-ticket product), adapt the CTA pattern, distinction framing, and investment section accordingly. The visual system stays the same.