Build Skill — Offer Page Production Workflow
How to Use This Skill
Follow this workflow in order for every offer page build. Do not skip the inputs validation. Building without complete inputs produces pages that guess at positioning, proof, or objection handling — and guessing is how pages fail to convert.
Step 1: Gather and Validate Inputs
Before building, confirm ALL required inputs are present. Use the checklist in 01-offer-page-context.md.
Load business-aos Reference Files
Before writing any copy, read the core files from the connected business-aos repo. Load proof, brand, and domain files as you reach the sections that need them.
Core (read before writing anything):
business-aos/reference/core/voice.md— Brand vocabulary, tone, cadence, quality test. Highest-priority copy reference.business-aos/reference/core/audience.md— Who buys, their constraints, their language. Informs Hero, Problem, Who It's For.business-aos/reference/core/offer.md— Brand thesis, multi-offer positioning. Informs Distinction, Investment, FAQ.business-aos/reference/core/ip-inventory.md— All IP and framework lineage. Informs How It Works, What You Get.
Proof (read before writing sections 5, 9, 11):
business-aos/reference/proof/testimonials.md— Testimonials with outcomes and pull-quotes. Informs Proof section.business-aos/reference/proof/case-studies/— Anonymized engagement arcs. Informs How It Works examples, FAQ.business-aos/reference/proof/angles/— 5 messaging entry points. Informs Hero headline, Problem framing.
Brand (read before building + before Copy QC):
business-aos/reference/brand/visual-style.md— Full design system — colors, typography, layout, image rules.business-aos/reference/brand/copy-qc.md— 11 AI pattern checks (P1/P2/P3). Required for Step 4.
Domain (read before writing Distinction, Investment, FAQ):
business-aos/reference/domain/product-ladder.md— Full product ladder, cross-sell flow, where this offer sits.business-aos/reference/offers/[offer]/offer.md— Offer-specific price, timeline, deliverables, positioning.
Required Input Categories
- Offer Architecture — name, price, timeline, what's included, what it's NOT
- Positioning — who it's for (3+), who it's NOT for (3+), primary objections (3+), key distinction
- Transformation Framework — symptom, upstream constraint, system/asset built, outcome
- Proof — at least one testimonial with specific outcome, pull-quote identified
- Funnel Context — where in buyer journey, what they already know, CTA + destination URL, CTA subtext
- Brand & Voice — design system confirmed, voice constraints, words to avoid
- Technical — target platform, CTA destination URL
If any input is missing, ask clarifying questions before proceeding. Do not build with gaps.
Step 2: Determine Page Type
| If the CTA is... | Then build a... |
|---|---|
| Purchase / checkout link | Purchase page — "Get Instant Access — $[price]" |
| Calendly / booking link | Booking page — "Book a [Diagnostic/Call]" |
This determines:
- CTA button text and destination
- Whether to include Section 6 (Time Investment) — only for services
- Distinction section framing (free vs. paid, or tool vs. system)
- Investment section layout (purchase = simpler, booking = more context)
Step 3: Build the Page
Architecture
Build sections in order. Each section has ONE job. Reference the golden example (03-offer-page-golden-example.html) for exact styling.
Section order:
- Header → 2. Hero → 3. Problem → 4. Distinction → 5. How It Works → 6. Time Investment (services only) → 7. What You Get → 8. Who It's For → 9. Proof → 10. Investment → 11. FAQ → 12. Final CTA → 13. Footer
Design System
Fonts: Cormorant Garamond (headings, weight 400) + Inter (body, weights 300/400/500/600). Load via Google Fonts CDN.
Color palette (use CSS variables for development, hardcode hex for Convertri):
- 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
Required elements:
- Gold scrollbar (webkit + Firefox)
- Card hover: transition 0.3s ease, translateY(-4px), box-shadow
- Section alternation: cream → off-white → charcoal → cream (visual rhythm)
- Responsive breakpoints: 1024px, 768px, 600px, 480px
Interactive Elements
Hover states (all cards):
transition: all 0.3s ease;
transform: translateY(-4px);
box-shadow: 0 8px 30px rgba(26, 26, 26, 0.08);Click states (tabs, timeline):
- Inactive: transparent/muted background, stone text
- Active: gold background, charcoal text
- Must reveal content (not cosmetic-only)
Click-to-reveal (timeline, process steps):
- Default: title + short description
- Active: title + short description + expanded detail (gold italic text)
Section-by-Section Build Notes
Hero: Two-column grid (1.1fr 0.9fr). Left = content (eyebrow, headline, subhead, CTA). Right = visual (timeline, process flow, or relevant interactive). Must pass 5-second test. → Reference: audience.md (who they are), angles/ (messaging entry points), offers/[offer]/offer.md (what they get)
Problem: Validate, don't lecture. Acknowledge what they've tried. Name what hasn't worked. Callout box with the real problem underneath. Use "stalled" not "stuck" (except "stuck in your head"). → Reference: audience.md (their constraints, language), angles/ (problem framing)
Distinction: Two-column grid. "Not This" card (cream background, stone border, muted) vs. "This" card (charcoal background, gold border, prominent). Below: note with additional context. → Reference: offer.md (brand thesis), product-ladder.md (where this sits vs. alternatives)
How It Works: Flow visualization (circles with hover-to-fill-gold). Example tabs if multiple case studies. Example grid (4 columns: Symptom → Constraint → System → Outcome). → Reference: ip-inventory.md (framework lineage), case-studies/ (engagement arcs for examples)
What You Get: Deliverable cards with gold left border. Keep tight — title + one-line description per card. → Reference: offers/[offer]/offer.md (deliverables list), ip-inventory.md (what's included)
Who It's For: Two-column grid. "For You" (gold border, arrow bullets) vs. "Not For You" (muted border, X bullets). Visual distinction between the two must be obvious. → Reference: audience.md (who buys), offers/[offer]/offer.md (who it's for / not for)
Proof: Featured testimonial (charcoal background, gold pull-quote) + supporting testimonials (cream cards, 2-3 column grid). If disclaimer needed, add it below in a stone-bordered callout. → Reference: testimonials.md (outcomes, pull-quotes, offer tags — match testimonials to the offer being sold)
Investment: Charcoal box with gold left border. Price in large Cormorant Garamond gold text. Includes checklist with gold checkmarks. CTA button + subtext. → Reference: offers/[offer]/offer.md (price, timeline), product-ladder.md (positioning against other tiers)
FAQ: 2-column grid. Questions phrased as objections. Charcoal left border that turns gold on hover. Answers direct, not defensive. → Reference: offer.md (positioning), case-studies/ (evidence for answers), product-ladder.md (cross-sell context)
Step 4: Copy QC Pass
Before visual validation, run the copy through brand voice and AI pattern detection. This step is mandatory — do not skip it.
Required Reference Files
Read these before scanning the copy:
business-aos/reference/core/voice.md— Brand vocabulary, tone, cadence, core phrases, quality testbusiness-aos/reference/brand/copy-qc.md— 11 AI pattern checks with severity levels (P1/P2/P3)02-offer-page-terminology.md— Kit-specific language rules and forbidden constructions
What to Check
Voice vocabulary: Confirm the copy uses the brand vocabulary (deploy, build, install, system, protocol, constraint, capability, diagnose) and avoids banned words (leverage, synergy, coaching, mindset, journey, game-changer, scalable, revolutionary).
AI Pattern Detection (all 11 patterns):
| Priority | Pattern | Detection Rule |
|---|---|---|
| P1 | Twinning | "You don't have X. You have Y." — two mirrored sentences |
| P1 | Mirror Reversal | Same root word in reversed positions across two clauses |
| P1 | Question → Revelation Arc | Dramatic silence ("went quiet") followed by insight |
| P2 | Three-Beat Parallel Lists | Three consecutive items with identical structure |
| P2 | Not Because X. Because Y. | Negation followed by correction as revelation |
| P2 | Formulaic Setup | "Most people think X. Actually Y." — max 1 per page with evidence |
| P2 | Trying-to-Be-Quotable | Metaphor or abstraction over plain statement |
| P3 | Dramatic Single-Word Beats | Max one per page |
| P3 | Rhetorical Hand-Holding | "Right?" "Sound familiar?" "Let that sink in." |
| P3 | Identical Sentence Openers | Three+ consecutive sentences with same opening word |
Correction-revelation compound check: If ANY two patterns from the correction family (Twinning, Mirror Reversal, Not Because X, Formulaic Setup) appear in the same page, flag as compound P1. Rewrite until zero from this family, or one maximum.
Terminology-specific forbidden constructions:
- "Not X. Not Y. Z." as a reveal structure
- "It's not [thing], it's [other thing]"
- Manufactured contrast that sounds insightful but is formulaic
Brand core phrase exceptions: Lines from voice.md Core Phrases (e.g., "Capability deployed. Not curriculum learned.") are exempt from pattern detection — they are intentional brand language.
Pass Criteria
- Zero P1 violations
- Zero P2 violations without documented exception
- Maximum one P3 violation
- Passes the read-aloud test: would the writer say every line in a real conversation?
If any P1 or P2 fails, rewrite the line before proceeding to Step 5.
Step 5: Technical & Content Validation
Technical Checks
- [ ] Gold scrollbar styles present
- [ ] File ends with proper