Slide System

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.