Skip to content
Brand guidelines

Templates

Use the templates below to create on-brand starting points for your slide decks, docs, and design efforts.

Slide decks

Section titled “Slide decks”

Slidev

Section titled “Slidev”

Slidev lets you build rich, interactive slide decks with Markdown and Node.js. Use the @pulumi/slidev-theme package to bootstrap a new project quickly:

Terminal window
pnpm init
pnpm add -D @slidev/cli @pulumi/slidev-theme


cp node_modules/@pulumi/slidev-theme/starter.md slides.md
pnpm exec slidev slides.md --open

Alternatively, you can use your agent of choice by connecting the brand MCP server, then asking the agent to create a new deck for you:

Make me a slide deck called "Why Pulumi is awesome".

When you’re finished, consult the Slidev docs for help building your deck or exporting to other formats. Be sure to check out Slidev’s authoring and agent guides as well.

For bugs or new feature requests, file an issue.

Google Slides

Section titled “Google Slides”

We also have a Google Slides template with light and dark slides, a color theme, and typography.

To use it:

  • Open the slide-deck template in Google Drive, then choose File → Make a copy.
  • Alternatively, choose a different template from the template gallery. Be sure to choose a template that uses our current branding and not an outdated one.

Docs

Section titled “Docs”

Google Docs

Section titled “Google Docs”

We have a basic Google Docs template as well that includes text styles and a cover page.

To use it:

  • Open the doc template in Google Drive, then choose File → Make a copy.
  • Alternatively, choose a different template from the template gallery. Be sure to choose a template that uses our current branding and not an outdated one.

Diagrams and charts

Section titled “Diagrams and charts”

Mermaid

Section titled “Mermaid”

Mermaid renders diagrams and charts from plain text: flowcharts, sequence diagrams, git graphs, pie charts, and more. Our portable pulumi-mermaid-theme.js styles all of them for both light and dark mode.

Decks built with the @pulumi/slidev-theme package get this styling automatically, with nothing to install.

For any other Mermaid v11 setup, pass one of the theme’s exports — pulumiMermaidLight or pulumiMermaidDark — to mermaid.initialize(). Follow the steps below for a working example.

  1. Download the theme file and save it as pulumi-mermaid-theme.js.

  2. Save the following file as index.html in the same folder:

    <!doctype html>
    <html lang="en">
        <head>
            <meta charset="utf-8" />
            <title>Pulumi Mermaid example</title>
            <style>
                .mermaid { visibility: hidden; }
                .mermaid[data-processed="true"] { visibility: visible; }
            </style>
        </head>
        <body>
            <pre class="mermaid">
                flowchart LR
                    Code[Write code] --> Preview{pulumi preview}
                    Preview -->|Looks good| Up[pulumi up]
                    Preview -->|Needs work| Code
                    Up --> Cloud[(Pulumi Cloud)]
            </pre>
            <script type="module">
                import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs";
                import { pulumiMermaidLight } from "./pulumi-mermaid-theme.js";
    

                // Swap in pulumiMermaidDark for dark backgrounds.
                mermaid.initialize({ startOnLoad: true, ...pulumiMermaidLight });
            </script>
        </body>
    </html>

  3. Start a local web server to view the rendered SVG in a browser:

    Terminal window
    npx serve

Design

Section titled “Design”

Figma

Section titled “Figma”

We also have many design templates available in Figma. Ask in the #marketing channel if you need access to Figma or if you need any help finding what you’re looking for.

When working in Figma, be sure to reference the Global Design Primitives file for color values, tokens, and design assets. You should use this library across all of your Figma design files.

Claude Design

Section titled “Claude Design”

We’re currently exploring how to integrate Claude Design into asset-creation workflows. For now, please avoid using it. Even with brand context, it can produce unpredictable, off-brand output.