Handraiser Post Kit — Golden Example
Reference: Client Intelligence Brief Handraiser Post (v5)
The golden example is: content/business/marketing/campaigns/practice-command-center/01-client-intelligence-brief-post.html
Read the full HTML file before building any new handraiser post. It contains the post copy, image mockup, QC documentation, hook analysis, and value proposition notes — all in one reference document.
HTML Document Structure
1. Metadata Header
<h1>LinkedIn Handraiser Post #[N] (v[X])</h1>
<p class="meta">
<strong>Skill:</strong> [Skill name + version]<br>
<strong>Keyword:</strong> [KEYWORD]<br>
<strong>Target ICP:</strong> [Who this post targets — be specific about which ICP segment]<br>
<strong>Version notes:</strong> [What changed and why]
</p>
<div class="gold-bar"></div>2. Post Copy Card
<span class="label">Post Copy -- Ready to Paste</span>
<div class="post-copy">
<p>[One sentence per line — each paragraph is one sentence]</p>
<ul class="pain-list">
<li>→ [Timed pain item]</li>
</ul>
<ol class="cta-list">
<li>Connect with me (so I can DM it)</li>
<li>Like this post (so other practice owners find it)</li>
<li>Comment <strong>[KEYWORD]</strong> below</li>
</ol>
<div class="signature">
Kathryn Brown -- Advisory OS<br>
[Tagline]<br>
[Positioning line]
</div>
</div>
<p class="meta">~[N] words before signature. Under 200 limit.</p>Key CSS:
.post-copy: white background, 1px border #e0ddd8, 40px padding, line-height 2.1.pain-list: no bullets, JetBrains Mono 13px, arrow prefix (→).cta-list: numbered, standard padding.signature: top border separator, 13px, muted
3. Image Mockup (Baked Into Page)
<div class="handraiser-image">
<div class="campaign-label">Free Claude Skill</div>
<div class="skill-name">[Skill Name]</div>
<div class="skill-desc">[One-line: input → output]</div>
<div class="input-bar">
<span>[What to paste]</span>
</div>
<div class="arrow-down">▼</div>
<div class="output-list">
<div class="output-row">
<div class="output-number">[N]</div>
<div class="output-content">
<div class="output-label">[Section Name]</div>
<div class="output-text">[One-line description]</div>
</div>
</div>
<!-- One row per output section -->
</div>
<div class="time-badge">
<span>[Time to run]</span>
</div>
<div class="cta-bar">
<div class="cta-text">Comment below to get it free</div>
<div class="cta-keyword">[KEYWORD]</div>
</div>
<div class="logo">Advisory OS</div>
</div>Key CSS:
.handraiser-image: 600px width, #0a0a0a background, 48px padding.campaign-label: 10px uppercase, #6a6a6a, 0.3em letter-spacing, centered.skill-name: Cormorant Garamond, 36px, #f8f7f4, centered.skill-desc: Inter, 13px, #8a8a8a, centered.input-bar: #1a1a1a background, 1px border #333, centered text.output-row: flex layout, #1a1a1a background, 3px gold left border.output-number: Cormorant Garamond 18px, gold.output-label: 11px uppercase, gold, 0.12em tracking.output-text: 11px, #999.time-badge: Cormorant Garamond 22px, gold, centered.cta-keyword: Inter 16px, weight 500, gold, 0.1em tracking.logo: Cormorant Garamond 14px, #4a4a4a, centered
Production note: The HTML mockup IS the image. Kathryn screenshots it directly from the browser for LinkedIn. The gold left borders on output rows are the visual thread. Dark background stops the scroll in white LinkedIn feeds.
4. Version Changes Table (if v2+)
<div class="section">
<h2>What v[X] Changes From v[X-1]</h2>
<table>
<tr><th>Element</th><th>v[old]</th><th>v[new]</th><th>Why</th></tr>
<!-- One row per change -->
</table>
</div>Documents every change between versions with reasoning. Not just what changed — WHY it changed, tied to ICP targeting, QC findings, or proof accuracy.
5. Copy QC Summary
<div class="section">
<h2>Copy QC Summary</h2>
<table class="qc-table">
<tr><th>Pattern</th><th>Severity</th><th>Result</th><th>Notes</th></tr>
<!-- One row per pattern -->
</table>
</div>11 patterns checked from the copy QC system:
- P1: Twinning, Mirror Reversal, Question-Silence-Revelation, Compound Corrections
- P2: Three-Beat Parallels, Not Because X/Because Y, Over-Validation, Formulaic Setups, Trying-to-Be-Quotable
- P3: Dramatic Single-Word Beats, Rhetorical Hand-Holding, Identical Openers
Plus compound check (no pattern clusters, varied sentence lengths, read-aloud test).
Status classes: .pass (green #3d7a5f), .flag (gold #b8960c), .fail (red #c45a4a).
6. Sentence Editor Summary
<div class="section">
<h2>Sentence Editor Summary</h2>
<table class="qc-table">
<tr><th>Rule</th><th>Result</th><th>Notes</th></tr>
<!-- 8 rules -->
</table>
</div>8 rules: End Strong, Define Acronyms, Economy, No Repeats, Vary Word Choice, Precision Vocabulary, Two-Comma Rule, Kill Adverbs.
7. Hook Analysis
<div class="section">
<h2>Hook Direction -- Analysis</h2>
<h3>Option A: [Hook type] (used in v[X])</h3>
<p><em>"[Hook text]"</em></p>
<ul><!-- Pros, risks, ICP fit --></ul>
<h3>Option B: [Alternate hook type]</h3>
<p><em>"[Alternate hook text]"</em></p>
<ul><!-- Pros, risks --></ul>
<div class="recommendation">
<strong>Recommendation: Option [X].</strong> [Reasoning tied to ICP.]
</div>
</div>.recommendation: dark background (#122640), 4px gold left border, gold bold text.
8. Value Proposition Notes
<div class="section">
<h2>Value Proposition -- What Changed</h2>
<table>
<tr><th>Element</th><th>Role</th><th>v[X] Copy</th></tr>
<tr><td>Hook</td><td>[Role]</td><td>[Copy]</td></tr>
<tr><td>Compression</td><td>[Role]</td><td>[Copy]</td></tr>
<tr><td>Promise</td><td>[Role]</td><td>[Copy]</td></tr>
<tr><td>Authority</td><td>[Role]</td><td>[Copy]</td></tr>
</table>
</div>Maps each element of the post to its role in the value proposition. Catches false promises (e.g., "saves 15 minutes" when the user still has to find the emails).
CSS Reference (Full Document)
body { font-family: 'Inter', sans-serif; font-weight: 300; font-size: 15px; line-height: 1.7; background: #f8f7f4; color: #0a0a0a; padding: 48px; }
.container { max-width: 800px; margin: 0 auto; }
h1 { font-family: 'Cormorant Garamond', serif; font-size: 2rem; font-weight: 400; color: #122640; }
h2 { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; font-weight: 500; color: #122640; margin-top: 40px; }
h3 { font-family: 'Inter', sans-serif; font-size: 0.95rem; font-weight: 500; color: #122640; }
.meta { font-size: 13px; color: #6a6a6a; line-height: 1.9; }
.gold-bar { width: 48px; height: 3px; background: #b8960c; }
.label { font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 500; color: #6a6a6a; }
.section { margin-top: 40px; padding-top: 32px; border-top: 1px solid #e0ddd8; }
.callout { background: #122640; color: #f8f7f4; padding: 24px 32px; }
.callout strong { color: #b8960c; }
.recommendation { background: #122640; color: #f8f7f4; padding: 24px 32px; border-left: 4px solid #b79d64; }
.pass { color: #3d7a5f; font-weight: 500; }
.flag { color: #b8960c; font-weight: 500; }
.fail { color: #c45a4a; font-weight: 500; }
th { background: #122640; color: #f8f7f4; font-size: 11px; text-transform: uppercase; }Fonts loaded: Cormorant Garamond (400, 500), Inter (300, 400, 500), JetBrains Mono (400 — for pain list items).