← Vault Index
Source: frameworks/kit-aos-interactive-narrative/02-aos-article-terminology.md

Thought Leadership Article — Terminology

Narrative Functions (Not Fixed Movements)

Every article serves these functions, but the order, count, and labeling adapt to the specific argument. The seven-movement structure is one valid arrangement. Other arrangements work when the argument requires them.

FunctionWhat It DoesExamples from Published Articles
HookTitle + hero create a gap the reader must close"Your Worst Clients All Scored the Same" / "The Proof Gap"
RecognitionReader sees themselves in a composite story or patternPattern section with escalating specifics and "Every single one"
NamingDefinition box gives language to something felt but never articulated"The Politeness Premium" / "The Proof Gap" / "The Embarrassment Loop"
CostMakes an invisible cost visible, often through an interactiveTrust Tax accumulator / $44,500 wrong-fit calculation
ConstraintNames why knowing isn't enough — why the reader can't solve this aloneTime-compression decay / comparison table of approaches
EvidenceInteractive that does cognitive work supporting the argumentRetrospective Scorer / Decoder / Sequencer
BreathingBig quote or anchor phrase between dense sections"They showed you who they were. You just didn't have numbers for it."
CTAClear next step matched to conversion goal"Get the Toolkit · $27" / "Book a Systems Diagnostic"

Published Architecture Examples

The Proof Gap (diagnostic booking): Hero → Pattern + Definition → Cost 1 (Trust Tax) → Cost 2 (Competitor Toggle) → Constraint (comparison table) → Shift (Sequencer) → Assessment Cards → CTA

The Politeness Premium (product purchase): Hero → Pattern (two stories) → Bridge Quote → Mirror (Retrospective Scorer) → Trap + Definition (Politeness Premium) → Decoder → System (six criteria) → Simulator → Constraint (comparison table + time compression) → Assessment Cards → CTA


Interactive Types (Article-Embedded)

These are interactives that live inside articles within the prose-interactive-prose sandwich. They are distinct from standalone micro-tools.

Proven Types (Used in Published Articles)

TypeWhat It DoesCognitive WorkEmotional ResponseExample
AccumulatorDots fill, counter growsMakes invisible cost visible through accumulationDread — the number keeps growingTrust Tax (Proof Gap)
Decay BarBar declines with milestonesShows a window closing over timeUrgency — time is running outDecay Clock (No-Show Revival)
Flip CardsTap/hover to reveal backShows perception vs. reality gapSurprise — "that's not what I expected"What You Show / What They Think (Proof Gap)
Toggle ComparisonTwo-state switchBinary before/after contrastClarity — instant reframeCompetitor Toggle (Proof Gap)
SequencerAuto-plays through momentsWalks through a progression step by stepRecognition — "I've seen this happen"Four Moments of Proof (Proof Gap)
Accordion PlaybookClick to expand, running totalBuilds understanding piece by pieceAgency — "I'm building something"Wound Playbook Builder (No-Show Revival)
Retrospective ScorerRate past experiences on criteria, see patternForces reader to confront their own dataDiscomfort — "my pattern is real"Score Your Last 3 Clients (Politeness Premium)
Signal DecoderTap items to reveal hidden meaning/scoreRetrains perception — reader learns to read signals differentlySurprise — "that positive phrase scored a 2?"What They Said vs. What It Scored (Politeness Premium)
Live SimulatorScore a fictional scenario, get a verdictLets reader practice the system before buyingTension — "I'm not sure about this score" (ambiguity is intentional)Score a Prospect Right Now (Politeness Premium)

Proposed Types (Not Yet Used)

TypeWhat It DoesWhen to Use
Drag-to-MatchPair items correctlyWhen the argument is about mismatched approaches
Timeline SliderScrub between before/after statesWhen the shift is gradual, not binary
Stacked RevealClick to reveal layersWhen complexity builds in visible stages

What Is NOT an Article-Embedded Interactive

Calculators — These ask for user input (hours, rate, headcount) and return personalized financial data. They are standalone micro-tools at their own URLs. Do not embed a calculator inside an article.

Diagnostics — These are scored question flows that categorize the reader. They are standalone micro-tools. The article may contain a Retrospective Scorer (which mirrors), but not a full diagnostic (which sorts and routes).


