05 — OUTPUT SKILL: Opt-In Page
Standalone production skill. Read this file to produce an opt-in page from scratch. All inputs, rules, and templates are restated here — no need to reference other kit files during production.
Scope
Produce a single HTML opt-in page that captures first name + email via MailerLite in exchange for a free lead magnet. The page is designed for cold traffic (Meta ads) and follows a two-column hero layout with a sticky form panel.
Required Inputs
Before building, confirm you have:
- Lead magnet name — e.g., "Client Intelligence Brief"
- Lead magnet one-liner — e.g., "Prep for any client call in 2 minutes"
- Lead magnet sections — the output sections with one-line descriptions
- MailerLite form embed code — form ID, account ID, action URL
- Thank-you page URL — redirect destination on form submit
- Brand variant — CYP or AOS (determines all colors, fonts, entity name)
- Credential line — one sentence, factual, for "Built by" section
- Hero problem statement — names the pain the lead magnet solves
- Hero solution statement — gold bridge line naming the lead magnet
- How-it-works line — the literal instruction ("Paste X into any large language model")
Optional: headshot URL, logo URL, testimonial, output preview lines, CTA button text.
Brand Variants
CYP (Practice Builders) — Primary
| Element | Value |
|---|---|
| Fonts | Fraunces (headings), Montserrat (body) |
| Deep Teal | #0f2d3e |
| Slate Teal | #3e666e |
| Gold | #b79d64 |
| Gold Light (hover) | #c4aa74 |
| Gold on Cream (WCAG) | #6b5d3e |
| Cream | #f1ede6 |
| Off White | #f7f5f0 |
| Slate (body text on light) | #334155 |
| Muted Slate | #64748b |
| Hero gradient | linear-gradient(135deg, #0f2d3e 0%, #3e666e 100%) |
| Logo URL | https://cdn.convertri.com/01a6df52-3d55-11ea-99fe-0697e5ca793e%2F1e660f39a4c0923479dfce82ce3cf3916e7e317b%2FIcon-White.png |
| Entity line | Practice Builders is a brand of Creating Your Plan |
| Domain | thepracticebuilders.ai |
AOS (Advisory OS)
| Element | Value |
|---|---|
| Fonts | Cormorant Garamond (headings), Inter (body) |
| Charcoal | #1a1a1a |
| Deep Charcoal | #2a2a2a |
| Gold | #b79d64 |
| Gold Light (hover) | #c4aa74 |
| Cream | #f5f4f0 |
| Off White | #faf9f7 |
| Stone | #8a8680 |
| Slate Blue | #4a5a6a |
| Hero gradient | linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%) |
| Logo URL | https://convertri.imgix.net/01a6df52-3d55-11ea-99fe-0697e5ca793e%2Ff71505a0b7be19fb31c9096f349bec5d235fcc3b%2FIcon-Gold.png?auto=compress,format&w=400 |
| Entity line | Creating Your Plan |
| Domain | advisoryos.ai |
Content Rules
- No LLM brand names. Never Claude, ChatGPT, Gemini, Copilot, or any specific product. Use "any large language model" or "any AI assistant."
- No
var()CSS. Every color, font, and value hardcoded as hex/rgba. - Inline styles only for body content. The