Branded Deck
A standalone prompt for generating PDF-first branded slide decks as single-file HTML artefacts. Different posture from the Presentation Template (section 12): that one is web-native, with content centred in a responsive viewport. This one is print-first, with fixed slide dimensions and persistent brand chrome on every page — designed so the PDF export is the canonical artefact and the HTML view is the editing/presenting view.
Use when:
- You need a deck that looks like a corporate slide deck — branded chrome, fixed slide proportions, real margins, page numbers
- The output will be sent as a PDF (emailed, archived, attached to a contract)
- The deck needs to be visibly part of a brand system (consultancy work, client deliverables, board decks)
Browser viewing keeps the interactive shell (drawer, keyboard navigation, progress bar). Print CSS hides the shell so the PDF gets only the slide content and chrome.
The slide vocabulary
Section titled “The slide vocabulary”Eight slide types, derived from typical corporate consulting deck conventions:
| Type | Purpose |
|---|---|
| cover | Front cover. Full-colour background, title and subtitle, logo + brand strip, brand graphic. First slide of every deck. |
| disclaimer | Confidentiality / legal disclaimer. White background, dense body text. Often slide 2 by convention. Optional. |
| content-bullets | The workhorse. Slide title, optional subtitle paragraph, side heading + bullet list. |
| content-prose | Title in colour-accented band, longer subtitle as prose, optional heading + bullets below. For section openers within a chapter. |
| section-divider-light | Chapter break, light variant. Pale tinted background, large section title, subtitle, subhead at top. |
| section-divider-dark | Chapter break, dark variant. Full-colour background with light text. |
| slide-title-dark | Full-colour background, title and subtitle top-left, empty body. Used as a canvas for custom visuals added in PowerPoint after export. |
| closing | ”Thank you” or similar end slide. Full-colour background, large two-tone typography. |
Every slide except cover and closing carries persistent chrome: logo, brand strip, footer text, page number. The cover and closing carry the logo and brand strip but use their own footer treatment.
Brand configuration via design.md
Section titled “Brand configuration via design.md”The template is brand-agnostic. Everything visual — palette, typography, logo, chrome text, disclaimer body — comes from a design.md in the same folder as the prompt. If no design.md is provided, the template falls back to a neutral default (system fonts, near-black on off-white, no logo, no chrome).
A worked example for Visa Consulting & Analytics follows the prompts below. Use it as a reference for what a fully-realised brand pack looks like.
Prompt A — Shell bootstrap
Section titled “Prompt A — Shell bootstrap”You are generating a single-file HTML branded deck designed for PDFexport. Read this entire prompt before starting.
OUTPUT:- One file: deck.html- Inline CSS in a <style> block, inline JS in a <script> block- No external dependencies — no CDN links, no fonts loaded over the network, no external images. Logo and brand graphics must be provided as data URIs or inline SVG via design.md, or rendered as empty placeholders.- Must work from file:// and as an email attachment- PDF export is the canonical output. The browser view is for editing and live presentation; the PDF is what gets sent to the recipient.
VISUAL STYLE — resolve from design.md if present, else use theneutral default. See "design.md schema" below for required fields.
SLIDE DIMENSIONS:
- Every slide is a fixed 1920×1080px (16:9), scaled to fit the browser viewport using CSS transform: scale().- The PDF print stylesheet sets @page size to match (508mm × 285.75mm landscape, or A4 landscape with content scaled — confirm rendering in Chrome before finalising).- Margins inside the slide: ~80px on all sides, except where a slide type specifies full-bleed.- One slide per PDF page. Use page-break-after: always on each slide in the print stylesheet.
INTERACTIVE SHELL (browser view only — hidden in print):
1. Side drawer navigation - Hamburger top-left toggles open/closed - Lists every slide by title with slide number - Clicking a slide jumps to it and closes the drawer - Active slide highlighted
2. Keyboard navigation - Left / Right / Page Up / Page Down / Space — previous/next slide - Home / End — first / last slide - Escape — close drawer - 'M' — toggle drawer - 'P' — open browser print dialog directly
3. Slide indicator - Bottom-right of the browser chrome (NOT inside the slide): "3 / 12" counter - Hidden in print
4. Progress bar - Thin bar across the top edge of the browser viewport - Hidden in print
PRINT STYLESHEET REQUIREMENTS:
- Hide the drawer, hamburger, slide indicator, progress bar, keyboard hints, and any browser-only overlays- Set @page size and orientation- Force page breaks between slides- Show all slides linearly in order (no transform: scale; render at native 1920×1080 mapped to page dimensions)- Ensure brand chrome (logo, brand strip, footer, page number) is visible on every slide that should have it
SLIDE TYPES — implement as data-slide-type values:
- "cover" Full-colour background (uses --brand-primary). Title large, subtitle below, logo top-left, brand strip top-right, brand graphic mid-right or as configured. Page number bottom-right. Footer text bottom-right in the slim chrome row.
- "disclaimer" White background. Heading (e.g. "Confidentiality notice"), subheading explaining what this is, long-form body text in two columns or single wide column. Logo bottom-left, brand strip top-right, page number bottom-right, footer text bottom-right.
- "content-bullets" White background. Slide title in --brand-primary, optional subtitle paragraph below. Body area: heading on the left in --brand-primary, bullet list to its right or below. Standard chrome.
- "content-prose" White background. Title rendered larger and in --brand-primary, takes up to two lines. Subtitle as longer prose paragraph below. Optional heading + bullets below the subtitle. Standard chrome.
- "section-divider-light" Background uses --brand-tint (pale variant of brand primary). Section subhead top-left in --brand-primary. Section title large, in --brand-primary. Section subtitle below. Logo bottom-left, brand strip top-right.
- "section-divider-dark" Background --brand-primary. Section subhead top-left in white. Section title large, in white. Section subtitle below in white or --brand-tint. Logo bottom-left, brand strip top-right.
- "slide-title-dark" Background --brand-primary. Slide title and subtitle top-left in white, smaller than section-divider type sizes. Body area empty — this slide is a canvas for custom content added in PowerPoint after PDF export. Standard chrome (logo, brand strip, footer, page number).
- "closing" Background --brand-primary. Large two-tone typography (e.g. "Thank you" with "Thank" in white and "you" in --brand-tint). Logo bottom-left, page number bottom-right, footer text bottom-right. Brand strip top-right.
PERSISTENT BRAND CHROME (all slides except cover and closing —those have their own chrome treatment):
- Logo: bottom-left. SVG or data URI from design.md. If none, empty zone.- Brand strip: top-right. Text + optional small graphic from design.md. Renders in --brand-primary on light backgrounds, white on dark.- Footer text: bottom-right area, smaller than page number. Copyright / classification line from design.md.- Page number: bottom-right corner, monospace.
If a slide type's spec says the chrome is positioned differently(e.g. cover has logo top-left), follow the slide type spec.
design.md SCHEMA:
The template reads these fields from design.md if present. Missingfields fall back to the neutral default.
```# Design brief — [client / deck name]
## Palette--brand-primary: #hex (the main brand colour, used for backgrounds on dark slides and titles on light slides)--brand-tint: #hex (a pale variant, used for section dividers and accent text)--brand-text-dark: #hex (default text colour on light backgrounds)--brand-text-light: #hex (default text colour on dark backgrounds, usually white)--brand-accent: #hex (optional secondary accent for bullets and link-like elements)
## Typography--brand-font-display: "Font Name", system-ui, sans-serif (used for slide titles and section titles)--brand-font-body: "Font Name", system-ui, sans-serif (used for body, subtitles, bullets)--brand-font-mono: "Font Name", ui-monospace, monospace (used for page numbers and small chrome text)
Note: Brand fonts that aren't network-loaded will fall back to systemfonts. Provide the brand font as the first stack entry; recipientswithout the font see the fallback. Acceptable trade-off for emailablesingle-file artefacts.
## Logo[Inline SVG or data URI for the brand logo. If absent, the logo zonerenders empty.]
## Brand stripTEXT: [text shown top-right on chrome slides, e.g. "Visa Consulting & Analytics"]GRAPHIC: [optional inline SVG or data URI for a small graphic next tothe text. If absent, only the text shows.]
## Brand graphic[Optional inline SVG or data URI for a large brand graphic shown onthe cover slide. If absent, the cover graphic zone renders empty.]
## FooterTEXT: [text shown bottom-right, e.g. "©2026 Visa. All rights reserved.Visa Confidential"]
## DisclaimerINCLUDE_AS_SLIDE_2: true | falseHEADING: [e.g. "Confidentiality notice – Visa external"]SUBHEADING: [e.g. "Include the following confidentiality disclaimerin external-facing decks"]BODY: [full disclaimer text, multiple paragraphs. Preserve line breaksand any inline links like "For more information on disclaimers, pleasecontact Visa Legal." which renders in --brand-accent.]
## Closing slideINCLUDE: true | falseLINE_1: [e.g. "Thank"]LINE_2: [e.g. "you"]LINE_1_COLOUR: [css variable name or hex, defaults to --brand-text-light]LINE_2_COLOUR: [css variable name or hex, defaults to --brand-tint]```
NEUTRAL DEFAULT (when no design.md is present):
- Palette: near-black text on off-white background, single dark grey accent, no logo, no brand strip- Typography: system fonts throughout- Disclaimer: not included- Closing: not included- Chrome zones present but empty
PLACEHOLDER CONTENT:
Generate a 9-slide placeholder deck demonstrating every slide type:
1. cover Title: "Branded Deck Template" Subtitle: "Replace via Prompt B" 2. disclaimer Standard placeholder disclaimer text 3. content-bullets Generic title + subtitle + heading + bullets 4. content-prose Generic title + prose subtitle + heading + bullets 5. section-divider-light Section subhead + title + subtitle 6. section-divider-dark Section subhead + title + subtitle 7. slide-title-dark Title + subtitle, empty body 8. content-bullets Second example, to show consistency 9. closing Standard "Thank you" treatment
If design.md sets INCLUDE_AS_SLIDE_2 to false, skip the disclaimerslide and renumber. If INCLUDE on closing is false, skip the closingslide and renumber.
CODE QUALITY:
- Semantic HTML where possible- CSS custom properties for palette, typography, and spacing so swapping brands is a one-place change- Vanilla JS, comment major sections (drawer, keyboard, slide state, print handling)- Test the @page CSS in Chrome's print preview before finalising
WHEN DONE:
Save as deck.html. Confirm file size (under 80KB without brandgraphics; up to ~200KB with embedded logo and graphic SVGs).Tell me the slide count, which slide types are demonstrated, whetherdesign.md was found and used, and confirm the print preview rendersone slide per PDF page.Prompt B — Content brain-dump
Section titled “Prompt B — Content brain-dump”Run this after Prompt A produces the shell. Paste your raw notes; Claude Code maps them to slides using the brand-agnostic slide vocabulary.
Replace the placeholder slides in deck.html with real content from thebrain-dump below. Do not change the shell — slide dimensions, drawer,keyboard, print stylesheet, brand chrome stay as is. Do not changethe design.md handling — palette, typography, logo, disclaimer body,closing slide configuration are settled.
RULES:
- Each ## heading in the brain-dump becomes one slide.- If a heading is tagged with a slide-type in square brackets, use that slide type: "## Why we're here [cover]" → use cover.- If untagged, pick the slide type from content shape: * Just a deck title and subtitle (usually first slide) → cover * Confidentiality / legal text → disclaimer * Title + body content with bullets → content-bullets * Title + a substantial prose subtitle, then bullets → content-prose * A short section name with no body, light feel → section-divider-light * A short section name with no body, dramatic feel → section-divider-dark * Title only, body left empty for custom visuals → slide-title-dark * "Thank you" or end-of-deck → closing- The disclaimer slide should already be in place from Prompt A (if design.md set INCLUDE_AS_SLIDE_2 to true). Do NOT add another disclaimer slide unless I explicitly write one.- The closing slide should already be in place (if design.md set INCLUDE to true). Do NOT add another closing slide unless I explicitly write one.- Update the drawer navigation to reflect the new slide titles.- Update the slide count and page numbers.- Keep my voice. Tighten typos and casual phrasing only.- Don't add slides I didn't write. Don't merge slides I separated.
BRAIN-DUMP:
[paste raw notes below. Use ## for slide breaks. Tag with[slide-type] to override the default mapping.]
---
## [first slide title] [cover]
[subtitle text]
## [second slide title]
[content]
## [third slide title] [section-divider-dark]
[section subtitle]
[...continue...]
---
WHEN DONE:
Save the updated deck.html. Tell me:- Final slide count and slide-type distribution- Which slides used a tagged slide-type vs. inferred from content- Any slides where the inferred type was a close call between two options- Confirmation that print preview still renders one slide per PDF page after the content swapWorked example — Visa Consulting & Analytics design.md
Section titled “Worked example — Visa Consulting & Analytics design.md”Save this as design.md in the same folder as deck.html before running Prompt A. Replace the [provide as SVG or data URI] placeholders with the actual brand assets when you have them; the template renders empty zones in their place until you do.
# Design brief — Visa Consulting & Analytics deck
## Palette--brand-primary: #1A1F71--brand-tint: #CCE6FF--brand-text-dark: #1A1F71--brand-text-light: #FFFFFF--brand-accent: #1A1F71
## Typography--brand-font-display: "Visa Dialect", "Helvetica Neue", Arial, system-ui, sans-serif--brand-font-body: "Visa Dialect", "Helvetica Neue", Arial, system-ui, sans-serif--brand-font-mono: ui-monospace, "SF Mono", Menlo, monospace
## Logo[provide as SVG or data URI — the Visa wordmark in white for use ondark backgrounds; the template will tint to blue on light backgroundsvia CSS filter or by providing both variants]
## Brand stripTEXT: Visa Consulting & AnalyticsGRAPHIC: [provide as SVG or data URI — the small arrow-and-dots graphicthat appears next to "Visa Consulting & Analytics" in the top-right ofevery chrome slide]
## Brand graphic[provide as SVG or data URI — the large stylised globe icon used onthe cover slide, positioned mid-right]
## FooterTEXT: ©2026 Visa. All rights reserved. Visa Confidential
## DisclaimerINCLUDE_AS_SLIDE_2: trueHEADING: Confidentiality notice – Visa externalSUBHEADING: Include the following confidentiality disclaimer in external-facing decksBODY: | This presentation is furnished to you solely in your capacity as a client of Visa and/or a participant in the Visa payments system. By accepting this presentation, you acknowledge that the information contained herein (the "Information") is confidential and subject to the confidentiality restrictions contained in the Visa Core Rules and Product and Service Rules or other confidentiality agreements, which limit your use of the Information. You agree to keep the Information confidential and not to use the Information for any purpose other than in your capacity as a customer of Visa or as a participant in the Visa payments system. The Information may only be disseminated within your organization on a need-to-know basis to enable your participation in the Visa payments system. Please be advised that the Information may constitute material non-public information under U.S. federal securities laws and that purchasing or selling securities of Visa Inc. while being aware of material non-public information would constitute a violation of applicable U.S. federal securities laws.
Case studies, statistics, research and recommendations are provided "AS IS" and intended for informational purposes only and should not be relied upon for operational, marketing, legal, technical, tax, financial, or other advice. You should consult with your legal counsel to determine what laws and regulations may apply to your circumstances. By their nature, recommendations are not guarantees of future performance or results and are subject to risks, uncertainties and assumptions that are difficult to predict or quantify. Visa is not responsible for your use of the information contained herein (including errors, omissions, inaccuracy or non-timeliness of any kind) or any assumptions or conclusions you might draw from its use. Visa makes no warranty, express or implied, and explicitly disclaims the warranties of merchantability and fitness for a particular purpose, any warranty of non-infringement of any third party's intellectual property rights. To the extent permitted by applicable law, Visa shall not be liable to a client or any third party for any damages under any theory of law, including, without limitation, any special, consequential, incidental or punitive damages, nor any damages for loss of business profits, business interruption, loss of business information, or other monetary loss, even if advised of the possibility of such damages.
For more information on disclaimers, please contact Visa Legal.
## Closing slideINCLUDE: trueLINE_1: ThankLINE_2: youLINE_1_COLOUR: --brand-text-lightLINE_2_COLOUR: --brand-tintThe “For more information on disclaimers, please contact Visa Legal.” line renders in --brand-accent (blue) per the PDF reference. Confirm with your legal team that the disclaimer body is the current canonical version before sending any deck externally — the text above is captured from the template PDF and may be superseded.
Recurring patterns
Section titled “Recurring patterns”Export to PDF. Open the HTML in Chrome → Print → Save as PDF. Set margins to None, scale to 100%, background graphics on. Confirm in print preview that one slide = one page before committing.
Reskin for a new client. Replace design.md with the new brand’s pack, run Prompt A again. Same brain-dump content goes into Prompt B; the chrome and palette swap.
Add custom visuals to a slide-title-dark. This slide type is intentionally empty in the body. Export the PDF, then add charts, screenshots, or diagrams in PowerPoint or Keynote afterwards on those specific pages. The HTML doesn’t need to render them.
Page-number control. The page-number counter starts at 1 on the cover slide and increments through every slide including the disclaimer and closing. If you need to start numbering after the cover (e.g. cover = unnumbered, disclaimer = page 1), tell Claude Code to adjust the page-number rendering logic.
Confidentiality and trademark. The Visa brand pack includes Visa-specific text and trademarked elements. Never distribute the brand pack outside Visa contexts. The template itself is brand-agnostic and reusable.