Prose-Interactive-Prose Sandwich

The required pattern for every embedded interactive:

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

Without step 1, the interactive has no context. Without step 3, the interactive has no meaning.


Structural Elements

ElementWhat It IsWhere It Appears
Eyebrow labelUppercase, tracked, gold/gold-on-cream, small text above section headlineTop of every section
Section headlineCormorant Garamond, large, statement not questionBelow eyebrow in every section
Lead paragraphFirst paragraph after headline, slightly larger, stone colorSections that need a thesis sentence
Definition boxGold left border, subtle background, names a mechanismRequired once per article (usually early). Occasionally a second one for criteria/system.
Big quoteCormorant Garamond italic, centered, gold emphasis on key wordBetween sections as a breather, 1–2 per article
Bridge quoteBig quote placed between two continuous dark sectionsMarks a narrative transition (recognition → curiosity, problem → system). NOT a layout technique — it's a narrative device. See 01-article-context.md for writing guidance.
Comparison table2–3 column table showing mismatch, final row in goldConstraint section (strongly recommended)
Self-assessment cards3 cards with questions that follow a mirror → confrontation → possibility arcNear the end, before CTA
CTA boxConversion-goal-specific (see 01-context.md)Final section

Self-Assessment Card Arc

The three cards are not three independent mirrors. They follow an emotional progression:

  1. Mirror — "How many of your current clients would score below 3 on Values?" (Reader confronts their own data)
  2. Confrontation — "Can you name the specific score for your most difficult client right now?" (Pushes from abstract to concrete)
  3. Possibility — "What would change if every triage call had a score?" (Opens the door the CTA walks through)

Each card should be one question (as the title) and 1–2 sentences of context (as the text). The card titles are questions. The card text explains what the question reveals, not the answer.


Theme Alternation

TermMeaning
Dark sectionBackground: charcoal gradient (#1a1a1a → #2a2a2a). Text: cream (#f5f4f0).
Cream sectionBackground: cream (#f5f4f0). Text: charcoal (#1a1a1a), body text slate (#4a5a6a).
Off-white sectionBackground: off-white (#faf9f7). Text: charcoal (#1a1a1a), body text slate (#4a5a6a).

Sections alternate dark/light. Never two consecutive same-background sections unless they're continuous content (bridge quote into interactive).


Content Ecosystem Terms

TermMeaning
TopicThe named concept for a given week (e.g., "The Politeness Premium," "The Proof Gap")
Campaign nameThe mechanism name, used across all distribution assets (e.g., files named politeness-premium-*)
EcosystemThe complete set of five assets produced per topic
Framework pageThe permanent evergreen hub housing article + tools + video + CTA at one URL
BriefingTime-limited video page with countdown. Expires to become navigation hub.
Micro-toolStandalone interactive tool at its own URL. Three archetypes: diagnostic, calculator, revelation.
Campaign distributionPost image + LinkedIn post + Substack note + email. Promotes the article and tools.

Micro-Tool Archetypes (Referenced, Not Built Here)

ArchetypeWhat It DoesCTA Pattern
DiagnosticScored questions → categorized resultRoutes to booking or companion tools
CalculatorInput numbers → personalized financial realityRoutes to booking or companion tools
Revelation / FinderGuided questions → reveals what reader didn't know they hadRoutes to booking or product offer

These are separate projects. The article author needs to understand what they do because the article may reference them in the CTA or framework page context.


Brand Color Reference (Quick Access)

NameHexUsage
Gold#b79d64Labels, emphasis, interactive accents, CTA buttons
Gold Light#c4aa74Hover states
Gold-on-light#6b5d3eGold text on cream/off-white backgrounds (accessibility)
Charcoal#1a1a1aDark backgrounds, text on light backgrounds
Deep Charcoal#2a2a2aGradient endpoint for dark sections
Cream#f5f4f0Light backgrounds, text on dark backgrounds
Off-white#faf9f7Alternate light background
Stone#8a8680Secondary text, subtle labels
Slate#4a5a6aBody text on light backgrounds

All colors hardcoded as hex or defined in CSS variables (:root {}) within the same file. No CSS variables in templated systems where definitions might be separated from usage.