# Slides and diagrams

Decks and diagrams use the same grammar: the HomeHub technology-stack deck (Oct 2026) is the reference. Quiet ground, light type, hairlines, and mint on exactly one category per slide. Build slides from `Slide`, `CoverSlide`, `LayerGrid`, `Pipeline`, `Comparison` and `NodeField`.

## The canvas

- **1280 × 720** (`slide-width` × `slide-height`), 16:9. Export at 2× (2560 × 1440) or 4×.
- **40px side gutter** (`slide-gutter`). Header, footer rule and every content edge align to it.
- Every deck has a ground: **mixed** (the default), **Night** or **Paper**. Make every version from the same source; never hand-tune one. See Consulting style.

## Every content slide

| Zone | What | Style |
| --- | --- | --- |
| Eyebrow | Client or subject · deck name · section, e.g. "HomeHub · Technology stack · MVP" | `eyebrow` in `text-subtle`, items joined with `·` |
| Title | Two beats on one line: "The MVP path. *Documents in, grounded answers out.*" | `slide-title`: lead `ink`, turn `text-muted` |
| Lockup | Top-right, 36px high | `kda-lockup-transparent.png` on Night; `kda-lockup-paper.png` on Paper |
| Lead (optional) | One sentence that says what the slide shows | `slide-lead` in `text` |
| Body | One diagram or one idea | components below |
| Footer | `line` rule; left: subject · slide name · month year; right: status, then `de-alwis.com`, e.g. "Draft · de-alwis.com" | `slide-sub` in `text-subtle` |

The status belongs in the footer, not in a chip in the header. A slide says one thing; if the title needs "and", split the slide.

## The cover

`CoverSlide`: lockup top-left at 48px, eyebrow "Subject · Month Year", a two-line title in `slide-display` (first line `ink`, second `text-muted`), a `line` rule, then the contents as numbered items (number in `accent`, name in `slide-node-l`, a one-line summary). Footer: "Prepared for … by Keith de Alwis, <role> · de-alwis.com" and the status. Give the cover art from the Illustration group with `art` (the orbital sphere by default, faded into the ground on the left), or a generated `field` when no graphic fits. On a Paper cover, use `field`; the pack is Night-only.

## Consulting style (the default for decks)

Decks are built to the standard of a top-tier strategy firm: one message per slide, the argument carried by the titles, every exhibit sourced.

- **Grounds.** *Mixed* (default): Night for the slides that carry the structure (cover, section dividers, key messages, single quotes, close), Paper for the evidence. *Night*: every slide Night, for presenting on a big screen. *Paper*: every slide Paper with Night bookends, for print and pre-reads. Build Night or Paper only when asked.
- **Tracker.** The section names along the top-left in `eyebrow` type; the current one in `ink`, underlined. Logo top-right at 33px of visible artwork on every ground (44px on covers and closes).
- **Action title.** A full-sentence claim in two beats, up to two lines at 32px, lines balanced so the last never holds a single word. Reading only the titles should tell the story.
- **Exhibit furniture.** A unit line under the title ("Hours per month, by function, Sept 2026"); a sticker for "Preliminary" or "Illustrative"; numbered footnotes and a `Source:` line above the footer rule; an optional "So what" bar.
- **Charts.** Bar, column, line, 100% stacked, waterfall, Mekko, slope, scatter or 2×2 and Harvey balls. One series, bar or step in mint and the rest in greys; direct labels, no legends; bars start at zero; the same scale across related charts. An insight panel may take the right third; it sits beside the chart, never connected by a leader line.
- **Mint on Night.** Large filled areas (bars, segments, cells) use mint blended 40% toward the ground; lines, numbers and small marks keep full mint.
- **Frameworks and voices.** Executive summary (claim plus support, or situation, complication, resolution), big number, options with a recommendation, roadmap, KPI dashboard, quote with evidence, a grid of up to four short quotes attributed by role, and case examples.

## Diagram components

- **`LayerGrid`**: a stack of horizontal bands (channels → services → processing → data → integrations → platform). Each row has a two-digit number, a name and a caption in the 192px label column (`slide-label-col`), then cells. Plain cells are separated by `line` hairlines, never boxed. Focal cells get a 1px `accent` box over `accent-tint`. External systems get a dashed `line-strong` box. A `pipeline` row joins its cells with mint `→` and boxes them as a sequence. End with a legend that names each box style.
- **`Pipeline`**: numbered steps left to right joined by mint `→`, each with a name, the technology and what comes out. Steps that write to a store drop a `line-strong` connector, labelled in `slide-label`, to a store box below. One step can be `focus`.
- **`Comparison`**: a ruled table for "today vs proposed" or option trade-offs. Header row in `eyebrow` over a `line-strong` rule, rows separated by `line`. Unknowns are written as "Not documented" in `text-subtle`, never guessed. A mint dot marks rows in scope; a tag column ("Change", "Keep", "Add") uses `accent` for the one tag that needs attention.
- **Three-up notes**: below a diagram, up to three short notes, each an `eyebrow` heading over two lines of `slide-lead`. Use them to say why, not to repeat the diagram.

## Mint, once

Mint marks one category per slide: the MVP scope, the step that matters, the change that has to happen first. It is still one signal with one meaning, even when that category spans several cells. Arrows inside a pipeline are mint because arrows are always mint.

## Content rules

- Real names and real technology only. No vendor logos and no model-vendor logos. Icons come from the one set (Phosphor, see Foundations) and only beside a label: pipeline steps, the heads of points, row and layer labels. Type and the glyphs `→ ↗ · +` still do the rest.
- No invented figures. If a number isn't in the source, leave it off the slide.
- No internal or agent terminology on anything a client will see (ticket numbers, tool names, "agent", "gate").
- Voice on client decks is "we" with the client's name; Keith's own decks use "I".
- Every slide carries one title, and every diagram has a written description for its alt text.

## Building and exporting

- Generators, not hand edits: change the data, rebuild both themes.
- Google Slides downsamples imported images to about 2046px wide, so full-bleed image slides look soft. Ship native shapes and text (SVG converted to pptx shapes) for anything that goes to Google Slides; weights map as "Manrope Light" and "DM Sans Medium". Letter-spacing is the one thing Slides drops.
- PDF and PNG exports keep everything. Use PNG at 2× for social and email, PDF for print.