Netlify Slidev Template

Starter for Netlify GTM / sales-enablement decks. Brand styling derived from the official Google Slides master (extracted from the Netlify Database GTM Enablement deck) — covers, content slides, and hero moments match the design language used in those Slides.

Run it

npm install
npm run dev      # http://localhost:3030
npm run build    # static SPA into dist/
npm run export   # PDF export (requires Playwright; Slidev will prompt)

What's in here

.
├── slides.md          # Kitchen-sink starter — every layout pattern is demoed
├── style.css          # Brand stylesheet (Slidev auto-loads this from project root)
├── package.json
└── public/
    ├── bg/            # Master-slide assets extracted from the .odp
    │   ├── content.png        # Bottom-right bracket logo on every content slide
    │   ├── cover.png          # Optional royal-blue diamond decoration for the cover
    │   └── cover-overlay.png  # White Netlify wordmark + teal brackets for cover top-left
    ├── logos/         # Drop additional brand logos here (e.g. /logos/partner.svg)
    └── screens/       # Drop product screenshots here for the .screen-frame pattern

Patterns

Each pattern below has a working example in slides.md. Search for the comment banner (e.g. <!-- ─────────── HERO / KEYNOTE MOMENT ─────────── -->) to find it.

Slide-level classes (set via frontmatter class:)

• cover + no-mark — the title slide (navy → deep-purple vertical gradient, no bottom-right logo).
• hero-slide — the keynote moment (full-bleed, no slide padding, brand-marked title). Pair with <div class="hero"> markup.
• story-slide — the closing 3-act narrative (no padding). Pair with <div class="story"> markup.

Eyebrows (mono uppercase labels above the heading)

• <span class="section-mark">Section eyebrow</span> — blue mono, used above every content <h1>.

Brand colour spans for headlines

• <span class="netlify-mark">…</span> — teal-500.
• <span class="claude-mark">…</span> — Claude orange.

Multi-column grids

• <div class="cols">…</div> — 4 columns with teal-mono <h3> headings (matches "What is X?" PDF style).
• <div class="compare">…</div> — 2 columns with <ul> lists separated by hairlines (legacy vs new).
• <div class="grid two">…</div> — generic 2-column grid.
• <div class="grid">…</div> — generic 3-column grid.

Timeline / process flows

• <ol class="timeline"><li><span class="tl-dot"></span><strong>Label</strong><p>…</p></li>…</ol> — horizontal nodes on a teal→blue connector line. 4 columns by default.

Lists with light structure

• <div class="ladder"> + <div class="rung"><strong>Label</strong><p>…</p></div> — label + description rows with a hairline between each.
• <div class="security-list"> + <div class="security-item"><span class="check">✓</span><div><strong>…</strong><p>…</p></div></div> — checked-list, no boxes.

Screenshots and video

• <div class="screen-frame"><img :src="'/screens/your.png'" /></div> — subtly drop-shadowed image bezel.
• <div class="video"><iframe …></iframe></div> — 16:9 video container.
• <div class="video feature">…</div> — capped at 58% width for single-video feature slides.
• <p class="caption">…</p> — small grey caption text.

Type emphasis

• <b>…</b> — bright blue, 800 weight (the "big bold call-out").
• <strong>…</strong> — ink colour, 800 weight (heavier than body, less attention than <b>).
• <span class="soft-strong">…</span> — slightly heavier body, no colour change.

Story slide acts

• <ol class="story-acts"><li><span class="act-num">01</span><div><strong>Headline</strong><p>…</p></div></li>…</ol>

Design tokens

All tokens are CSS variables in style.css :root. Override in a per-deck wrapper (<style>:root { --teal-500: #xxx; }</style>) if you ever need a one-off recolour.

--teal-100   #defffe   --blue-bright   #2250f4   --paper   #ffffff
--teal-200   #32e6e2   --blue-mid      #2e51ed   --ink     #092f30
--teal-500   #04a29f   --blue-deep     #230a5c   --body    #303a40
--teal-700   #016968                             --muted   #5a6770
--teal-800   #014847   --claude        #d66b37

The cover gradient is linear-gradient(180deg, var(--blue-bright), var(--blue-deep)) — the exact two stops from the original .odp master.

Starting a new deck

1. cp -R netlify-slidev-template my-new-deck
2. cd my-new-deck && npm install
3. Edit slides.md — keep the cover, hero, and story patterns; delete the demos you don't need; add your own.
4. Drop new screenshots into public/screens/ and reference them as :src="'/screens/file.png'" (the :src binding is required — Slidev's import guard rejects bare static paths).

Slidev gotchas

• npm run dev uses slidev --remote (Slidev v52 removed --host 0.0.0.0).
• Inline <style> blocks inside slide markdown are no longer hoisted in Slidev v52 — keep all CSS in style.css (auto-loaded from project root).
• Always reference public assets with :src="'/path'" not src="/path" — the static-import guard rejects the unbound form.