Strategic Futures Matrix

# How to Use the Consultant 2×2 Quadrant Diagram in diagram-design: A Complete Guide > Master the consultant 2x2 quadrant diagram in diagram-design. This guide shows you how to leverage this strategic tool to visualize four futures and make informed decisions. - Repository: [Cathryn Lavery/diagram-design](https://github.com/cathrynlavery/diagram-design) - Tags: how-to-guide - Published: 2026-08-14 --- **The Consultant 2×2 quadrant diagram in diagram-design is a specialized scenario matrix that displays four named strategic futures using double-ended axes, single-word labels, and a single coral-tinted focal quadrant.** This guide walks you through creating publication-ready 2×2 matrices in the `cathrynlavery/diagram-design` repository. The Consultant variant differs from standard quadrant plots by replacing scattered data points with four **named scenario cells**, making it ideal for strategic frameworks like BCG-style portfolio analysis or futures planning. ## What Makes the Consultant 2×2 Different The Consultant 2×2 is defined in [`references/type-quadrant.md`](https://github.com/cathrynlavery/diagram-design/blob/main/references/type-quadrant.md) as a **layout token** that modifies the base Quadrant type. According to the skill definition in [`SKILL.md`](https://github.com/cathrynlavery/diagram-design/blob/main/SKILL.md)【/cache/repos/github.com/cathrynlavery/diagram-design/main/skills/diagram-design/SKILL.md#L95-L99】, selecting this variant triggers three structural changes: - **Double-ended axis markers** (`marker-start` + `marker-end`) replace single-headed arrows - **Scenario cells** (`` + `` blocks) replace individual plotted items - **Corner tag format** (`NN · DIMENSION-A / DIMENSION-B`) identifies each quadrant The visual style remains consistent with the house system—fonts from Google Fonts (Geist, Instrument Serif, Geist Mono) and tokens from [`style-guide.md`](https://github.com/cathrynlavery/diagram-design/blob/main/style-guide.md)—but applies a thicker axis stroke (`1.2px`) and reserves the coral accent for exactly one focal cell. ## Step-by-Step: Creating a Consultant 2×2 Diagram ### Step 1: Select the Visual Type Open [`SKILL.md`](https://github.com/cathrynlavery/diagram-design/blob/main/SKILL.md) and locate the visual-type table. Choose **Quadrant** as the base type, then specify the **Consultant special** variant. This ensures the system loads the correct layout reference file【/cache/repos/github.com/cathrynlavery/diagram-design/main/skills/diagram-design/SKILL.md#L95-L99】. ### Step 2: Load the Layout Reference Read [`references/type-quadrant.md`](https://github.com/cathrynlavery/diagram-design/blob/main/references/type-quadrant.md), specifically the *Consultant special* section (lines 26–44). This defines: - Axis positioning and marker requirements - Cell geometry and content rules - The focal coral tint application【/cache/repos/github.com/cathrynlavery/diagram-design/main/skills/diagram-design/references/type-quadrant.md#L26-L44】 ### Step 3: Start from a Template Copy either the minimal scaffold or the full editorial template from `assets/`: ```bash # Option A: Minimal scaffold cp skills/diagram-design/assets/template.html my-consultant-2x2.html # Option B: Pre-built Consultant example (recommended) cp skills/diagram-design/assets/example-quadrant-consultant.html my-consultant-2x2.html ``` The example file at [`assets/example-quadrant-consultant.html`](https://github.com/cathrynlavery/diagram-design/blob/main/assets/example-quadrant-consultant.html) contains every required element pre-configured【/cache/repos/github.com/cathrynlavery/diagram-design/main/skills/diagram-design/assets/example-quadrant-consultant.html#L1-L7】. ### Step 4: Configure the SVG Structure The Consultant 2×2 requires five specific SVG elements, detailed in lines 60–128 of the example file【/cache/repos/github.com/cathrynlavery/diagram-design/main/skills/diagram-design/assets/example-quadrant-consultant.html#L60-L128】: #### Double-Ended Axis Markers ```html ``` #### Axis Lines with Double Markers ```html ``` Note the `stroke-width="1.2"`—this is the Consultant-specific rule from [`type-quadrant.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-quadrant.md) lines 42–44. #### Single-Word Axis Labels Place labels **beyond** the arrow tips, using single words with no glyphs: ```html REMOTE IN-PERSON HUMAN AI ``` #### Scenario Cells with Corner Tags Each cell requires a numbered corner tag in the format `NN · DIMENSION-A / DIMENSION-B`: ```html 01 · REMOTE / HUMAN Distributed humans ``` #### Focal Coral Tint Apply the coral accent (`#eb6c36` as `var(--color-accent)`) to **exactly one** quadrant: ```html ``` The stroke-and-fill combination signals the "headline bet" or priority scenario. ### Step 5: Validate with the Pre-Output Checklist Before export, verify your diagram passes the taste-gate defined in [`SKILL.md`](https://github.com/cathrynlavery/diagram-design/blob/main/SKILL.md) §9 (lines 27–33)【/cache/repos/github.com/cathrynlavery/diagram-design/main/skills/diagram-design/SKILL.md#L27-L33】: - **Type fit**: Confirms Consultant 2×2 conventions are met - **Geometry**: 4-px grid alignment, correct proportions - **Connector rules**: All axis markers present and bidirectional - **Coral usage**: Exactly one focal quadrant tinted - **Accessibility**: ARIA attributes (`role="img"`, `aria-labelledby`), sufficient contrast ### Step 6: Export to SVG or PNG Run the export command documented in [`commands/export-diagram.md`](https://github.com/cathrynlavery/diagram-design/blob/main/commands/export-diagram.md)【/cache/repos/github.com/cathrynlavery/diagram-design/main/commands/export-diagram.md#L11-L13】: ```bash export-diagram my-consultant-2x2.html --svg-only ``` For PNG output, omit the `--svg-only` flag. The command reads your HTML, re-runs the taste-gate, and writes the standalone file beside your source. ## Complete Working Example Here is a minimal, runnable Consultant 2×2 template derived from [`example-quadrant-consultant.html`](https://github.com/cathrynlavery/diagram-design/blob/main/example-quadrant-consultant.html): ```html Strategic Futures Matrix · REMOTE × AI ``` ## Key Source Files Reference | File | Purpose | Location | |------|---------|----------| | [`SKILL.md`](https://github.com/cathrynlavery/diagram-design/blob/main/SKILL.md) | Master skill definition, visual-type table, pre-output checklist | [`skills/diagram-design/SKILL.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/SKILL.md) | | [`type-quadrant.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-quadrant.md) | Quadrant layout rules; *Consultant special* subsection | [`skills/diagram-design/references/type-quadrant.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-quadrant.md) | | [`example-quadrant-consultant.html`](https://github.com/cathrynlavery/diagram-design/blob/main/example-quadrant-consultant.html) | Fully realized example with all required elements | [`skills/diagram-design/assets/example-quadrant-consultant.html`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/assets/example-quadrant-consultant.html) | | [`template.html`](https://github.com/cathrynlavery/diagram-design/blob/main/template.html) | Minimal starting scaffold | [`skills/diagram-design/assets/template.html`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/assets/template.html) | | [`style-guide.md`](https://github.com/cathrynlavery/diagram-design/blob/main/style-guide.md) | Design tokens (colors, typography) | [`skills/diagram-design/references/style-guide.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/style-guide.md) | | [`export-diagram.md`](https://github.com/cathrynlavery/diagram-design/blob/main/export-diagram.md) | Export command documentation | [`commands/export-diagram.md`](https://github.com/cathrynlavery/diagram-design/blob/main/commands/export-diagram.md) | ## Summary - **Consultant 2×2 quadrants** in diagram-design are scenario matrices with named cells, not plotted points - **Required elements**: double-ended axis markers (`marker-start` + `marker-end`), single-word labels, corner tags in `NN · DIMENSION-A / DIMENSION-B` format, exactly one coral-tinted focal quadrant - **Source of truth**: [`references/type-quadrant.md`](https://github.com/cathrynlavery/diagram-design/blob/main/references/type-quadrant.md) lines 26–44 defines the layout; [`assets/example-quadrant-consultant.html`](https://github.com/cathrynlavery/diagram-design/blob/main/assets/example-quadrant-consultant.html) shows the implementation - **Quality gate**: Run the checklist in [`SKILL.md`](https://github.com/cathrynlavery/diagram-design/blob/main/SKILL.md) §9 before every export - **Export command**: `export-diagram --svg-only` produces standalone output ## Frequently Asked Questions ### What is the difference between a standard quadrant and the Consultant 2×2 in diagram-design? A **standard quadrant** displays individual items plotted by two continuous variables. The **Consultant 2×2** replaces points with four named scenario cells, uses double-ended axis markers to show spectrums rather than directions, and applies a distinctive coral tint to highlight one strategic priority. This makes it suitable for futures matrices and strategic frameworks rather than scatter plots. ### Can I customize the colors in a Consultant 2×2 quadrant diagram? Yes, but within the token system defined in [`references/style-guide.md`](https://github.com/cathrynlavery/diagram-design/blob/main/references/style-guide.md). The Consultant variant draws from the same palette as other diagrams—`paper`, `ink`, `accent` (coral), and `muted`. You can redefine these CSS custom properties in your HTML file, though the **accent color** for the focal quadrant and the **1.2px axis stroke width** are hard conventions that identify this as a Consultant 2×2. ### How do I ensure my Consultant 2×2 passes accessibility requirements? Include `role="img"` on the `