Pitch | Presentation

A product pitch in 4:3 (1024×768), light by default, with brand colors and typography. The whole visual identity fits in recit.config.ts.

Intermediate4:3 formatLight themeBrand colorsFade transitionImage right

pnpm --filter recit-example-deck-pitch dev

▶ Open the demoexamples/deck-pitch/slides.md

The demo

Click the deck, then use ← → · 6 slides · 00:30Open fullscreen →

Try it

Switch aspectRatio to 16:9: the layout adapts.
Press T: the dark palette from theme.dark takes over.
Export to PDF: pnpm --filter recit-example-deck-pitch export.

Source code

---
title: Lorem — Product pitch
description: "A 4:3 pitch with a light theme, brand colors, image layouts and fade transitions."
lang: en
---

--- layout=cover

# Lorem
### Ipsum dolor sit amet consectetur

:badge[Seed 2026]{type=primary}

--- layout=image-right image=./hero.svg alt="Orange and pink gradient"

# Problema

- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Sed do eiusmod tempor

--- layout=grid cols=3

# Solutio

:::card
### 🎙️ Lorem
Ipsum dolor sit amet, consectetur.
:::

:::card
### ✍️ Ipsum
Adipiscing elit, sed do eiusmod.
:::

:::card
### 🔗 Dolor
Tempor incididunt ut labore.
:::

--- layout=columns ratio=1:1

# Tractio

:::left
### 1 200
lorem ipsum dolor sit amet
:::

:::right
### 38 %
consectetur adipiscing elit
:::

--- layout=center

> "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
>
> — Sed do eiusmod

--- layout=section

# Gratias!

lorem@example.com

Configuration

import { defineConfig } from "@recit/core";

export default defineConfig({
  metadata: { author: "Lorem Studio", lang: "en" },
  deck: { aspectRatio: "4:3", transition: "fade" },
  app: {
    productName: "Lorem Ipsum Pitch",
    identifier: "com.example.loremipsum.pitch",
  },
  theme: {
    defaultMode: "light",
    colors: {
      primary: "#e11d48",
      accent: "#f59e0b",
      background: "#fff7ed",
      card: "#ffffff",
    },
    dark: { primary: "#fb7185", background: "#1c1917", card: "#292524" },
    radius: "8px",
    fonts: { heading: "Georgia, 'Times New Roman', serif" },
  },
  footer: {
    left: "{author}",
    right: "{slide}/{total}",
    hideOn: ["cover"],
  },
});