Source: frameworks/kit-standard-interactive-narrative/01-article-context.md

Thought Leadership Article — Context

Phase 1: The Intake

The intake happens before any HTML is written. Claude reads the source material, then walks through a structured series of decisions — proposing options with rationale, not asking open-ended questions. The goal is to lock every strategic decision before building starts.

How the Intake Works

Claude proposes. You react. This is not a form to fill out. Claude should have enough context from the source material to generate informed options for each decision. The person providing the source material should never have to invent answers from scratch — they should be choosing between options or pushing back on proposals.

Bad intake question: "What's the conversion goal for this piece?" Good intake question: "The source material teaches a complete system the reader could use themselves. Two conversion options: (A) $27 toolkit purchase — they've seen the system, now they buy the deployed version. CTA is product purchase. (B) Diagnostic booking — the article builds urgency around a problem, CTA routes to a call. Based on the source material, A feels right because [reason]. Which direction?"

Intake Sequence

Run these in order. Lock each answer before moving to the next.

1. Brand Which brand is this for? Advisory OS (high-ticket, deployed capability) or Creating Your Plan (self-serve, toolkit)? This determines design system, voice, CTA architecture, and URL.

2. Conversion Goal What should the reader do after finishing? Options vary by article type:

Purchase a product — $27 toolkit, GPT-powered tool, template pack. Article teaches the system; product is the deployed version.
Book a diagnostic — 60-minute session, one constraint identified. Article builds urgency around a problem the reader can't solve alone.
Subscribe — Substack/email list growth. Article establishes authority; CTA is "get the next one."
Hybrid — Primary CTA is one of the above, with a soft secondary mention of another.

The conversion goal changes the entire article architecture. A purchase-oriented article teaches completely and sells the shortcut. A diagnostic-oriented article builds pressure and leaves the solution incomplete. These are different persuasion strategies.

3. Core Concept What is Claude seeing in the source material? Claude should propose:

