# Canvoy — Slide Generation Guide for AI Assistants Base URL: `https://canvoy.app` Auth header: `X-Api-Key: YOUR_USER_ID` (get yours from the **API Key** button in the dashboard) ```bash export SLIDES_API_KEY= ``` --- ## Mindset You are a **senior visual designer** who happens to know how to write HTML. Before touching the keyboard, close your eyes and picture the finished slide on a 1280×720 projector screen. Could it appear on a Canva featured template page? On a high-end agency portfolio? If not, redesign it in your head first. The bar is not "looks fine." The bar is "visually arresting." Every element on every slide must be intentional. Empty space is a design decision. Font weight is a design decision. The exact shade of a border is a design decision. --- ## Workflow — follow this order every time 1. **Understand context** — Before picking any colours or fonts, research the subject of the presentation: - **Brand identity**: Does the company/product have a website, logo, or brand guidelines? Look at their primary colours, typeface choices, and overall visual tone. If they have a website URL, fetch it and inspect the CSS/design language. - **Tone and language**: Read their copy. Are they formal or conversational? Technical or accessible? Aspirational or matter-of-fact? Mirror that register in slide headlines and body text. - **Existing palette**: Extract the dominant and accent colours from their brand (hex values if possible). These become your `--accent` and `--accent2`. Build the slide palette *around* those brand colours rather than forcing brand content into a generic preset. - **Audience**: Who is in the room? (investors, customers, employees, the public) — this shapes hierarchy and how much explanation each slide needs. - **Presentation type**: investor pitch vs. all-hands vs. product demo vs. academic — this shapes structure and formality. If you cannot find brand assets, fall back to the palettes below. If you *can* find them, the predefined palettes are starting points only — adapt them to match the actual brand. 2. **Choose a visual identity** — Pick one palette, one font system, one structural style. Commit completely. When the subject has an established brand, derive the palette from their brand colours. When it doesn't, use the palettes defined below. 3. **Plan the narrative arc** — List every slide as a story beat before writing any HTML. 4. **Build the master CSS** — Define `:root` vars, font import, `*` reset, and `body` base. This goes in `master_css` and never repeats. 5. **Generate each slide** — Only layout-specific CSS per slide. All design tokens come from master. Never skip step 3. A deck that's been planned is always better than one that's been improvised. --- ## Content principles - **Headlines make claims, not labels.** "Revenue grew 68% YoY" beats "Revenue". "We ship twice as fast" beats "Speed". - **One idea per slide.** If you have two ideas, use two slides. - **No bullet lists.** Ever. Convert to cards, stats, callouts, timelines, or separate slides. - **Less is almost always more.** A single number in massive type beats a paragraph every time. - **Every slide earns its place.** If removing it wouldn't lose meaning, cut it. --- ## Technical constraints - **Canvas is exactly 1280×720px.** Never `vw`, `vh`, or `%` on root heights. No `@media` queries. No responsive design. - The platform wraps each slide in: `html, body { width: 1280px; height: 720px; overflow: hidden }` — your CSS runs inside that. - **Tailwind CSS** is available (CDN, no setup). - **Google Fonts** `@import` works in `

Annual Review 2024

A Year That Changed Everything

How we grew, what we learned, and where we go next.

``` --- ### 2. Split — text left, feature right Use when a single number, chart, or visual needs to anchor the narrative. ```html

Key Metric

Revenue exceeded every projection this quarter

Enterprise expansion and two new market entries drove compounding growth.

+68%

Year-over-year revenue

``` --- ### 3. Feature cards — three pillars No emoji. Use gradient-border cards with a numbered label or a solid colour block. Clean, architectural, premium. ```html

Speed without compromise

Sub-50ms response times at any scale. We've removed every unnecessary layer between your data and your users.

Precision you can audit

Every action is logged, attributed, and reversible. Compliance-ready from the first deployment.

Security by default

End-to-end encryption, zero-trust architecture, SOC2 Type II certified. Not an afterthought.

``` --- ### 4. Editorial quote High-contrast, typographic. The quote is the entire slide. ```html

"We cut onboarding time from six weeks to three days. That's not an improvement — that's a different category of product."

Sarah Chen

VP Engineering, Meridian Health

Customer Story

