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 | Element | Weight | Size | Color | |---------|--------|------|-------| | Title h1 | 800 | 4.2em | Gradient | | Statement h1 | 800 | 3.4em | Text color | | Content h1 | 800 | 3.6em | Text color | | BIG IDEA | 800 | 1.3em | Accent | | Bullets | 400 | 2.1em | Text color | | Sub-bullets | 400 | 0.85em (relative) | Sub-text | | Image h1 | 800 | 2.8em | Text color | | Transition h1 | 400 | 2.8em | Text color | | Logo | 800 | 52px height | 55% opacity | ## 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 | Don't | Do Instead | |-------|-----------| | More than 6 bullets on one slide | Split into 2 slides or use statement + content | | Full sentences as bullets | Short phrases (3-7 words) | | Multiple accent colors on one slide | Max 1-2 words in accent per slide | | Decorative borders, shadows, gradients on content | Plain backgrounds, no decoration | | Clip art or stock photos | Use Nano Banana Gemini for diagrams, or no images at all | | Slide with no accent word | Every slide should have at least one `<strong>` | | Using accent on unimportant words | Accent = the word the audience must remember | | Paragraphs of text | If it's more than 2 lines, break it into bullets or multiple slides | ## 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 ```html <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. | Token | Light Theme (dojo-academy) | Dark Theme (dojo-academy) | |-------|-------------|------------| | Background | #FFFFFF | #0F0F13 | | Text | #000000 | #FFFFFF | | Sub-text | #4F4F67 | #AEAEC8 | | Footer | #AEAEC8 | #4F4F67 | | Accent | #C980FC | #C980FC | | Accent Secondary | #FF7151 | #FF7151 | | Font | Inter 400/800 | Inter 400/800 |