# Slide System

> Build designed, consistent slide decks as a single HTML file (1920×1080 slides with speaker notes…

Build designed, consistent slide decks as a single HTML file (1920×1080 slides with speaker notes) on a tested frame with design tokens, a fixed type scale and 12 named layouts whose word budgets prevent overflow. Use this skill whenever the user asks for a deck, slides, a slideshow, a presentation, a pitch deck, an investor deck, a talk, a keynote, a lecture, a webinar, a board or quarterly business review (QBR), or "PowerPoint-style" or "Keynote-style" slides in HTML, even if they only say "make a presentation about X".

- Page: https://ss33.ai/skills/skillstore33/slide-system-21032362022
- Publisher: skillstore33
- Category: [Creative & Media](https://ss33.ai/skills/category/creative-and-media-0j3x01) › [Image & design](https://ss33.ai/skills/category/creative-and-media-0j3x01/image-and-design-nlbt3d)
- License: MIT

## Skill

SKILL.md: https://ss33.ai/api/v1/ss33/download/skillstore33/slide-system-21032362022

# Slide System

The bar: a sequence of single ideas, each readable from the back of the room in three seconds, whose headlines alone tell the story, with every figure from the brief on a slide and none invented, and a look that belongs to this subject rather than to "a deck about X".

## The frame (use it, don't rebuild it)

`read_skill_file("slide-system", "references/starter.html")` is the base of the file: tokens, a 1920×1080 12-column frame with `overflow:hidden`, a fixed type scale, all 12 layout classes, an icon sprite and one example slide per layout. Copy its `<head>`, `<style>` and sprite; change the TOKENS block, `<title>`, Fonts `<link>`, and add your style rules as section 6. Everything that follows assumes this CSS.

Optional depth, open what you need, each once:
- `references/layouts.md`: per-layout character budgets, skeletons and mistakes; the bar-chart recipe with precomputed positions; the diagram kit (fill/stroke classes, arrow marker, `.ko` halos).
- `references/styles.md`: six tested style families (tokens, font pairs, style blocks) and a contrast-checked hue table.

## Contract (the checker depends on it)

- One self-contained HTML file. Each slide is `<section class="slide LAYOUT">` at 1920×1080, stacked vertically, with `<aside class="notes">` inside it (30–90 words the speaker says). No frameworks, no JavaScript.
- `LAYOUT` is one of `title section statement big-number stats chart compare cards process visual quote closing`; modifier `inverse`. `title` first, `closing` last.
- Fonts from one Google Fonts `<link>`; everything else inline. Images are inline SVG; never invent image URLs (use `.slot` with `[Photo: …]`). No emoji icons.
- Output the whole file in one ```html block in the reply that follows your reads, then 2–4 lines: the look you chose, the layout sequence, any placeholder to replace. Don't end a reply on a plan.

## What is measured, and the traps

- **Overflow, overlap, text < 20px, contrast below AA, near-miss alignment, crowding** (> 60 words or > 5 list items). The frame prevents all of these as long as you add text, not CSS: no `style=""`, no `font-size`, no `<br>` in headings, no absolute positioning, negative margins or transforms. The budgets in `layouts.md` were tested in wide fonts; past them, text overflows. Aim for ≤ 40 visible words (55 on data slides, spent on labels and comparisons).
- **Invented numbers.** Every figure on a slide must be given by the brief or honestly derivable (a sum, a difference, a % change, a share). Shorten without losing precision: `3,250` → `3.25k`, never `3k`; decimals stay.
- **Brief coverage.** Every figure in the brief's tables and bullets should be on a slide (notes don't count). This is where strong decks quietly lose: a tidy story drops the inconvenient row. Show series in full, tables cell by cell; chart or split rather than cut.
- **SVG:** `viewBox`, no `width`/`height`, everything inside the viewBox, text ≥ 26 units. Compute bar heights (`h = value / max × 420` on the `1104×600` recipe); bars drawn by eye are visibly wrong.
- **Hidden in plain sight:** the footer and slide counter live in the 128px bottom padding; `.visual .figure` bleeds to the edges by design; `inverse` swaps tokens, so a slide-level accent must contrast with `--inv-bg` too.

## Craft (your judgement)

- Headlines are full-sentence takeaways with a verb; a number is shown as a number or a chart, not a sentence; a lone number gets its comparison. One `<em>` and one accent element per slide: accent is emphasis.
- Vary layouts (no repeats in a row, 6+ in 8–12 slides) and put something visual on at least every third slide; a well-drawn diagram in `visual` usually beats a fourth chart. If the brief lists slides one by one, make exactly those.
- **The look.** Name the cliché for this topic (green leaves for energy, navy for finance) and avoid its hue unless it is the brand colour. Pick a family from `styles.md` that suits the room and the content, or derive your own tokens from one, keeping its contrast and never touching sizes, line-heights or the frame. Take the accent from an object in the subject's world, via the hue table (`ACCENT` on light, `ACCENT_DARK` on dark). Dark stage is wrong for dim projectors and long rooms.
- You may add rules as `.slide.LAYOUT .thing{…}` in section 6 for a slide that needs it, never changing sizes or padding.

Before delivering, check the brief figure by figure against the slides, and every number on the slides against the brief.