After deploying in Q2, Meridian's engineering team closed 14 enterprise deals in a single quarter — each onboarded in under four days. The result was a 3× increase in net revenue retention.

``` --- ### 5. Process / timeline Steps with a connecting line. Works best with 3–5 steps. ```html

How it works

From sign-up to first value in under a day.

Connect your data

OAuth in 30 seconds. We support Postgres, Snowflake, BigQuery, and 40+ others natively.

Define your schema

Tell us what matters. Our schema editor understands your data model from day one.

Go live

Push to production. Monitoring, rollback, and audit trail included automatically.

Iterate fast

Feature flags, A/B infrastructure, and team permissions — all in one place.

``` --- ### 6. Metrics dashboard 4 numbers. Each tells a story. Glow effect anchors the composition. ```html

Q4 2024 — By the numbers

Oct – Dec 2024

$4.2M

Quarterly revenue

68% year-over-year

1,247

Active customers

31% quarter-over-quarter

98.4%

Net revenue retention

3.1 points

4.9

Customer satisfaction

Industry avg: 4.1

``` --- ### 7. Agenda / table of contents Structural slide. Two-zone layout: title anchored left, items right. ```html

Today's agenda

What we'll cover

Context & the problem

Where we started and why it matters

Our approach

The methodology and key decisions

Results & evidence

What we measured, what we found

What's next

Decisions needed from this team

``` --- ### 8. Comparison — two options Use for before/after, us vs. them, or two paths forward. ```html

Before

The status quo

Manual reconciliation takes 3 days per cycle

Errors discovered in production, not in staging

No audit trail — compliance is a quarterly scramble

After

With our platform

Automated in 4 minutes. Runs on every merge.

Issues caught in CI — never reach your customers

Immutable audit log. SOC2 ready from day one.

``` --- ### 9. Closing / CTA One final ask. Large, confident, minimal. Leave breathing room. ```html

Ready to start

Let's build this together.

Book a 30-min demo →

or start free — no card required

hello@company.com · company.com/demo

``` --- ## Anti-patterns These are the most reliable markers of a cheap, AI-generated slide: | Don't | Do instead | |-------|-----------| | Emoji as icons (⚡🎯🔒) | SVG stroke icons or CSS geometric shapes | | System fonts (Arial, Helvetica, sans-serif) | Always load a Google Font | | Single flat background colour | Layered mesh gradients + optional grid overlay | | Same gradient on every heading | Gradient text only on hero headlines and large stats | | Uniform element sizes | Strong size contrast — one dominant element, others subordinate | | White body background with coloured text | Commit to a deliberate dark or light theme | | Mixed border-radius values | Pick one radius scale and apply it consistently | | Generic ✓ and ✗ text characters | SVG checkmarks and crosses with proper colour | | All cards identical | Vary one dimension: top accent colour, size, or elevation | | `vw`, `vh`, `%` heights | Fixed px values — the canvas is always 1280×720 | | Cramming 6+ items on one slide | Max 4 cards, max 5 steps, max 4 metrics | | `/* theme vars */` placeholder | Write the actual `:root {}` block — never abbreviate | | Centered text on content slides | Left-align body copy; center only on full-bleed hero slides | | Bullet lists disguised as cards | Each card needs a real visual differentiator | | Opacity 0.5 on important text | Muted text uses `rgba(…, 0.4–0.5)` — decorative uses `0.06–0.12` | --- ## Narrative arc Plan the slide sequence as a story before writing any HTML. ### General-purpose (8–12 slides) 1. **Hook** — Bold claim or striking number *(full-bleed hero)* 2. **Agenda** — Optional, for long decks *(agenda layout)* 3. **Context / problem** — Why this matters *(split or hero)* 4. **Insight** — The one thing they must understand *(stats or split)* 5. **Solution** — What you're doing about it *(feature cards)* 6. **Evidence ×2–3** — Proof: data, quotes, case study *(metrics, quote, split)* 7. **How it works** — The mechanism *(process/timeline)* 8. **The ask** — One clear action *(closing CTA)* ### Pitch deck (10–15 slides) Problem → Solution → Market size → Product demo → Traction → Team → Business model → Ask ### Quarterly review (8–10 slides) Goals recap → Achievements → Key metrics → What didn't work → Learnings → Next quarter → Decisions needed --- ## Master CSS — shared theme Use `master_css` to define the design system once. Every slide inherits it automatically. ```bash curl -X POST https://canvoy.app/api/presentations \ -H "X-Api-Key: $SLIDES_API_KEY" \ -H "Content-Type: application/json" \ -d '{ "title": "Q4 Review", "master_css": "@import url(\"https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;600;800&display=swap\");\n:root{--bg:#080810;--surface:#0f0f1a;--accent:#6366f1;--accent2:#a78bfa;--text:#f1f5f9;--muted:rgba(241,245,249,0.4);--border:rgba(255,255,255,0.07)}\n*{margin:0;padding:0;box-sizing:border-box}\nbody{font-family:\"Plus Jakarta Sans\",sans-serif;background:var(--bg);color:var(--text);width:1280px;height:720px;overflow:hidden}", "slides": [ { "html": "

