The House Book · professional slide guide
Make the point.
Show the proof.
A complete visual system, decision guide, component library, and copyable HTML template for people and agents.
Ch 0 · How to use this book
Five moves turn material into a decision.
Use the method in order. The library pages are references, not a substitute for the method.
1
Write the answer
Write the conclusion before choosing a layout. A content-slide title states what is true or what should happen.
2
Name the job
Decide whether the slide must compare, explain, prove, sequence, decide, or ask.
3
Choose one composition
Use the router. Build one visual argument in the stage, not a collection of unrelated blocks.
4
Spend emphasis once
Give the strongest visual weight to the one idea the audience must notice first.
5
Run the gates
Check hierarchy, evidence, accessibility, overflow, and source treatment before shipping.
Reference pages may use a component name as the title. Actual content slides use conclusion-led titles.
Ch 0 · How to use this book
A strong deck moves from answer to action.
Slides are pages in an argument. The sequence matters as much as each individual page.
State the recommendation.
Show why now.
Make the evidence visible.
Resolve trade-offs.
Name owner and next date.
Section test: remove one section. If the decision still follows, that section did not have a job.
Ch 0 · How to use this book
Every slide has one reading path.
Head states the answer, stage proves it, foot records context. The three rows cannot overlap.
Head
The takeaway, as a sentence
purpose · right aligned
Stage
one composition — a guide, a diagram, a table, a statement
Ch 1 · Foundations
Fixed geometry keeps every export stable.
Author once at 1440 × 810. Print to PDF directly; import a rendered page into PPT when editable conversion is not required.
safe area · 1296 × 716
canvas · 1440 × 810
Ch 1 · Foundations
Colour signals role before it signals style.
Warm neutrals carry the page. One signal colour creates focus; semantic colours keep fixed meanings.
Surfaces
Ink ladder
Accents (left three) · Status (right three, reserved)
Ch 1 · Foundations
Three type registers create hierarchy without noise.
Display attracts, reading explains, labels annotate. Four weights are enough.
display · 82 · poster
title · 40 · poster
lede · 26 · reading
body · 18.5 · reading
small · 15.5 · reading
label · 11.5 · mono
Ch 1 · Foundations
Whitespace groups ideas before borders do.
Use spacing first, hairlines second, borders third, and shadows only for true elevation.
Open
no boundary; grouping by space
Hairline
1px boundary for a real object
Soft
quiet context on a tinted surface
Focus
2px edge and restrained offset
Ch 1 · Foundations
Visual weight must match message weight.
The first glance should reveal the conclusion, proof, and context in that order.
1 · conclusion
Demand moved before capacity did.
2 · proof
The final period carries the signal colour because it carries the finding.
3 · context
Units, source, assumptions, and caveats remain available without competing with the claim.
Ch 2 · Layouts by job
Choose the layout by the question the slide must answer.
Start with the audience question. The visual form follows.
Routing rule: one slide can have several facts, but only one job and one dominant composition.
Ch 2 · Layouts by job
The executive summary answers before it explains.
One page should let a decision-maker understand the recommendation, proof, risk, and ask.
Recommendation
Move the intake decision into one governed workflow this quarter.
72% of requests follow three repeatable paths.
Handoffs create 9 of 12 median waiting days.
One approval boundary can cover all three paths.
Primary risk
Unowned exceptions will recreate the old path.
Decision required
Approve one owner and a six-week pilot.
Ch 2 · Layouts by job
Poster pages create a deliberate pause.
Use one idea at poster scale. Nothing competes with it.
Section 03 · Delivery
Make the
decision easy
to repeat.
title · divider · statement share this scale
Ch 2 · Layouts by job
A split pairs reasoning with one decisive anchor.
Use unequal columns so the reader knows which side explains and which side lands.
Explain the move
Lead with the decision, then show the evidence that makes it safe.
The stage splits 7/5. The reasoning column carries the argument in reading type; the anchor card holds the one thing the room must keep.
Decision card
Start with the customer
The right-hand card is an anchor, not a second essay.
Ch 2 · Layouts by job
When one object proves the point, let it dominate.
A chart, screenshot, artefact, or result should own most of the stage.
Column · one series
Source · sits under the evidence
Readout
D is the outlier
State the observation next to the object.
Say why it matters and what it changes. Never add a second object.
Ch 2 · Layouts by job
Use screenshots only when the interface is evidence.
Crop tightly, annotate sparingly, and state the observation beside the image.
Request 0142
Vendor access
The queue shows state, but not priority.
The decision is visible before the owner is assigned.
The action is available before the required control is complete.
Ch 2 · Layouts by job
Architecture must reveal the governing boundary.
Ownership and flow matter more than the number of boxes.
Input
Evidence
Observed or asserted
Structure
Context
Entities and relations
Reasoning boundary
Assessment
What can responsibly follow
Output
Decision
Owner and action
Make the governing boundary visually dominant. Architecture is not a row of equally important boxes.
Ch 3 · Components
Cards work only for true peers.
A metric tile turns one number into the picture; a card groups one self-contained peer.
Flat
Quiet
Default
Raised
Soft
Context
Hard
Priority
Approval rate
per cent, stated in the note
Days saved
from request to answer
Risk score
on a five-point scale
Dense variant
.stat-sm + badge for quarter-width evidence
Ch 3 · Components
Lists show peers; numbers show real order.
The marker must explain the relationship between items.
Bullets
- Use for peers.
- Keep each short.
Checks
- Decision stated
- Owner named
Sequence
- Frame
- Choose
Sub-list
- Item — one-line description
- Item — what to take from it
Peers never live in a comma-separated sentence. Each item is its own bullet — with a one-line description when the name alone doesn't carry the meaning.
Ch 3 · Components
Tables align evidence that the reader must compare.
Use tables for records, not as a substitute for layout.
| Workstream | Owner | Decision | Status | Days |
|---|---|---|---|---|
| Intake | Mina | Approve | Good | 12 |
| Controls | Ravi | Review | Warn | 18 |
| Data | Lin | Build | Good | 9 |
| Launch | Inez | Hold | Stop | 24 |
| Measure | Omar | Track | Good | 30 |
Ch 3 · Components
One margin voice is enough.
A callout changes interpretation or action. It is not decoration.
A note earns its place by changing what the reader does next.
An insight reframes the evidence above it.
A warning names a real risk and its trigger.
A stop is a blocker. It outranks everything else on the page.
Draft Measured Kicker · eyebrow Source · under evidence
Ch 3 · Components
Score options only on criteria that change the decision.
Weights, evidence, and a recommendation must be visible together.
Recommendation · Option C. It wins because reversibility and control fit outweigh the small cost disadvantage.
Ch 3 · Components
Roadmaps show outcomes, owners, and decision gates.
A roadmap is not a longer Gantt. It explains how capability changes over time.
Ch 3 · Components
Ownership tables separate doing from deciding.
Use role words only when each one changes accountability.
A · accountable R · responsible C · consulted I · informed
Ch 3 · Components
A risk is useful only when its trigger and action are named.
Separate what may happen from what has already been decided.
Trigger · more than 10% of requests bypass the workflow
Action · block launch until exception owner is named
Owner · Operations
Trigger · decision not complete by week 3
Action · reduce pilot scope to one request path
Owner · Risk
Decision log
Reduces three handoffs to one auditable decision.
Keeps reversal possible while evidence is incomplete.
Ch 4 · Evidence
Choose the diagram by the relationship.
Ask what carries meaning: order, ownership, edges, containment, axes, overlap, or quantity.
Object limits: simple compositions use 3–6 objects. Network diagrams use 7–24 nodes. Above the limit, split the argument.
Ch 4 · Evidence · row family
Use flow for causality and timeline for dates.
The arrow must mean something specific; otherwise use spacing.
AUG 10
Frame
AUG 17
Test
AUG 24
Decide
SEP 01
Measure
Ch 4 · Evidence · lane family
Sequence diagrams show order across owners.
Time reads down. Ownership reads across. Message numbers carry the story.
Ch 4 · Evidence · lane family
Swimlanes make handoffs visible.
Every crossing line is an ownership event.
Ch 4 · Evidence · graph family
State machines define legal change.
A state persists; a transition happens.
Ch 4 · Evidence · graph family
Entity relationships show ownership through keys.
Reduce the model to the keys and cardinalities that explain the claim.
Ch 4 · Evidence · graph family
Data-flow diagrams make provenance explicit.
Show source, transformation, payload, and destination.
Ch 4 · Evidence · graph family
A platform should replace point-to-point wiring.
Fan in, establish one truth, then fan out.
Ch 4 · Evidence · graph family
Show today’s mess before proposing tomorrow.
Zone the estate honestly and highlight the exact problem to remove.
Ch 4 · Evidence · graph family
The return edge is the message.
Use a loop only when the cycle itself is the claim.
Ch 4 · Evidence · graph family
Trees explain hierarchy, not motion.
One root, orthogonal branches, and no arrows.
Ch 4 · Evidence · band family
Layers define who may call whom.
A layer stack is a dependency rule, not a decorated list.
Transport
HTTP · MCP — parses the wire, authenticates, and hands over a validated request. Knows nothing about tasks.
Application
ExecutionRuntime — admission, cancellation, durable records, terminal mapping. The only layer that owns lifecycle.
Pipeline
Two-phase — implementer, then refiner. Knows nothing about HTTP.
Providers
Claude · Codex — one session interface, two runtimes behind it.
Ch 4 · Evidence · band family
Data earns trust through three refinement tiers.
Bronze lands, silver conforms, gold serves.
Bronze · raw
Landed exactly as received. No schema enforced, nothing dropped, replayable from source.
Silver · conformed
Typed, deduplicated, joined to reference data. One row means one thing.
Gold · served
The only tier anyone outside the platform may query. Aggregates and contracts live here.
Ch 4 · Evidence · band family
Width must carry a real quantity.
Use a pyramid or funnel only when each tier materially narrows.
Shipped
12
In review
20
Specified
34
Proposed
58
Ch 4 · Evidence · band family
Nesting shows total containment.
Use rings for boundaries inside boundaries, not partial overlap.
Caller machine
Engine process
Worker sandbox · cwd-only
Worker
Ch 4 · Evidence · matrix family
Two independent axes create four decisions.
Name both axes and make each cell an action.
Effort to change →
Schedule
High value, high effort. Needs a plan and a named owner.
Data migrationRegional rolloutDo now
High value, low effort. Nothing should sit here for long.
Billing retrySSOAudit logDrop
Low value, high effort. Say so and close it.
Legacy importCustom themingBatch
Low value, low effort. Fold into other work.
Email footerTooltip copy← Value delivered →
Ch 4 · Evidence · matrix family
Coverage matrices expose gaps.
Rows are controls, columns are surfaces, and colour means status.
Ch 4 · Evidence · matrix family
Use Gantt only when duration and overlap matter.
If order alone matters, a timeline is cheaper to read.
Ch 4 · Evidence · plot family
Radar compares two profiles, never one.
Five or six shared criteria are the practical limit.
proposalincumbent
Ch 4 · Evidence · plot family
Show the relationship and one outlier.
The population stays neutral; the claim gets the signal colour.
Ch 4 · Evidence · plot family
The overlap must be the finding.
Use two or three true sets and name the intersection.
Ch 4 · Evidence
Choose the chart by the comparison.
The question determines the chart. Style comes after structure.
Chart rule: direct labels first, one highlighted series, units on the axes, source under the exhibit, and no decorative effects.
Ch 4 · Evidence · chart family
Sort categories and label them directly.
Use the simplest chart that makes ranking or composition obvious.
Column · one series
Horizontal · default
Sorted bars let direct labels fit.
Single proportion
Column · three series
- Plan
- Actual
- Forecast
Ch 4 · Evidence · chart family
Use stacked charts for composition and waterfalls for bridges.
Both explain a total, but they answer different questions.
100% stacked · composition
2025 baseline → 2026 plan
Waterfall · bridge
Ch 4 · Evidence · chart family
Annotate the break, not every point.
The title carries the conclusion; the mark shows where it becomes visible.
Line · change through time
Use one line for the claim. Add a second only when comparison is the claim.
S-curve · adoption or saturation
Label the transition, threshold or saturation — not every point on the curve.
Ch 5 · Finishing
One source document can become a five-slide argument.
Turn each source section into a conclusion, then choose the job and layout.
| Source section | Takeaway you write | Job | Layout |
|---|---|---|---|
| Problem statement | "Worktrees cost more than they protect" | State one claim | Poster · statement |
| Proposed design | "The caller owns the branch; the engine owns the commit" | Show a system's shape | Architecture row |
| Request lifecycle | "Only the engine ever writes" | Show the data | Sequence |
| Before & after | "One branch convention replaces three" | Compare two things | Split |
| Rollout | "Three workstreams, one critical path" | Show the data | Gantt |
Five moves — takeaway → job → layout → accent once → gates.
Ch 5 · Finishing
Close with a decision, owner, and next date.
The last page should make the meeting outcome easy to repeat after the room leaves.
Decision
Approve a six-week pilot with one governed approval boundary.
Owner · Sponsor
18 AugOwner · Product
21 AugOwner · Risk
28 AugNext checkpoint
3 September · pilot readiness review
Ch 5 · Finishing
A slide is finished only when the claim survives distance.
Run the visual, evidence, accessibility, and implementation checks before shipping.
Every slide
- The title states a conclusion or, on a reference page, names the component
- One composition owns the stage
- Visual weight matches message weight
- No content enters the footer or overflows the safe area
- Body copy stays at or above the reading floor
Every figure
- Every SVG has role, title, and description
- Simple compositions use 3–6 objects; network diagrams use 7–24 nodes
- Exactly one focal mark carries the signal colour
- Data units, dates, and source treatment are explicit
- Contrast and reading order work without colour alone
Open with ?qa to run deck checks, or use the QA tab in the Menu on the current page.
Ch 5 · Finishing
The system records its own evolution and refinement.
Version the design contract inside the file so copied pages retain their provenance and refinement history.
1.2.2
Breathing room, and exhibits that obey their own rules. The guide rail starts at one inset book-wide instead of sixteen, and no label sits closer than 24 units to its plate. Chart cards fill their row. The quadrant plots items, the pyramid’s widths carry its numbers, and data marks are filled only from data tokens.
1.2.1
Accent and status separated. The third accent and the third chart series moved off status-green to a deep teal, so the accent trio and the reserved status trio read as different families and “never a chart series” holds in the charts themselves.
1.2.0
Chart-system unification and reference accuracy. Every chart rebuilt as inline SVG on two fixed viewBoxes, so scale, stroke weight and type match across the book, on one palette with a neutral population and a single accent focal. Annotation collisions cleared, and reference pages corrected to name the tokens that actually exist.
1.1.1
Diagram and chart refinement pass. Tighter type hierarchy, calmer diagram styling, cleaner labels, improved callouts, and reworked graph-family exemplars.
1.1.0
The professional guidebook rebuild. One coherent style layer, offline system fonts, stronger hierarchy, searchable library, agent-readable manifest, full-slide copy, automated QA, direct page routing, and eleven new practical compositions.
1.0.0
The guidebook rebuild. Zone contract (head · stage · foot as grid rows), the guide rail on every teaching page, one isolated Menu holding method, notes, this page's code, present, and the version record, forty-two pages, and all twenty-seven diagram types in chapter four.
prior
Prior art, not releases of this file. An earlier component library and a twenty-composition diagram set whose geometry contract is adapted from cathrynlavery/diagram-design (MIT). Both predate the guidebook shell and its zone contract.
Bump the minor version when a page or component is added. Bump the patch when only tokens, copy, or behaviour changes. Record the change before shipping.