Slide Design

Slide Design Knowledge Base

This skill encodes the slide-design heuristics for video-class decks. The actual HTML/CSS template artifacts that decks render against are consumer-specific — for example, dojo-academy ships:

• content/_templates/slides/dojo-slides-light.html
• content/_templates/slides/dojo-slides-dark.html

Other consumer plugins may ship their own skinned templates. This skill describes the design system; the consumer plugin owns the brand tokens.

Design Philosophy

Inspired by Alex Hormozi's presentation style: extreme clarity, zero decoration, surgical use of color. Every slide says ONE thing. If the audience can't absorb it in 3 seconds, the slide has too much.

The 7 Slide Types

1. Title Slide

• Course or section title only
• Massive centered text with gradient (consumer-specific brand colors — e.g. dojo-academy uses Lilac → Peach)
• Optional subtitle (module name, course name)
• Use: opening slide of every deck

2. Statement Slide

• One sentence broken across 1-2 lines
• The 1-2 most important words get <strong> (renders in the consumer's primary accent)
• Action phrases get <u> (underline in accent color)
• No bullets, no lists — just the statement
• Use: between content slides for pacing, to land a key point

3. Content Slide

• Numbered header matching video script section (e.g., "1) Why Shipping Beats Perfection")
• BIG IDEA label in accent color, uppercase, below header
• 3-6 bullet points maximum
• Sub-bullets for supporting details (smaller, muted color)
• Use: main teaching slides

4. Two-Column Slide

• Header + two columns of bullets
• Use: comparisons, lists of examples, before/after

5. Quote Slide

• Centered blockquote in italic
• Key word(s) highlighted in accent
• Attribution below in muted color
• Use: to reinforce a point with authority

6. Image Slide

• Header text above a diagram, flowchart, or illustration
• Image fills the remaining slide space (centered, contained)
• Use: when a concept is best explained visually — processes, flows, comparisons, architecture
• Images generated via Nano Banana Gemini (/diagram, /generate)
• Keep the header short (one line) so the image gets maximum space
• Use branded diagrams — clean, modern, consumer's brand colors (e.g. dojo-academy uses dark navy-purple bg with accent colors)

7. Transition Slide

• Short phrase (lighter font weight)
• Signals a section change
• Use: between major sections of the talk

Accent Color Rules

• Primary accent: consumer's primary brand color (e.g. dojo-academy uses Lilac #C980FC) — used on key words via <strong>
• Secondary accent: consumer's secondary brand color (e.g. dojo-academy uses Peach #FF7151) — CTAs only, used sparingly
• Rule: Only 1-2 words per slide get the accent. If everything is highlighted, nothing is.
• Underline: Use <u> for action phrases the audience should do

Typography Hierarchy

Content Extraction Rules

When converting a video script to slides:

1. One slide per major point — if a script section has 3 sub-points, that might be 1 content slide + 1 statement slide, or 3 separate slides
2. Headers from section titles — "Section 1: Why Shipping Matters" becomes "1) Why Shipping Matters"
3. BIG IDEA from the thesis — find the single sentence that captures the section's point, compress to 3-6 words, uppercase
4. Bullets from supporting points — extract the concrete, scannable takeaways
5. Statement slides for emphasis — pull out the most quotable/memorable line from each section and give it its own statement slide
6. Opening hook → statement slide — the opening hook becomes a bold statement slide after the title
7. Closing CTA → transition slide — the closing becomes a transition or statement slide with the call to action

Slide Pacing

• Aim for 1 slide per 30-60 seconds of speaking time
• A 10-minute video should have roughly 12-18 slides
• Alternate between content slides and statement slides for rhythm
• Never put two content slides back-to-back without a breather

Anti-Patterns

Image Generation

Consumer plugins may ship an image-generation extension — for example, dojo-academy ships Nano Banana Gemini. The workflow below uses the dojo-academy extension as the worked example; consumers without it should substitute their own image pipeline (Option B — direct Gemini API call — works without any extension installed).

Nano Banana Gemini (dojo-academy reference workflow)

When a slide concept is best explained visually (processes, flows, comparisons, architecture), use the Nano Banana Gemini extension (dojo-academy-specific) to generate images.

When to use image slides

Image density rule: 35-40% of slides must be image slides. For a 15-slide deck, that means 5-6 image slides. This is the Hormozi industry standard — pure text decks look like corporate training.

Two ways to use images:

1. content-image slide (PREFERRED) — text on left, image on right, ONE slide:

• Use when a concept has BOTH text bullets AND a visual (analogy, diagram, comparison)
• MERGE RULE: Never create a content slide followed by a separate image slide for the same concept. Merge them into one content-image slide.
• Examples: "Delegation" bullets + fork-in-road diagram, "Product Description" bullets + restaurant analogy

2. Standalone image slide — image only, full-width:

• Use ONLY for diagrams that don't need text: loops, flowcharts, spectrums, process flows
• Examples: "The 4D Loop" circular diagram, "The Decision Tree" flowchart, "The Autonomy Spectrum"

Image subjects to generate:

• Analogies (restaurant analogy, seatbelt analogy, iceberg, etc.)
• Comparisons or before/after visuals
• Architecture diagrams
• Loops and cycles (4D Loop, feedback loops)
• Flowcharts and processes
• Any concept that is spatial, sequential, or comparative
• Use the consumer's branded style (e.g. dojo-academy ships: dark navy-purple bg, white labels, Lilac/Coral/Pink accents, rounded containers)

Use Gemini model gemini-3-pro-image-preview (not preview models — they don't support image generation).

How to generate

Option A — Nano Banana extension (if installed):

1. Use /diagram for flowcharts and technical diagrams
2. Use /generate for illustrations and conceptual visuals
3. Specify the consumer's brand style. For example, dojo-academy uses: --styles "clean modern, dark navy-purple (#272749) background, white labels, Dojo accent colors (lilac #C980FC, coral #FF7151, pink #F488F8), rounded containers, colored circle badges"
4. Output saves to ./nanobanana-output/

Option B — Gemini API direct (recommended):

1. Call gemini-3-pro-image-preview model with responseModalities: ["TEXT", "IMAGE"]
2. Prompt should include the consumer's brand-style spec. For example, dojo-academy uses: "Clean modern diagram on a dark navy-purple (#272749) background. White text labels. Accent colors: lilac (#C980FC), coral (#FF7151), pink (#F488F8). Rounded rectangle containers. Numbered items use colored circle badges. Minimal, no shading, no gradients on background. 16:9 aspect ratio"
3. Extract the base64 image from candidates[0].content.parts[].inlineData.data
4. Save to ./nanobanana-output/ for reference

Both options: Convert output to base64 and embed in the <img> tag inside .slide-image-wrapper

Image slide markup

<section class="image">
  <h1>How the <strong>Builder</strong> Loop Works</h1>
  <div class="slide-image-wrapper">
    <img src="data:image/png;base64,IMAGE_BASE64" alt="Description">
  </div>
  <img class="slide-logo" src="data:image/png;base64,LOGO_BASE64" alt="Brand logo">
</section>

Style guidelines for generated images

• Use the consumer's branded style (e.g. dojo-academy uses dark navy-purple #272749 background, white labels, rounded containers)
• Consumer accent palette (e.g. dojo-academy palette): Lilac (#C980FC), Coral (#FF7151), Pink (#F488F8), Purple (#A65FF6)
• Numbered items use colored circle badges (gradient through the consumer's palette — e.g. dojo-academy: purple → pink → coral)
• Clean, modern, minimal — NOT hand-drawn/sketch aesthetic
• No photorealistic images or stock photo aesthetics
• Keep diagrams simple — if it needs a legend, it's too complex for one slide

Brand Tokens

The brand-token table is consumer-specific. The structure below shows the dojo-academy reference values; consumer plugins override these in their own brand overlay.