01 — CONTEXT: Opt-In Page
Input definitions, validation rules, brand variants, and what each mode requires.
Mode 1 Inputs — Create New Opt-In Page
| Input | Required | Example | Used For |
|---|---|---|---|
| Lead magnet name | Yes | "Client Intelligence Brief" | Page title, hero headline context, form heading, meta tags |
| Lead magnet one-liner | Yes | "Prep for any client call in 2 minutes" | Hero headline or subhead |
| Lead magnet sections | Yes | 4 sections: Rolling Items Alert, Client Priority Read, Call Playbook, Next Actions | "What's Inside" section, output preview in form panel |
| Section descriptions | Yes | One sentence per section describing what it does | "What's Inside" detail copy |
| MailerLite form embed code | Yes | Form ID, account ID, action URL, field names | Embedded form in hero + form CSS + redirect script |
| Thank-you page URL | Yes | https://thepracticebuilders.ai/cib-thank-you | JavaScript redirect on form submit |
| Brand variant | Yes | CYP (primary) or AOS | Determines colors, fonts, entity name, domain, logo |
| Credential line | Yes | "25 years in operations, the last decade inside consulting firms, CPA practices, and wealth management firms" | Proof section below hero, "Built by" section |
| Hero problem statement | Yes | "Every call starts with 20 minutes of scrolling through email threads. Half of it is guessing what was promised." | Opening copy — names the pain |
| Hero solution statement | Yes | "The Client Intelligence Brief replaces that." | Gold-colored bridge line between problem and mechanism |
| How-it-works line | Yes | "Paste 3-5 recent emails from one client into any large language model." | Instruction line before bullet list |
| Headshot image URL | No | Convertri-hosted headshot | "Built by" section avatar. If not provided, omit the image and use text-only. |
| Logo image URL | No | Convertri-hosted logo | Header logo. If not provided, use text-only brand name. |
| Testimonial | No | A quote from someone who used this specific lead magnet | Social proof in hero. If not available, use credential line only. |
| Output preview lines | No | Short example output lines for the form sidebar | Form panel "What You Get Back" preview. If not provided, omit the preview panel below form. |
| CTA button text | No | "Send Me the Brief" | Form submit button. Default: "Send Me the [Short Name]" |
Validation Rules — Mode 1
- The lead magnet must exist (or be in final build). Do not build the opt-in page for a lead magnet that is still being designed. The page copy depends on knowing exactly what the deliverable contains.
- The MailerLite form must be created first. The form embed code contains the form ID, account ID, and action URL. These are not placeholders — they are live MailerLite endpoints.
- The thank-you page URL must be a real, deployed page (or a known URL that will be deployed before the opt-in page goes live).
- Brand variant must be specified. CYP and AOS use different color palettes, fonts, entity names, and domains. Do not mix them.
- No LLM brand names anywhere in the page. The page must say "any large language model" — never Claude, ChatGPT, Gemini, Copilot, or any specific product name. This keeps the page brand-neutral and future-proof.
- Hero copy must follow problem-bridge-mechanism structure. Problem statement (names the pain), bridge line (names the solution, gold-colored), mechanism description (how it works + bullet list of what you get).
- All form fields are first name + email only. No phone, no last name, no company. Minimize friction.
- Every section of the lead magnet must appear in "What's Inside." If the lead magnet has 4 sections, "What's Inside" lists all 4. No partial lists.
Mode 2 Inputs — Improve Existing Kit
| Input | Required | Source | Used For |
|---|---|---|---|
| Kit location | Yes | content/frameworks/kit-opt-in-page/ | Which kit to improve |
| Trigger | Yes | QC failure, manual output changes, conversion data, compliance update | Determines which files to update |
| Updated output | If applicable | The corrected or improved HTML file | Replaces file 03 (golden example) |
| QC findings | If applicable | Specific checklist items that failed or were missing | Updates file 04 (quality) |
| Process changes | If applicable | Steps that were wrong, missing, or in wrong order | Updates file 05 (build skill) |
Validation Rules — Mode 2
- Always read the current kit files before making changes. Never update blindly.
- Changes propagate. If you update the golden example, check whether the build skill and quality checklist still match.
- Never remove a quality check without a reason. Quality checks represent lessons learned.
- Document what changed and why. Add
at the bottom of HTML files, or a## Change Logsection for markdown files.
Brand Variants
CYP / Practice Builders (Primary)
| Element | Value |
|---|---|
| Fonts | Fraunces (headers) + Montserrat (body) |
| Primary background | #0f2d3e (Deep Teal) |
| Secondary background | #3e666e (Slate Teal) |
| Light background | #f1ede6 (Cream) |
| Text on dark | #f1ede6 (Cream) |
| Text on light | #0f2d3e (Deep Teal) |
| Secondary text on light | #3e666e (Slate Teal) |
| Gold accent | #b79d64 |
| Gold hover | #c4aa74 |
| Gold dark (pressed) | #9d8556 |
| Gold text on light bg | #6b5d3e (WCAG-safe alternative to #b79d64 on cream) |
| Form input bg | #506e76 |
| Form input border | #797d66 |
| Entity name | Creating Your Plan |
| Brand name | Practice Builders |
| Domain | thepracticebuilders.ai |
| kathryn@creatingyourplan.com | |
| Privacy/Terms/Disclaimer domain | creatingyourplan.com |
| Logo URL | https://cdn.convertri.com/01a6df52-3d55-11ea-99fe-0697e5ca793e%2F1e660f39a4c0923479dfce82ce3cf3916e7e317b%2FIcon-White.png |
| Google Fonts import | 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 |
AOS / Advisory OS (Variant)
| Element | Value |
|---|---|
| Fonts | Cormorant Garamond (headers) + Inter (body) |
| Primary background | #1a1a1a (Charcoal) |
| Secondary background | #111111 (Deep Black) |
| Light background | #f5f4f0 (Cream) |
| Text on dark | #f5f4f0 (Cream) |
| Text on light | #1a1a1a (Charcoal) |
| Secondary text on light | #666666 (Muted) |
| Gold accent | #b79d64 |
| Gold hover | #d4b87a |
| Gold dark (pressed) | #8a7548 |
| Gold text on light bg | #6b5d3e (WCAG-safe) |
| Form input bg | #333333 |
| Form input border | #555555 |
| Entity name | Creating Your Plan |
| Brand name | Advisory OS |
| Domain | advisoryos.ai |
| kathryn@creatingyourplan.com | |
| Privacy/Terms/Disclaimer domain | creatingyourplan.com |
| Logo URL | (TBD — use text-only header until AOS logo asset is confirmed) |
| Google Fonts import | https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=Inter:wght@300;400;500;600;700&display=swap |
What Changes Between Variants
| Element | Changes | Stays the Same |
|---|---|---|
| Color palette | Yes — teal vs. charcoal | Gold accent (#b79d64) |
| Fonts | Yes — Fraunces/Montserrat vs. Cormorant Garamond/Inter | Font roles (serif for headers, sans for body) |
| Brand name | Yes — Practice Builders vs. Advisory OS | Entity name (Creating Your Plan) |
| Domain | Yes — thepracticebuilders.ai vs. advisoryos.ai | Legal links domain (creatingyourplan.com) |
| Page structure | No | All sections, order, layout |
| Copy patterns | No | Problem-bridge-mechanism, conversational tone |
| Footer compliance | No | Meta disclaimer, results disclaimer, legal links |
| Form platform | No | MailerLite for both |
Input Priority Hierarchy
When inputs conflict or are ambiguous:
- The golden example wins for structure, layout, component patterns, and inline style conventions
- Brand variant specification wins for colors, fonts, entity/brand names, and domain
- Kathryn's description wins for copy, audience framing, and lead magnet positioning
- Compliance references win for footer content, disclaimers, and claim language
- Existing vault conventions win for file naming, directory structure, and kit format