Templates

Templates in Pitch Smith are reusable structures that define the layout and visual organization of your slides and presentations. They work hand-in-hand with themes: a theme provides the brand identity (colors, fonts, shapes), while a template provides the structural blueprint (where content goes, how elements are arranged, what visual patterns are used).

What are slide templates?

A slide template is a self-contained HTML/CSS file that defines the layout for a single slide type. Each template specifies the structural arrangement of content regions -- where the headline goes, how body text flows, where images or data visualizations are placed, and what decorative elements frame the content.

Pitch Smith ships with a default catalog of slide templates, each designed for a specific presentation purpose:

Template	Description	Typical Use
Title	Bold opening layout with a full-bleed image panel and prominent headline	Opening slides, closing slides, section dividers
Content	Versatile two-column layout with headline, body text, and visual placeholder	General information, text-heavy slides
Callout	Dramatic single-statistic or quote spotlight on a dark canvas	Key statistics, quotes, takeaways
Agenda	Structured overview with numbered sections and descriptions	Setting expectations, table of contents
Comparison	Side-by-side layout with distinct headers and bullet points	Pros/cons, before/after, contrasting options
Process Flow	Horizontal step progression with numbered stages and connecting elements	Timelines, workflows, sequential processes

Each template is an HTML file that renders at 1920x1080 pixels (standard presentation resolution). The HTML uses CSS Grid or Flexbox for layout, and references theme CSS variables for all visual styling. This separation means the same template looks completely different when paired with different themes -- the structure stays the same, but the brand identity changes.

Here is a simplified example showing the key structural patterns in a slide template:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=1920, height=1080">
  <style>
    :root {
      /* Theme CSS variables are injected at build time */
      --color-primary: var(--color-primary, #3a61ff);
      --color-bg-default: var(--color-bg-default, #f8fafc);
      --color-text-heading: var(--color-text-heading, #131023);
      --color-text-body: var(--color-text-body, #334155);
      --font-heading: 'Fraunces', Georgia, serif;
      --font-body: 'DM Sans', sans-serif;
    }

    .slide {
      width: 1920px;
      height: 1080px;
      background: var(--color-bg-default);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      padding: 96px 120px;
    }

    .title {
      font-family: var(--font-heading);
      font-size: 48px;
      color: var(--color-text-heading);
    }

    .body-text {
      font-family: var(--font-body);
      font-size: 16px;
      color: var(--color-text-body);
    }
  </style>
</head>
<body>
  <div class="slide">
    <div class="text-column">
      <span class="eyebrow" contenteditable="true"
            data-field="eyebrow">CATEGORY</span>
      <h1 class="title" contenteditable="true"
          data-field="title">Slide Headline</h1>
      <p class="body-text" contenteditable="true"
         data-field="body">Supporting content goes here.</p>
    </div>
    <div class="visual-column">
      <!-- Visual placeholder or image region -->
    </div>
  </div>
</body>
</html>

Notice the key patterns:

CSS variables (var(--color-primary)) connect the template to the active theme
contenteditable="true" makes text regions editable in the slide viewer
data-field attributes identify content regions so AI can populate them during slide generation
Fixed dimensions (1920x1080) ensure consistent rendering across all templates

What are deck templates?

While slide templates define individual slide layouts, deck templates define complete presentation structures. A deck template is a curated collection of slide templates arranged in a sequence designed for a specific presentation type.

For example, a "Pitch Deck" template might include:

Title slide (dark background, bold headline)
Agenda slide (overview of what's covered)
Content slides (2-3 information slides)
Comparison slide (your solution vs. alternatives)
Callout slide (key metric or testimonial)
Process Flow slide (implementation timeline)
Title slide (closing with call-to-action)

Deck templates give you a starting point for common presentation types. Instead of building a deck from scratch, you select a deck template and Pitch Smith scaffolds the full slide sequence. You then customize the content while the structure and brand styling are already in place.

Deck templates are particularly useful when you need to produce presentations quickly and consistently -- for example, recurring reports, client proposals, or team updates that follow a standard format.

Browsing templates

Pitch Smith provides several ways to explore available templates:

Template catalog

The slide template catalog is a JSON file that lists all available slide templates with their metadata -- name, description, typical use cases, and preferred background mode (dark or light). The catalog lives in your project's .slide-builder/config/catalog/ directory.

When you create a new slide, Pitch Smith uses the catalog to match your content to the most appropriate template. The AI considers the slide's role in the presentation (opening, data, comparison, closing) and selects a template whose design intent matches.

VS Code extension

If you use the Pitch Smith VS Code extension, the Catalog panel provides a visual interface for browsing both slide and deck templates. You can view template cards, filter by use case, and preview how templates render with your current theme.

CLI commands

From the command line, the /pitchsmith:status command displays information about your project configuration, including available templates.

How templates use themes

The relationship between templates and themes is fundamental to how Pitch Smith maintains brand consistency. Templates define structure; themes define style. Neither hardcodes the other's concerns.

Here is how this works in practice:

Colors: A template heading uses color: var(--color-text-heading) instead of color: #131023. When you switch themes, the heading color updates automatically.
Typography: A template body paragraph uses font-family: var(--font-body) instead of font-family: 'DM Sans'. Different themes can use different body fonts without template changes.
Shapes: A template card uses border-radius: var(--radius-medium) and box-shadow: var(--shadow-small). The roundness and shadow depth come from the theme.
Backgrounds: A template specifies whether it prefers a dark or light background mode, and the theme's workflowRules.colorSchemes provides the actual colors for each mode.

This separation means you can:

Create one template, use it across multiple brands -- The same "Content" template works for any theme because it never references specific colors or fonts.
Update your brand without touching templates -- Changing your primary color in the theme updates every slide that uses that color variable.
Mix and match -- Add new slide templates to your catalog without worrying about brand consistency. As long as the template uses CSS variables, it automatically inherits the active theme.

Creating and modifying templates

Pitch Smith provides tools for both creating new templates and modifying existing ones.

Creating slide templates

To add a new slide template to your project's catalog, use the /pitchsmith:add-slide-template command. This launches an AI-assisted workflow that:

Asks you to describe the slide layout you want (e.g., "a three-column comparison with icons above each column")
Generates the HTML/CSS template using your current theme's CSS variables
Adds the template to your slide template catalog with metadata (name, description, use cases)
Renders a preview so you can refine the design

Creating deck templates

To create a new deck template, use the /pitchsmith:add-deck-template command. This workflow:

Asks you to describe the presentation type (e.g., "quarterly business review with data-heavy sections")
Selects and sequences appropriate slide templates from your catalog
Creates the deck template definition with the slide order and any section groupings
Optionally builds a sample deck so you can preview the full flow

Modifying templates

Existing templates can be modified by editing the HTML/CSS files directly in your project's .slide-builder/config/catalog/slide-templates/ directory, or by using the AI editing capabilities through the /pitchsmith:edit command to adjust a template's layout visually.

The Template Management guide (coming in Story 4.5) provides detailed step-by-step instructions for all template operations.

Themes -- How design tokens power template styling
Template Management guide (coming in Story 4.5) -- Step-by-step instructions for browsing, creating, and modifying templates
Directory Structure reference (coming in Story 4.6) -- Where template files live in your project

What are slide templates?​

What are deck templates?​

Browsing templates​

Template catalog​

VS Code extension​

CLI commands​

How templates use themes​

Creating and modifying templates​

Creating slide templates​

Creating deck templates​

Modifying templates​

Related resources​