# AMPL Diagram Stock

Created: 2026-06-16

Deck: `index.html`

This stock deck translates strategy-consulting visualization patterns into the AMPL / NOT A HOTEL white editorial style: white canvas, bold Japanese gothic headings, hairline rules, gray panels, circular nodes, and minimal blue accents.

## Pattern Index

| # | Pattern | Use when | Replace |
|---:|---|---|---|
| 1 | Cards | Show 3 parallel concepts | Card titles, numbers, descriptions |
| 2 | Flow | Show a linear process | Step names, step copy, highlighted step |
| 3 | Steps | Explain a vertical procedure | Step numbers, headings, detail text |
| 4 | Before / After | Show transformation | Before state, after state, delta message |
| 5 | Comparison | Compare options across criteria | Criteria, options, winning cells |
| 6 | Matrix | Sort items by two axes | Axis labels, quadrant labels, highlighted quadrant |
| 7 | Pyramid | Show hierarchy or priority layers | Layer names, layer criteria, top claim |
| 8 | Funnel | Show staged narrowing | Stage names, values, final conversion |
| 9 | KPI | Show 3 headline metrics | Values, units, labels, one accent metric |
| 10 | Layers | Explain architecture or stack | Layer tags, names, responsibilities |
| 11 | Relation | Show hub-and-spoke relationships | Core concept, satellite concepts |
| 12 | Trend | Show momentum over time | Axis labels, points, annotation |
| 13 | Waterfall | Explain what drives a delta | Start value, increase/decrease bars, end value |
| 14 | Gap | Compare current vs target | Labels, bar widths, gap statement |
| 15 | Scorecard | Scan health across metrics | Metric names, values, status, target |
| 16 | Summary | Compress executive takeaways | Claim, proof, implication blocks |
| 17 | Gantt | Show roadmap timing | Workstreams, quarters, bars, gate |
| 18 | Heatmap | Find hot spots in a grid | Row/column labels, values, focus cell |
| 19 | Decision Tree | Choose actions from conditions | Main question, branch conditions, leaf actions |
| 20 | Cycle | Show a recurring feedback loop | Node names, center principle |
| 21 | Tree | Show taxonomy or responsibility hierarchy | Root, branch names, leaf items |
| 22 | Scatter | Position items on two continuous axes | Axis labels, points, outliers |
| 23 | Composition | Show mix shift over time | Time labels, segment shares, legend |
| 24 | Allocation | Show volume flow between stages | Source total, middle categories, outcomes |
| 25 | Maturity | Show current and target levels | Capabilities, level labels, NOW/TARGET cells |

## Copy Rules

- Copy the full `<section class="slide ...">` block for a pattern.
- If the class starts with `nd-` and is one of the extra patterns, copy the matching CSS block from the `<style>` tag too.
- Keep each slide to one message. If the copied pattern needs more than one main claim, split it.
- Use blue only for direction, focus, or the one decision point.
- Use real numbers or clearly marked assumptions. Do not invent benchmark data in final client-facing slides.

## Pattern Families

Narrative and argument:

- Cards
- Steps
- Summary
- Pyramid
- Before / After

Process and system:

- Flow
- Gantt
- Decision Tree
- Cycle
- Layers
- Relation
- Tree
- Allocation

Data and comparison:

- Comparison
- Matrix
- Funnel
- KPI
- Trend
- Waterfall
- Gap
- Scorecard
- Heatmap
- Scatter
- Composition
- Maturity

## Source Inspiration

Pattern selection is based on the taxonomy in:

https://github.com/kgraph57/mckinsey-style-visualization-skill

The visual treatment is intentionally AMPL / NOT A HOTEL-style rather than consulting-firm-branded.