MARP Slides v2
Prerequisites
- VS Code extension "Marp for VS Code"
- Settings:
markdown.marp.enableHtml: true+markdown.marp.allowLocalFiles: true - Export:
npx @marp-team/marp-cli slides.md --pdf --allow-local-files
Example Decks (CRITICAL — read before generating)
The examples/ folder contains 22 curated reference decks. Before generating any deck, read 2-3 examples that match the requested style. These are the quality bar — match their composition, spacing, and visual density. Key examples by category:
| Category | Examples to read |
|---|---|
| Data / dashboard | marp_facebook-ads.md, marp_fitness.md, marp_comparison.md |
| Lifestyle / editorial | marp_coffee.md, marp_wine-tasting.md, marp_cocktail.md |
| Guide / how-to | marp_garden.md, marp_houseplant.md, marp_home-gym.md |
| Fun / creative | marp_kids-party.md, marp_board-game.md, marp_film-director.md |
| Travel / location | marp_travel.md, marp_walking-tour.md, marp_road-trip.md |
| Showcase / hero | marp_hero.md, marp_apartment.md, marp_wardrobe.md |
| Reference / sampler | marp_sample.md (component showcase) |
Core Rules
- Slides separated by
--- - YAML frontmatter controls theme/pagination/styles
enableHtmlunlocks SVG, cards, charts, animations, interactive elements- Default 16:9 (1280x720)
Dark Starter Template
The dark template uses Outfit 800 for headings and Raleway 100-200 for body text. CSS variables:
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700;800&family=Raleway:wght@100;200;300&display=swap');
:root {
--accent: #ff6b1a; --accent-hover: #ff8c4a;
--dark: #000; --card: #080808; --border: #111;
--body: #999; --label: #666; --muted: #555; --light: #fff;
--green: #22c55e; --red: #ef4444; --yellow: #f5a623;
}
section { background: var(--dark); color: var(--light); font-family: 'Raleway', sans-serif; font-weight: 200; padding: 56px 72px; }
h1 { font-family: 'Outfit'; font-weight: 800; font-size: 3em; color: var(--light); }
h2 { font-family: 'Raleway'; font-weight: 100; font-size: 1.3em; color: #888; }
h3 { font-family: 'Outfit'; font-weight: 600; font-size: 0.6em; color: var(--muted); text-transform: uppercase; letter-spacing: 0.2em; }
strong { color: var(--accent); font-weight: 300; }
section.lead { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
header { text-align: right; } header img { margin: 0; }
.row:hover { background: #0c0c0c; } .row { transition: background 0.2s; border-radius: 6px; }
details { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 14px 18px; margin-top: 8px; }
details summary { color: var(--accent); font-family: 'Outfit'; font-weight: 600; font-size: 0.8em; cursor: pointer; }
details p { color: var(--body); font-size: 0.78em; margin-top: 8px; }
.tag { font-family: 'Outfit'; font-weight: 600; font-size: 0.55em; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 10px; border-radius: 4px; }
abbr { text-decoration: none; border-bottom: 1px dotted #333; cursor: help; }Frontmatter includes: header: ''
Light Theme
Swap vars: --accent: #2563eb; --dark: #fafafa; --card: #fff; --border: #eee; --body: #666; --label: #bbb; --light: #1a1a1a; Use Space Grotesk + IBM Plex Mono or Plus Jakarta Sans.
Heading Hierarchy
- h1 = title slides (white, extra large)
- h2 = subtitle (grey, thin)
- h3 = section label (muted, uppercase, small)
Font Pairings (Tested)
| Heading | Body | Use |
|---|---|---|
| Outfit 800 | Raleway 100 | Dashboard, data (default) |
| DM Serif Display | DM Sans 300 | Recipes, editorial |
| Space Grotesk 700 | IBM Plex Mono 300 | Travel, light themes |
| Sora 700 | Sora 200 | Product comparisons |
| Urbanist 800 | Urbanist 100 | Music, Spotify-style |
| Plus Jakarta Sans 800 | Plus Jakarta Sans 200 | Retros, team decks |
Images
CRITICAL: Relative paths only. ./image.png works. Absolute paths break in preview.
- Logo header:
header: ''— hide per slide:<!-- _header: '' --> - Photo bg:
 - Split:
or - CDN logos:
<img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/png/name.png" style="width:200px;" /> - Centered inline: wrap img in
<div style="display:flex; justify-content:center;">with border-radius and border
Dashboard Components
Metric Card (gradient top border)
Card with position:relative; overflow:hidden; and absolute div at top with background:linear-gradient(90deg, var(--accent), transparent); height:2px;. Icon + label + big number + trend arrow.
Status Dots
Inline SVG circles: green (#22c55e) = active, yellow (#f5a623) = learning, red (#ef4444) = paused. <svg width="8" height="8" viewBox="0 0 8 8"><circle cx="4" cy="4" r="4" fill="#22c55e"/></svg>
Verdict Tags
<span class="tag" style="background:#22c55e12; color:var(--green); border:1px solid #22c55e22;">Scale</span> Swap colors for red (kill) and yellow (review).
Hover Rows
Wrap content in <div class="row"> for hover highlight effect.
SVG Charts
Line / Area Chart
SVG polyline for the line + polygon with linearGradient fill for area under the line. Add grid lines, dashed target line, circle data points. Use viewBox="0 0 900 240" with preserveAspectRatio="none".
Pie / Donut Chart
Each segment = separate circle with stroke-dasharray and stroke-dashoffset. Math: circumference = 2*pi*r. For r=110: ~691. Segment = (pct/100)*691. Offsets accumulate negatively. stroke-width controls ring thickness. Always transform="rotate(-90 cx cy)".
Gauge / Half-Circle Meter
SVG path arc for background + colored value arc. Needle line from center + circle pivot. For scores 0-100. stroke-linecap="round".
Donut Ring
Single circle stroke-dasharray. circ = 2*pi*r. Offset = circ - (circ * pct/100). For r=74: circ=465. 89%: offset=51.
Sparkline (inline mini)
<svg width="50" height="16"><polyline points="0,14 8,12 16,10 24,8 50,2" fill="none" stroke="#22c55e" stroke-width="1.2"/></svg>
Stacked Bar
Flex div with colored width-percent segments, border-radius, overflow:hidden.
Vertical Bar Chart
Flex container align-items:flex-end. Gradient bars: background:linear-gradient(180deg, var(--accent), #cc5515); border-radius:3px 3px 0 0;
Radar / Spider
SVG polygon for hexagonal grid + data shape with fill-opacity:0.1 and stroke outline.
Interactive Elements
- Collapsible:
<details><summary>Title</summary><p>Content</p></details> - Tooltip:
<abbr title="Full text">TERM</abbr> - Slider:
<input type="range" style="accent-color:var(--accent);" /> - Checkbox:
<input type="checkbox" checked style="accent-color:var(--accent);" /> - Progress:
<progress value="76" max="100" style="accent-color:var(--accent);"></progress>
Layout Components
- Before/After Split — two flex panels, border-top red vs green
- Terminal Mockup — traffic light dots + monospace body
- Browser Mockup — dots + URL bar div
- Chat Bubbles — user (left) + agent (right, orange-tinted)
- Flowchart — boxes + SVG arrow connectors
- Timeline — vertical border-left + dot circles
- Card Row — display:flex; gap:14px; with flex:1 children
SVG Icons
All wrapped in <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="1.5">. Sizes: inline=16, cards=44, features=32.
Dollar: path d="M12 2v20M17 5H9.5a3.5 3.5 0 1 0 0 7h5a3.5 3.5 0 1 1 0 7H6" Heartbeat: polyline points="22 12 18 12 15 21 9 3 6 12 2 12" Check (#22c55e): path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" + polyline points="22 4 12 14.01 9 11.01" Arrow up (#22c55e): polyline points="18 15 12 9 6 15" Arrow down (#ef4444): polyline points="18 9 12 15 6 9" X circle (#ef4444): circle cx=12 cy=12 r=10 + two crossing lines Clock: circle cx=12 cy=12 r=10 + polyline points="12 6 12 12 16 14" Eye: path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" + circle cx=12 cy=12 r=3 Lightning: path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" Warning (#f5a623): triangle path Search: circle cx=11 cy=11 r=8 + line to corner Bars: three vertical paths Users: user silhouette path + circle Globe: circle + horizontal line + vertical ellipse path Lock: rect + arch path Book: two paths for book shape
Animations (HTML export + preview only)
float: translateY(0) to -8px and back glow: box-shadow pulse with accent color blink: border-color toggle for cursors
Stagger with delay: animation: float 4s ease-in-out 0.5s infinite;
Export
npx @marp-team/marp-cli slides.md --pdf --allow-local-files npx @marp-team/marp-cli slides.md --pptx --allow-local-files npx @marp-team/marp-cli slides.md --html --allow-local-files --pptx-editable needs LibreOffice. Animations + details only in HTML.
Design Rules
- One idea per slide. Overflow clips silently.
- h1 = white. Accent for data highlights only.
- Body text #999, labels #666. Never darker than #555.
- Max 6 rows per list slide.
- Charts over numbers. Mix visual types across slides.
- Relative paths only for images.
- Always preview — no overflow warnings in source.
- Per-slide overrides: _backgroundColor, _header, _paginate, _footer
Custom dimensions: section {width: 540px; height: 720px;} (CSS not size: frontmatter). Portrait: stack vertically, scale down 15-20%.