Design system v1.1.0

Brand book

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.
  • Night for anything presented on screen. Paper when the deck is printed or sent as a reading document. Make both from the same source; never hand-tune one.

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, · 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.

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.

Source: brand/40-slides-and-diagrams.md