Slide with no repeated boilerplate

" } ] }' ``` Update theme without touching slides: ```bash curl -X PATCH https://canvoy.app/api/presentations/$PRES_ID/theme \ -H "X-Api-Key: $SLIDES_API_KEY" \ -H "Content-Type: application/json" \ -d '{ "master_css": ":root { --accent: #f59e0b; }" }' ``` --- ## Quickstart — full deck in one request ```bash curl -X POST https://canvoy.app/api/presentations \ -H "X-Api-Key: $SLIDES_API_KEY" \ -H "Content-Type: application/json" \ -d '{ "title": "Q4 Review", "master_css": "...", "slides": [ { "html": "..." }, { "html": "...", "notes": "Speaker notes for slide 2" } ] }' ``` **Response includes ready-to-use URLs:** ```json { "id": "abc-123", "title": "Q4 Review", "masterCss": "...", "slideCount": 2, "slides": [...], "urls": { "present": "https://canvoy.app/present.html?id=abc-123", "edit": "https://canvoy.app/editor.html?id=abc-123", "remote": "https://canvoy.app/remote.html?id=abc-123" } } ``` Share `urls.present` with your audience. --- ## All endpoints | Method | Path | Auth | Description | |--------|------|------|-------------| | `GET` | `/api/presentations` | required | List your presentations | | `POST` | `/api/presentations` | required | **Create + optionally populate in one shot** | | `GET` | `/api/presentations/:id` | public | Full presentation with slides + urls | | `PUT` | `/api/presentations/:id` | owner | Replace title, master CSS, and/or all slides | | `DELETE` | `/api/presentations/:id` | owner | Delete | | `PATCH` | `/api/presentations/:id/theme` | owner | **Update master CSS only** | | `POST` | `/api/presentations/:id/slides` | owner | Append one slide | | `POST` | `/api/presentations/:id/slides/batch` | owner | **Append multiple slides at once** | | `PATCH` | `/api/presentations/:id/slides/:sid` | owner | Update one slide's html/notes | --- ## Recipes ### Add slides to an existing presentation (batch) ```bash curl -X POST https://canvoy.app/api/presentations/$PRES_ID/slides/batch \ -H "X-Api-Key: $SLIDES_API_KEY" \ -H "Content-Type: application/json" \ -d '[ { "html": "...", "notes": "First new slide" }, { "html": "...", "notes": "Second new slide" } ]' ``` ### Replace all slides ```bash curl -X PUT https://canvoy.app/api/presentations/$PRES_ID \ -H "X-Api-Key: $SLIDES_API_KEY" \ -H "Content-Type: application/json" \ -d '{ "title": "New Title", "slides": [{ "html": "..." }] }' ``` ### Update one slide ```bash curl -X PATCH https://canvoy.app/api/presentations/$PRES_ID/slides/$SLIDE_ID \ -H "X-Api-Key: $SLIDES_API_KEY" \ -H "Content-Type: application/json" \ -d '{ "html": "..." }' ``` --- ## Speaker notes Use the `notes` field for what to say, not what is on the slide. Good notes: - Say the thing the slide doesn't (the context behind a data point) - Include a transition cue ("This leads us to...") - Add timing guidance for long decks ("~2 min here") - Are written in spoken language, not written language --- ## Viewing | URL | Purpose | |-----|---------| | `/app.html` | Presentations dashboard | | `/present.html?id=ID` | Full-screen presenter | | `/remote.html?id=ID` | Phone remote control | | `/skills` | This document (rendered) |