Templates

Templates control the visual appearance of your presentations - layouts, typography, colors, and branding. Impresent comes with four built-in templates and supports custom templates for your brand.

Built-in Templates

Minimal

Clean and simple with lots of whitespace. Perfect for technical talks and developer content.

• Light background with dark text
• Sans-serif typography (Inter)
• Subtle accents
• Focused layouts that don’t distract from content

---
marp: true
impresent:
  template: minimal
---

Dark

High contrast with a dark background. Great for presentations in dimly lit rooms or for a modern aesthetic.

• Dark background (#1a1a2e) with light text
• Monospace accent font (JetBrains Mono)
• Vibrant accent colors that pop
• Code blocks that blend naturally

---
marp: true
impresent:
  template: dark
---

Corporate

Professional and structured. Ideal for business presentations, quarterly reviews, and client pitches.

• Muted blues and grays
• Well-defined table styles
• Multiple column layouts
• Logo and branding placeholders

---
marp: true
impresent:
  template: corporate
---

Creative

Bold and modern. Perfect for marketing, product launches, and creative projects.

• Vibrant color palette
• Asymmetric layouts
• Large typography
• Dynamic visual hierarchy

---
marp: true
impresent:
  template: creative
---

Template Layouts

Each template provides slide layouts that you activate with the _class directive:

---

<!-- _class: lead -->

# Welcome

Subtitle goes here

---

<!-- _class: two-column -->

## Two Column Layout

::left::
Content on the left side

::right::
Content on the right side

---

Common Layouts

Layout	Description
lead	Centered title slide, often with distinct background
two-column	Side-by-side content columns
section	Section divider with large heading
image-right	Content left, full-bleed image right
image-left	Full-bleed image left, content right
quote	Large centered blockquote
comparison	Two-column with headers for comparing options

Example: Section Divider

---

<!-- _class: section -->

# Part Two
## Getting Started

---

Example: Image Layout

---

<!-- _class: image-right -->

## Our Team

We're a distributed team of engineers,
designers, and product people building
the future of presentations.

![Team photo](asset://team-photo)

---

Brand Customization

Override template defaults with your brand colors and fonts using the brand object in frontmatter:

---
marp: true
impresent:
  template: corporate
  brand:
    --primary-color: "#dc2626"
    --secondary-color: "#f59e0b"
    --font-heading: "Georgia, serif"
    --font-body: "Helvetica, sans-serif"
    logo: asset://company-logo
---

Available CSS Variables

Templates expose these CSS custom properties for customization:

Variable	Description	Default (Corporate)
--primary-color	Main brand color	#1e40af
--secondary-color	Secondary/muted color	#6b7280
--accent-color	Highlights and links	#2563eb
--bg-color	Slide background	#ffffff
--text-color	Body text	#1f2937
--font-heading	Heading font family	Inter, sans-serif
--font-body	Body font family	Inter, sans-serif
--font-code	Code font family	JetBrains Mono, monospace

Creating Custom Templates

Custom templates let you build a complete visual system for your organization.

Template Structure

A template is a directory with these files:

my-template/
├── template.yaml       # Manifest with metadata and declarations
├── theme.css           # Full Marp/Marpit CSS theme
├── scaffold.md         # Starter deck showing all layouts
└── assets/             # Optional logos, backgrounds, icons
    ├── logo.svg
    └── bg-pattern.png

template.yaml

The manifest declares what your template provides:

name: my-brand
description: Company branding with our colors and logo
version: 1.0.0

# CSS variables your template exposes
variables:
  --primary-color: "#0066cc"
  --secondary-color: "#333333"
  --accent-color: "#ff6600"
  --bg-color: "#ffffff"
  --text-color: "#222222"
  --font-heading: "Montserrat, sans-serif"
  --font-body: "Open Sans, sans-serif"
  --font-code: "Fira Code, monospace"

# Available slide layouts
layouts:
  - name: lead
    description: Title slide with company logo
  - name: two-column
    description: Side-by-side content
  - name: section
    description: Section divider
  - name: team
    description: Team member grid

# Bundled assets
assets:
  - filename: logo.svg
    role: logo
  - filename: bg-pattern.png
    role: background

theme.css

A complete Marpit CSS theme:

/* @theme my-brand */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&family=Open+Sans&display=swap');

:root {
  --primary-color: #0066cc;
  --secondary-color: #333333;
  --accent-color: #ff6600;
  --bg-color: #ffffff;
  --text-color: #222222;
  --font-heading: "Montserrat", sans-serif;
  --font-body: "Open Sans", sans-serif;
}

/* Base slide styles */
section {
  font-family: var(--font-body);
  color: var(--text-color);
  background: var(--bg-color);
  padding: 60px 80px;
}

section h1, section h2 {
  font-family: var(--font-heading);
  color: var(--primary-color);
}

section h1 {
  font-size: 2.5em;
  margin-bottom: 0.5em;
}

section h2 {
  font-size: 1.8em;
  margin-bottom: 0.75em;
}

/* Lead/title slide */
section.lead {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: var(--primary-color);
  color: white;
}

section.lead h1 {
  color: white;
}

/* Two-column layout */
section.two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  gap: 40px;
}

section.two-column h2 {
  grid-column: 1 / -1;
}

/* Tables */
section table {
  width: 100%;
  border-collapse: collapse;
}

section th {
  background: var(--primary-color);
  color: white;
  padding: 12px 16px;
  text-align: left;
}

section td {
  padding: 10px 16px;
  border-bottom: 1px solid #e5e5e5;
}

/* Code blocks */
section pre {
  background: #1e1e1e;
  border-radius: 8px;
  padding: 20px;
}

section code {
  font-family: var(--font-code);
}

/* Blockquotes */
section blockquote {
  border-left: 4px solid var(--accent-color);
  padding-left: 24px;
  font-style: italic;
  color: var(--secondary-color);
}

scaffold.md

A starter deck that demonstrates all available layouts:

---
marp: true
impresent:
  template: my-brand
paginate: true
---

<!-- _class: lead -->

# Presentation Title

Subtitle or tagline

**Your Name** - Date

---

## Regular Slide

This is a standard content slide with body text.

- Bullet point one
- Bullet point two
- Bullet point three

---

<!-- _class: two-column -->

## Two Column Layout

::left::

Content on the left side of the slide.

::right::

Content on the right side of the slide.

---

<!-- _class: section -->

# Section Title

A new section begins

---

## Table Example

| Feature | Free | Pro |
|---------|------|-----|
| Decks | 5 | Unlimited |
| Templates | 4 | All |
| Renders | 10/mo | 100/mo |

---

## Questions?

Contact us at hello@example.com

Uploading Your Template

Use the CLI to upload your custom template:

impresent templates add ./my-template/

Or upload via the API:

curl -X POST https://api.impresent.dev/api/templates \
  -H "Authorization: Bearer imp_..." \
  -F "manifest=@my-template/template.yaml" \
  -F "css=@my-template/theme.css" \
  -F "scaffold=@my-template/scaffold.md" \
  -F "assets=@my-template/assets/logo.svg"

Once uploaded, use your template in any presentation:

---
marp: true
impresent:
  template: my-brand
---

Template Resolution

When rendering, Impresent resolves templates in this order:

1. User’s custom templates (by name)
2. Built-in templates (by name)

If a template isn’t found, rendering falls back to minimal.