Story Creation Guide: From Insight to Story

How to distill a complex Insight or Blog Post into a high-impact, scannable Story.

The Core Philosophy

Stories are for Scanners.

  • One thought per slide.
  • Maximum Impact typography.
  • Strict Structure (Title → Subtitle → Visual).

1. The Anatomy of a Story

A story is a sequence of 10 distinct slides that follow a narrative arc.

The Arc Template

  1. The Hook (Stat): A massive number or shocking fact.
  2. The Impact: What that number means for the reader.
  3. The Logic (List): 3 steps or reasons (The “Why”).
  4. The Reinforcement: A second Impact slide.
  5. The Detail (List): Tactical advice (The “How”).
  6. The Rule: A short, memorable maximization.
  7. The Evidence: A reality check or proof point.
  8. The Definition: A word (often German/foreign) that captures the essence.
  9. The CTA: Clear action + “Read full insight”.

2. Component Reference

We use the <Slide /> component. Do NOT use raw Markdown.

Type: stat (The Hook)

Centered. Giant Number.

<Slide 
  type="stat" 
  title="==84%==" 
  subtitle="of readers scan, not read." 
/>

Type: impact (The Statement)

Left-aligned. Massive text.

<Slide 
  type="impact" 
  label="Reality Check" 
  title="Write for ==scanners==" 
  subtitle="Not readers." 
/>

Type: default (The List / Content)

Standard header + content slot. Use .slide-list-item for clean lists.

<Slide type="default" label="The Process" title="Three outputs.">
  <div class="slide-list-item">
    <span class="list-num">1.</span>
    <div class="list-content"><strong>Answer First</strong></div>
  </div>
  <div class="slide-list-item">
    <span class="list-num">2.</span>
    <div class="list-content"><strong>Details Second</strong></div>
  </div>
</Slide>

Type: definition (The Word)

For introducing a concept word. Handles long words via auto-scaling.

<Slide 
  type="definition" 
  label="German has a word for this:" 
  subtitle="You'll want to add more."
  title="==Verschlimmbessern=="
  pronunciation="/fɛɐ̯ˈʃlɪmˌbɛsɐn/"
>
  To make something <strong>worse</strong> by trying to improve it.
</Slide>

Type: cta (The End)

Action oriented. Button appears automatically if ctaUrl is present.

<Slide 
  type="cta" 
  title="Write less. ==Structure more.==" 
  subtitle="How do ==you== make docs scannable?"
  ctaUrl="/insights/doc-patterns"
  ctaText="Read full insight"
>
  <p class="secondary-text">Share below 👇</p>
</Slide>

3. Workflow: Distilling Content

Input: A 1000-word Insight article. Output: 10 Slides.

Step 1: Find the Number. Scan the article for the most compelling statistic. That is Slide 1.

Step 2: Find the Enemy. What is the bad habit? (e.g. “Writing for readers”). Call it out in Slide 2.

Step 3: Simplify the Solution. Can you explain the fix in 3 bullet points? That is Slide 3.

Step 4: Find the Anchor Word. Is there a specific term, foreign word, or concept that captures the feeling? Use type="definition".

Step 5: The One Rule. If the user remembers NOTHING else, what is the 3-word rule? (e.g. “Structure > Style”). Use type="impact".

Step 6: Links. Format the CTA to point back to the full Insight (/insights/...). usage: ctaUrl="/insights/slug".

4. Visual Rules (Accent)

Use ==text== to highlight key words in primary color (Red).

  • Do: Highlight the verb or the subject. ==Structure== works.
  • Don’t: Highlight everything.
  • Do: Use formatting in Lists (<strong>).