Thought Leadership Article — Output Skill
What this produces: A fully styled, single-file HTML thought leadership article with embedded interactives. Advisory OS branded, client-facing, published at its own URL.
Output filename: {{topic-slug}}.html (lowercase, hyphens — e.g., proof-gap.html, politeness-premium.html)
Reference files:
03-article-golden-example.html— The Proof Gap. Consult for tone, density, interactive placement.hqp-scoring-system-v2.html— The Politeness Premium. Consult for flexible architecture, product-purchase CTA, system-teaching article type.
Build Process
Step 0: Read the Source Material
Before proposing anything, read the source material completely. Understand:
- What system, framework, or insight is being taught?
- What's the specific moment or pattern that makes this interesting?
- What assumption does the audience hold that this challenges?
- What would the reader do differently after reading this?
Do not summarize the source material. Find the insight inside it.
Step 1: Run the Intake
Walk through all seven intake decisions from 01-article-context.md. For each decision:
- Propose 2–3 options with rationale based on the source material
- Recommend one and explain why
- Wait for confirmation before moving to the next decision
Present the intake as a conversational sequence, not a form. Group related decisions when natural (e.g., brand + conversion goal can go together).
After all seven decisions are confirmed, produce the Concept Lock — a single summary block with every decision captured.
CONCEPT LOCK: [Campaign Name]
Brand: [Advisory OS / Creating Your Plan]
Conversion: [Product purchase $X / Diagnostic booking / Subscribe]
Core insight: [1-2 sentences]
Named mechanism: [Name] — [definition]
Title: [Locked title]
Interactives ([count]):
1. [Name] ([Function]) — [what it does]
2. [Name] ([Function]) — [what it does]
3. [Name] ([Function]) — [what it does]
Arc: [Section flow with labels]
Reframe: [Light / Medium / Heavy]
CTA: [Exact CTA text]Step 2: Build the First Pass
Build the complete HTML article from the Concept Lock. Follow this order:
- Head + CSS — Copy the full CSS block from the template below. Update the comment header with the topic name.
- Navigation — Copy as-is. Update nav link labels to match this article's sections.
- Hero — Title, eyebrow, subtitle. One gold
word in the title. - Section-by-section — Follow the arc from the Concept Lock. For each section: eyebrow label → headline → prose → interactive (if this section has one) → interpretation prose.
- CTA — Match the conversion goal. See CTA patterns below.
- Footer — Copy as-is.
- React scripts — If using React interactives, add the script block after the footer.
Step 3: Flag Known Weaknesses
After delivering the first pass, explicitly note what needs work. Examples:
- "The Pattern section has one story. A second composite with escalating numbers would strengthen it."
- "The Decoder interaction is basic. More visual ceremony on reveal would help."
- "The Constraint section explains but doesn't create emotional pressure."
- "David's prospect profile may be too easy to score — consider making him more ambiguous."
Do not pretend the first pass is finished. Setting up the revision cycle is part of the job.
Step 4: Revision Cycles
Receive editorial feedback. Rebuild what's called out. For each revision:
- Make the specific changes requested
- Note what else improved as a side effect
- Flag if a change created a new issue elsewhere
Expect 2–3 cycles before shipping.
CTA Patterns
Product Purchase CTA
<section class="cta-section" id="cta">
<div class="container" style="margin-bottom: 3rem;">
<p class="big-quote" style="border: none; padding: 0; color: #f5f4f0;">“{{Final anchor phrase with <em>gold emphasis</em>.}}”</p>
</div>
<div class="container">
<h2>{{Product Name — e.g., "Get the HQP Scoring System"}}</h2>
<p class="cta-sub">{{One sentence: what the product does and why they need it now.}}</p>
<a href="#" class="cta-button">{{Get the Toolkit · $27}}</a>
<p class="cta-subtext">{{Instant access · What's included · How long it takes}}</p>
</div>
</section>Diagnostic Booking CTA
<section class="cta-section" id="cta">
<div class="container" style="margin-bottom: 3rem;">
<p class="big-quote" style="border: none; padding: 0; color: #f5f4f0;">“{{Final anchor phrase with <em>gold emphasis</em>.}}”</p>
</div>
<div class="container">
<h2>Book a Systems Diagnostic</h2>
<p class="cta-sub">{{What the diagnostic finds and what they leave with — one sentence.}}</p>
<a href="https://calendly.com/kathryn-brown/systems-diagnostic" class="cta-button">Book a Diagnostic</a>
<p class="cta-subtext">60 minutes · Find the constraint · No obligation</p>
</div>
</section>Subscribe CTA
<section class="cta-section" id="cta">
<div class="container">
<h2>{{Promise of next piece — e.g., "Get the Next One"}}</h2>
<p class="cta-sub">{{What they'll get and why it matters.}}</p>
<a href="#" class="cta-button">Subscribe</a>
</div>
</section>Section HTML Patterns
Navigation (Fixed — Same Every Article)
<nav>
<a href="https://advisoryos.ai" class="logo">
<img src="https://convertri.imgix.net/01a6df52-3d55-11ea-99fe-0697e5ca793e%2Ff71505a0b7be19fb31c9096f349bec5d235fcc3b%2FIcon-Gold.png?auto=compress,format&w=400" alt="Advisory OS">
<span class="logo-text">Advisory OS</span>
</a>
<div class="nav-links">
<a href="#{{section-id}}">{{Section Name}}</a>
<a href="#{{section-id}}">{{Section Name}}</a>
<a href="#{{section-id}}">{{Section Name}}</a>
</div>
</nav>Hero (Always Dark)
<section class="hero">
<div class="hero-inner">
<div class="hero-eyebrow">An Interactive Explainer</div>
<h1>{{Title with <em>gold word</em> and }}</h1>
<p class="hero-sub">{{Subtitle — one specific number or scene. One clean thought.}}</p>
</div>
</section>Prose Section (Cream, Off-White, or Dark)
<section class="{{cream|off-white|dark}}" id="{{section-id}}">
<div class="container">
<p class="section-eyebrow">{{Eyebrow Label}}</p>
<h2>{{Section Headline — Statement, Not Question}}</h2>
<p class="lead">{{Opening paragraph.}}</p>
<p>{{Body paragraphs. 2-4 sentences each. Last sentence hits hardest.}}</p>
</div>
</section>Section with Interactive
<section class="{{cream|off-white|dark}}">
<div class="container">
<p class="section-eyebrow">{{Eyebrow Label}}</p>
<h2>{{Section Headline}}</h2>
<p>{{Setup prose — what to look for and why it matters.}}</p>
</div>
<div class="container-wide">
<div class="viz-container" id="{{viz-id}}" style="height: auto; min-height: 380px;"></div>
</div>
<div class="container">
<p>{{Interpretation prose — what they just experienced and what it means.}}</p>
</div>
</section>Definition Box
<div class="definition-box">
<p><strong>{{Mechanism Name}}:</strong> {{Definition — tight enough to quote. Names something felt but never articulated.}}</p>
</div>Big Quote (Breathing Element)
<p class="big-quote" style="border: none; padding: 32px 0;">“{{Quote with <em>gold emphasis</em> on key word.}}”</p>Bridge Quote Between Continuous Dark Sections
<section class="dark" style="padding-bottom: 0;">
<div class="container">
<p class="big-quote" style="border: none; padding: 32px 0;">“{{Bridge quote.}}”</p>
</div>
</section>
<section class="dark" style="padding-top: 48px;">
<!-- Next section content -->
</section>Comparison Table
<div class="container-wide" style="max-width: 700px;">
<table class="comparison-table" style="margin: 48px auto;">
<thead>
<tr>
<th style="border-color: rgba(26,26,26,0.1); color: #8a8680;">{{Column 1}}</th>
<th style="border-color: rgba(26,26,26,0.1); color: #8a8680;">{{Column 2}}</th>
</tr>
</thead>
<tbody>
<tr>
<td style="border-color: rgba(26,26,26,0.1); color: #4a5a6a;">{{Row}}</td>
<td style="border-color: rgba(26,26,26,0.1); color: #4a5a6a;">{{Row}}</td>
</tr>
<!-- Final row in gold -->
<tr>
<td style="border-color: rgba(26,26,26,0.1); color: #6b5d3e; font-weight: 500;">{{Answer}}</td>
<td style="border-color: rgba(26,26,26,0.1); color: #6b5d3e; font-weight: 500;">{{Answer}}</td>
</tr>
</tbody>
</table>
</div>Self-Assessment Cards
<div class="container-wide">
<div class="cards-grid">
<div class="card">
<div class="card-number">1</div>
<div class="card-title">{{Question that mirrors the reader}}</div>
<div class="card-text">{{Description of this recognizable state.}}</div>
</div>
<div class="card">
<div class="card-number">2</div>
<div class="card-title">{{Question}}</div>
<div class="card-text">{{Description.}}</div>
</div>
<div class="card">
<div class="card-number">3</div>
<div class="card-title">{{Question}}</div>
<div class="card-text">{{Description.}}</div>
</div>
</div>
</div>Footer (Fixed — Same Every Article)
<footer>
<div class="footer-links">
<a href="https://advisoryos.ai/contact">Contact</a>
<a href="https://www.linkedin.com/in/itskathrynbrown/" target="_blank">LinkedIn</a>
<a href="https://substack.com/@kathrynhbrown" target="_blank">Substack</a>
<a href="https://creatingyourplan.com" target="_blank">Creating Your Plan</a>
</div>
<p class="footer-legal">© 2026 Creating Your Plan. All rights reserved. | <a href="https://creatingyourplan.com/privacy-policy" target="_blank">Privacy Policy</a> | <a href="https://creatingyourplan.com/terms-of-service" target="_blank">Terms of Service</a> | <a href="https://creatingyourplan.com/disclaimer" target="_blank">Disclaimer</a></p>
</footer>Full CSS Template
Copy this entire style block into the . Update only the comment header with the topic name.
/* =============================================
ADVISORY OS - {{TOPIC NAME UPPERCASE}}
Thought Leadership Interactive Narrative
HEX CODES (exact):
- Gold: #b79d64
- Gold Light: #c4aa74
- Gold Dark: #a08a58
- Gold on Cream: #6b5d3e
- Charcoal: #1a1a1a
- Deep Charcoal: #2a2a2a
- Cream: #f5f4f0
- Off-White: #faf9f7
- Stone: #8a8680
- Slate: #4a5a6a
============================================= */
:root {
--gold: #b79d64; --gold-light: #c4aa74; --gold-dark: #a08a58;
--gold-on-cream: #6b5d3e; --charcoal: #1a1a1a; --deep-charcoal: #2a2a2a;
--cream: #f5f4f0; --off-white: #faf9f7; --stone: #8a8680; --slate: #4a5a6a;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #1a1a1a; }
::-webkit-scrollbar-thumb { background: #b79d64; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #c4aa74; }
html { scrollbar-width: thin; scrollbar-color: #b79d64 #1a1a1a; }
body {
font-family: 'Inter', -apple-system, sans-serif;
background: #f5f4f0;
color: #1a1a1a;
line-height: 1.6;
overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: 'Cormorant Garamond', serif; font-weight: 400; }
strong { font-weight: 500; }
/* === NAVIGATION === */
nav {
position: fixed;
top: 0;
width: 100%;
background: rgba(26,26,26,0.95);
backdrop-filter: blur(10px);
border-bottom: 3px solid #b79d64;
padding: 20px 5%;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 100;
}
.logo {
display: flex;
align-items: center;
gap: 1rem;
text-decoration: none;
}
.logo img { height: 40px; width: auto; }
.logo-text {
font-family: 'Cormorant Garamond', serif;
font-size: 1.75rem;
font-weight: 500;
color: #f5f4f0;
letter-spacing: 0.02em;
}
.nav-links { display: flex; gap: 2rem; }
.nav-links a {
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
color: #8a8680;
text-decoration: none;
transition: color 0.3s ease;
}
.nav-links a:hover { color: #b79d64; }
/* === HERO === */
.hero {
min-height: 85vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 140px 5% 100px;
background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
color: #f5f4f0;
}
.hero-inner { max-width: 800px; margin: 0 auto; }
.hero-eyebrow {
font-family: 'Inter', sans-serif;
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #b79d64;
margin-bottom: 1.5rem;
display: inline-flex;
align-items: center;
gap: 1rem;
}
.hero-eyebrow::before,
.hero-eyebrow::after {
content: '';
width: 40px;
height: 1px;
background: #b79d64;
}
.hero h1 {
font-size: clamp(2.75rem, 6vw, 4.5rem);
color: #f5f4f0;
line-height: 1.1;
margin-bottom: 1.5rem;
letter-spacing: -0.02em;
}
.hero h1 em { font-style: italic; color: #b79d64; }
.hero-sub {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.15rem, 2.5vw, 1.5rem);
color: #8a8680;
line-height: 1.7;
max-width: 650px;
margin: 0 auto;
}
/* === SECTIONS === */
section { padding: 100px 5%; scroll-margin-top: 80px; }
section.dark { background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%); color: #f5f4f0; }
section.cream { background: #f5f4f0; color: #1a1a1a; }
section.off-white { background: #faf9f7; color: #1a1a1a; }
.container { max-width: 700px; margin: 0 auto; }
.container-wide { max-width: 900px; margin: 0 auto; }
.section-eyebrow {
font-family: 'Inter', sans-serif;
font-size: 0.65rem;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #6b5d3e;
margin-bottom: 1rem;
}
section.dark .section-eyebrow { color: #b79d64; }
section h2 {
font-size: clamp(2rem, 4vw, 2.75rem);
line-height: 1.15;
margin-bottom: 1.5rem;
letter-spacing: -0.01em;
}
section.dark h2 { color: #f5f4f0; }
section.cream h2, section.off-white h2 { color: #1a1a1a; }
section h3 {
font-size: 1.5rem;
font-weight: 500;
margin-top: 2.5rem;
margin-bottom: 1.25rem;
}
section.dark h3 { color: #f5f4f0; }
section p {
font-size: 1rem;
font-weight: 400;
line-height: 1.85;
margin-bottom: 1.5rem;
}
section.cream p, section.off-white p { color: #4a5a6a; }
section.dark p { color: rgba(245,244,240,0.85); }
.lead { font-size: 1.15rem; color: #8a8680; }
section.dark .lead { color: rgba(245,244,240,0.7); }
/* === BIG QUOTE === */
.big-quote {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.5rem, 3.5vw, 2.25rem);
font-style: italic;
line-height: 1.4;
text-align: center;
padding: 3rem 5%;
max-width: 700px;
margin: 0 auto;
border-top: 1px solid rgba(26,26,26,0.1);
border-bottom: 1px solid rgba(26,26,26,0.1);
}
section.dark .big-quote { border-color: rgba(245,244,240,0.1); }
.big-quote em { font-style: normal; color: #6b5d3e; }
section.dark .big-quote em { color: #c4aa74; }
/* === DEFINITION BOX === */
.definition-box {
background: rgba(183,157,100,0.08);
border-left: 3px solid #b79d64;
padding: 1.75rem 2rem;
margin: 2.5rem 0;
}
section.dark .definition-box {
background: rgba(245,244,240,0.04);
}
.definition-box p { margin-bottom: 12px; }
.definition-box p:last-child { margin-bottom: 0; }
/* === VIZ CONTAINER === */
.viz-container {
background: #1a1a1a;
border: 1px solid rgba(245,244,240,0.1);
margin: 48px 0;
min-height: 380px;
overflow: hidden;
}
section.dark .viz-container {
background: rgba(245,244,240,0.03);
}
/* === COMPARISON TABLE === */
.comparison-table {
width: 100%;
margin: 48px 0;
border-collapse: collapse;
}
.comparison-table th,
.comparison-table td {
padding: 20px 24px;
text-align: left;
border-bottom: 1px solid rgba(245,244,240,0.1);
}
.comparison-table th {
font-size: 11px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: rgba(245,244,240,0.5);
font-weight: 500;
}
/* === CARDS GRID === */
.cards-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin: 48px 0;
}
.card {
background: rgba(245,244,240,0.03);
border: 1px solid rgba(245,244,240,0.1);
padding: 32px;
transition: all 0.3s ease;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px -15px rgba(0,0,0,0.2);
}
.card-number {
font-family: 'Cormorant Garamond', serif;
font-size: 3rem;
font-weight: 300;
color: #b79d64;
opacity: 0.4;
margin-bottom: 16px;
}
.card-title {
font-family: 'Cormorant Garamond', serif;
font-size: 1.35rem;
font-weight: 500;
margin-bottom: 12px;
color: #f5f4f0;
}
.card-text {
font-size: 15px;
color: #8a8680;
line-height: 1.7;
}
/* === CTA SECTION === */
.cta-section {
background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
color: #f5f4f0;
text-align: center;
padding: 100px 5%;
}
.cta-section h2 {
color: #f5f4f0;
margin-bottom: 1.5rem;
}
.cta-sub {
font-family: 'Cormorant Garamond', serif;
font-size: 1.25rem;
color: rgba(245,244,240,0.7);
max-width: 550px;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
.cta-button {
display: inline-block;
padding: 18px 48px;
background: #b79d64;
color: #1a1a1a;
font-family: 'Inter', sans-serif;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
text-decoration: none;
transition: all 0.3s ease;
}
.cta-button:hover {
background: #c4aa74;
transform: translateY(-2px);
}
.cta-subtext {
font-size: 0.8rem;
color: #8a8680;
margin-top: 1.25rem;
}
/* === FOOTER === */
footer {
padding: 48px 5%;
background: #1a1a1a;
border-top: 3px solid #b79d64;
text-align: center;
}
.footer-links {
display: flex;
justify-content: center;
gap: 2rem;
margin-bottom: 1.5rem;
flex-wrap: wrap;
}
.footer-links a {
font-size: 0.75rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #8a8680;
text-decoration: none;
transition: color 0.3s;
}
.footer-links a:hover { color: #b79d64; }
.footer-legal {
font-size: 0.7rem;
color: rgba(138,134,128,0.6);
line-height: 1.8;
}
.footer-legal a {
color: rgba(138,134,128,0.6);
text-decoration: none;
}
/* === RESPONSIVE === */
@media (max-width: 768px) {
.nav-links { display: none; }
.cards-grid { grid-template-columns: 1fr; }
.hero { padding: 120px 5% 80px; }
section { padding: 80px 5%; }
}Head Template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{Article Title}} | Advisory OS</title>
<meta name="description" content="{{One-sentence description for search and social.}}">
<meta property="og:title" content="{{Article Title}} | Advisory OS">
<meta property="og:description" content="{{Short description.}}">
<meta property="og:type" content="website">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<style>
{{FULL CSS FROM TEMPLATE ABOVE}}
</style>
</head>React Interactive Template
<script>
var e = React.createElement;
var useState = React.useState;
var useEffect = React.useEffect;
var useRef = React.useRef;
var GOLD = "#b79d64";
var GOLD_LIGHT = "#c4aa74";
var CHARCOAL = "#1a1a1a";
var DEEP_CHARCOAL = "#2a2a2a";
var CREAM = "#f5f4f0";
var STONE = "#8a8680";
var SLATE = "#4a5a6a";
// Component 1
function {{ComponentName}}() {
// Build using React.createElement, not JSX
// Use useState for state, not class components
// All styles inline as objects
}
// Mount
ReactDOM.render(e({{ComponentName}}), document.getElementById('{{viz-id}}'));
</script>Common First-Pass Mistakes to Avoid
| Mistake | What to Do Instead |
|---|---|
| Reorganizing source material into sections without original thinking | Find the insight inside the material. Name something no one else is naming. |
| Three interactives that all say the same thing in different UIs | Each interactive must do different cognitive work. Test: one sentence each. |
| Embedding a calculator inside the article | Calculators are standalone micro-tools. Article interactives visualize, decode, simulate, or mirror. |
| Definition box that describes a problem everyone knows | Definition box must name a mechanism — give language to something felt but never articulated. |
| Cost 1 and Cost 2 that restate the same cost | Each cost must be genuinely different. Different dimension, not different phrasing. |
| Constraint section that explains instead of creating pressure | Use time compression. Walk the reader through their own knowledge decaying. |
| One-pass delivery with no flagged weaknesses | Always flag what needs work. The first pass is the start, not the finish. |
| CTA that doesn't match the conversion goal | Product purchase, diagnostic booking, and subscribe each have completely different CTA architecture. |