The core insight in 1–2 sentences
The assumption it challenges (what the audience currently believes that's wrong)
The named mechanism candidate (2–3 options for the thing this piece names)

This is the hardest intake question. Claude needs to do actual thinking here — not summarize the source material, but find the insight inside it that makes this piece say something no one else is saying.

4. Interactive Elements Claude proposes 3–5 interactive candidates based on the source material, each with:

What it does (one sentence)
What cognitive work it performs for the reader
Where it would sit in the narrative

Then negotiate down to 2–3. The interactives should do fundamentally different jobs — not three different UIs that all say the same thing. Good test: describe what each interactive teaches the reader. If two of them teach the same lesson, one needs to go.

The Politeness Premium used three interactives that each did different cognitive work:

Retrospective Scorer: "see your own pattern" (mirror)
Decoder: "learn to read signals differently" (retraining)
Simulator: "use the system before buying it" (practice)

Each one built on the previous. That's the standard.

5. Title Direction Claude proposes 2–3 title options with rationale for each. Criteria:

Creates a curiosity gap the reader must close
Works as a LinkedIn hook (distribution-friendly)
Promises a system or revelation, not just a topic
Is a claim, not a question

"Your Worst Clients All Scored the Same" works because it implies a hidden pattern. "The Proof Gap" works because it names an invisible problem. Both create itch.

6. Narrative Arc Based on the concept, conversion goal, and interactives, Claude proposes the section flow. This is NOT always seven movements. The Politeness Premium used: Pattern → Mirror → Trap → Decoder → System → Simulator → Constraint → Assessment → CTA. The Proof Gap used the classic seven. The arc should be driven by the argument, not by a template.

Claude proposes the arc with section names, eyebrow labels, and one-sentence descriptions of what each section does. You adjust.

7. Reframe Level How much does the source material need to be reframed for this brand/audience?

Light — Source material is already in the right voice. Mostly structural work.
Medium — Keep the teaching but change the landing. Source might teach a self-serve system; article reframes toward "this is what we deploy for you."
Heavy — Source material is raw notes or transcripts. Article needs to find and build the argument from scratch.

After the Intake

Once all seven decisions are locked, Claude summarizes them as a Concept Lock — a single block that captures every decision. This is the build spec for the first pass.

Example Concept Lock:

CONCEPT LOCK: The Politeness Premium
Brand: Advisory OS
Conversion: $27 toolkit purchase
Core insight: Advisors evaluate prospects by charm instead of criteria. Costs 20-40+ hours per wrong-fit client.
Named mechanism: The Politeness Premium — the cost of evaluating prospects by social skill instead of scoring criteria.
Title: Your Worst Clients All Scored the Same
Interactives (3):
  1. Retrospective Scorer (Mirror) — score last 3 clients, see clustering pattern
  2. Politeness Trap Decoder (Retraining) — tap phrases, see what they actually scored
  3. Live HQP Simulator (Practice) — score a fictional prospect, get verdict
Arc: Pattern → Mirror → Trap → Decoder → System → Simulator → Constraint → Assessment → CTA
Reframe: Medium — teach the system, land on "get the deployed version"
CTA: Get the Toolkit · $27

Phase 2: The First Pass

Claude builds the full HTML article from the Concept Lock. The first pass should be complete and functional — not a draft with placeholders. But Claude should flag known weaknesses rather than pretending the first pass is finished.

Things Claude should flag after the first pass:

"The Pattern section has one story. A second composite with escalating numbers would strengthen it."
"The Decoder interaction is basic — hover/tap to reveal. This could use more visual ceremony."
"The Constraint section explains but doesn't create emotional pressure. May need time-compression rewrite."

This sets up productive revision cycles where both parties know what needs work.

Phase 3: Revision Cycles

You review the first pass and give specific editorial feedback. Claude rebuilds what needs fixing. This is where the quality happens.

What good feedback looks like:

"The Trap section paragraph is too dense. Break each insight into its own beat."
"David scores too high on everything. Make him genuinely ambiguous."
"Need a breathing quote between Pattern and Mirror."
"The Constraint section explains the problem but doesn't make me feel it. Use time compression."

What low-value feedback looks like:

"Make it better."
"The prose needs work." (Which prose? What's wrong with it?)

Expect 2–3 cycles. The Politeness Premium shipped after three: v1 (full build), v2 (structural fixes — second story, named mechanism, ambiguous prospect, Constraint section added), v2.1 (three prose fixes — bridge quote, Trap beats, Constraint time compression).

Narrative Architecture

Not a Fixed Template

The seven-movement structure (Hero → Pattern → Cost 1 → Cost 2 → Constraint → Shift → CTA) is one valid architecture. It works well for articles that name an invisible problem and route to a diagnostic booking. The Proof Gap uses it.

But it's not the only architecture. The Politeness Premium uses: Pattern → Mirror → Trap → Decoder → System → Simulator → Constraint → Assessment → CTA. That's nine sections, not seven. It works because the article is teaching a complete system, not just naming a problem.

What Every Architecture Needs

Regardless of section count or order, every article needs these functions served:

Function	What It Does	Required?
Hook	Title + hero that creates a gap the reader must close	Yes — always
Recognition	Reader sees themselves in a story or pattern	Yes — always
Named mechanism	A definition box that gives language to something the reader has felt but never articulated	Yes — always
Cost/stakes	At least one section making the invisible cost visible	Yes — at least one
Constraint	Why the reader can't solve this themselves / why knowing isn't enough	Yes — always
Interactive evidence	2–3 embedded interactives that do cognitive work, not decoration	Yes — always
Breathing	Big quotes or anchor phrases between dense sections	Yes — 1–2 minimum
CTA	Clear next step matched to the conversion goal	Yes — always

Optional functions that appear in some architectures:

Second cost — genuinely different cost the reader hadn't considered
System teaching — explaining the methodology (for articles selling self-serve products)
Practice/simulation — letting the reader use the system before buying
Self-assessment — mirror cards that let the reader identify their starting point
Comparison table — showing why current approaches fail

Architecture Follows Goal

If the conversion goal is...	The architecture tends toward...
Diagnostic booking	Classic seven movements. Build pressure, leave solution incomplete, route to call.
Product purchase	Teach the system completely, let them practice it, sell the deployed/automated version.
Subscribe/list growth	Establish authority, deliver complete value, CTA is "get the next one."

Prose Standards

Voice

Direct, specific, warm without being casual. Speaks to practice owners as peers. Names things precisely. Never hedges when the pattern is clear.

Signature characteristics:

Short paragraphs (2–4 sentences typical, never more than 5)
Last sentence of each paragraph hits harder than the first
Specific numbers over vague claims. "$120K client outcome" not "significant results."
Named mechanisms over descriptions. "The Politeness Premium" not "the tendency to misjudge prospects."
Em dashes for emphasis, not parentheses
Non-breaking spaces ( ) before line-ending words to prevent orphans

What the Voice Is Not

Not academic. No "furthermore" or "it should be noted."
Not breathless. No "game-changing" or "revolutionary."
Not self-deprecating. No "I know this sounds simple, but..."
Not prescriptive without evidence. Every claim connects to a specific pattern from practice work.

Prose Density

Each paragraph should do one thing. When a paragraph tries to make three points, break it into three paragraphs. The Politeness Premium's Trap section works because "Politeness is a social skill, not a buying signal" stands alone. The next paragraph explains why — warmth is practiced. The next explains the flip side — agreement avoids vulnerability. Each beat lands before the next arrives.

Time Compression

The strongest prose technique in these articles is time compression — walking the reader through their own future in accelerating time. The Proof Gap: "$120K in outcomes fading right now. By next quarter it's a rough number. By next year the details are gone." The Politeness Premium Constraint: "Tomorrow morning you'll remember the framework. By the fifth call, you'll forget to score Style. By the tenth call, you're back to gut feel."

Use time compression in the Constraint section to create urgency. Don't explain why knowing isn't enough — make the reader feel their own knowledge decaying in real time.

Interactive Standards

Article-Embedded vs. Standalone

Article-embedded interactives are visualizations and exercises that serve the narrative. They show things, reveal things, or let the reader practice things. They live inside the prose-interactive-prose sandwich.

Standalone micro-tools (calculators, diagnostics, revelations) are separate products at their own URLs. They have their own input flows, scoring, and CTAs. They are NOT article-embedded interactives, even though they may relate to the same topic.

Do not embed a calculator inside an article. Calculators ask for user input and return personalized financial data. That's a standalone tool function. Article interactives visualize, decode, simulate, or mirror — they serve the argument.

The Prose-Interactive-Prose Sandwich

Every embedded interactive needs:

Setup prose — 1–2 paragraphs telling the reader what to look for and why it matters
Interactive — The visualization or interaction
Interpretation prose — 1–2 paragraphs explaining what the reader just experienced and connecting it back to the argument

Without setup, the interactive has no context. Without interpretation, the interactive has no meaning. Both failures turn evidence into decoration.

Each Interactive Must Do Different Cognitive Work

The test: describe what each interactive teaches the reader in one sentence. If two of them teach the same lesson, one needs to change.

Bad: Three interactives that all show "wrong-fit clients are expensive" in different UIs. Good: One that makes you see your own pattern (mirror), one that retrains how you read signals (decoder), one that lets you use the system (simulator).

Design Rules

Theme Alternation

Sections alternate between dark (charcoal) and light (cream/off-white). Never two consecutive sections with the same background. The piece should breathe between dark and light.

Exception: Two dark sections can be continuous if they're connected content (e.g., a bridge quote followed by an interactive section). Use padding-bottom: 0 on the first and padding-top: 48px on the second to maintain visual continuity.

Typography and Brand

Headlines: Cormorant Garamond, 400 weight
Body: Inter, 400 weight
Labels/eyebrows: Inter, 500 weight, uppercase, tracked (0.15–0.25em)
Gold (#b79d64) for labels, emphasis in headlines, interactive accents
Gold-on-light (#6b5d3e) for gold text on cream/off-white backgrounds
All colors hardcoded as hex values — no CSS variables in output HTML
Footer: 3px solid #b79d64 top border

CTA Architecture

The CTA section must match the conversion goal locked in intake.

For product purchase ($27 toolkit, etc.):

Big quote above the CTA that echoes the article's core claim
Product name as headline
One-sentence description of what the product does
Price displayed prominently
Single CTA button with price: "Get the Toolkit · $27"
Subtext: delivery details (instant access, what's included)

For diagnostic booking:

Headline: "Book a Systems Diagnostic"
Description of what happens in the diagnostic (what you look at, what they leave with)
CTA button: "Book Your Diagnostic"
Barrier-lowering close: "Whether we work together after that is a separate conversation."

For subscribe:

Headline that promises the next piece
Single subscribe CTA
No price, no booking

One CTA. One action. No split focus.