jb/diagram-design
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Simplify consultant-special 2×2 axis labels (Jobs-minimal)

Browse Source 
Applied the same clean treatment as the X-shareable meme: drop the
arrow glyphs and high/low parentheticals, use single words at each
arrow tip (REMOTE / IN-PERSON on the vertical axis, HUMAN / AI on
the horizontal). Also fixes a pre-existing bug where the axis labels
didn't match the corner tags — cells now align cleanly:
01·REMOTE/HUMAN (Distributed humans), 02·REMOTE/AI (Agent teams, focal),
03·IN-PERSON/HUMAN (Office classic), 04·IN-PERSON/AI (In-person + AI).

Screenshot regenerated at 2× DPI.
This commit is contained in:
Cathryn Lavery
2026-04-22 11:29:16 -05:00
parent ba3062c5ba
commit e13c9938c5
2 changed files with 14 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/example-quadrant-consultant.html
+14 -19
View File
@@ -77,7 +77,7 @@
<!-- Scenario cells — store treatment with hairline rule, slightly varied -->
<!-- TL: Distributed humans -->
<rect x="140" y="120" width="300" height="160" rx="6" fill="rgba(45,49,66,0.04)" stroke="rgba(79,93,117,0.28)" stroke-width="1"/>
<text x="156" y="144" fill="#4f5d75" font-size="8" font-weight="500" font-family="'Geist Mono', monospace" letter-spacing="0.18em">01 · HIGH REMOTE / LOW AI</text>
<text x="156" y="144" fill="#4f5d75" font-size="8" font-weight="500" font-family="'Geist Mono', monospace" letter-spacing="0.18em">01 · REMOTE / HUMAN</text>
<text x="156" y="180" fill="#2d3142" font-size="16" font-weight="600" font-family="'Geist', sans-serif">Distributed humans</text>
<text x="156" y="216" fill="#4f5d75" font-size="11" font-family="'Geist', sans-serif">Async-first, global hiring,</text>
<text x="156" y="232" fill="#4f5d75" font-size="11" font-family="'Geist', sans-serif">Slack-heavy. Human-centric</text>
@@ -85,7 +85,7 @@
<!-- TR: Agent teams (FOCAL) -->
<rect x="560" y="120" width="300" height="160" rx="6" fill="rgba(235,108,54,0.06)" stroke="#eb6c36" stroke-width="1.2"/>
<text x="576" y="144" fill="#eb6c36" font-size="8" font-weight="600" font-family="'Geist Mono', monospace" letter-spacing="0.18em">02 · HIGH REMOTE / HIGH AI</text>
<text x="576" y="144" fill="#eb6c36" font-size="8" font-weight="600" font-family="'Geist Mono', monospace" letter-spacing="0.18em">02 · REMOTE / AI</text>
<text x="576" y="180" fill="#2d3142" font-size="16" font-weight="600" font-family="'Geist', sans-serif">Agent teams <tspan fill="#eb6c36" font-size="13">●</tspan></text>
<text x="576" y="216" fill="#4f5d75" font-size="11" font-family="'Geist', sans-serif">Humans orchestrate; AI</text>
<text x="576" y="232" fill="#4f5d75" font-size="11" font-family="'Geist', sans-serif">handles the routine layer.</text>
@@ -93,7 +93,7 @@
<!-- BL: Office classic -->
<rect x="140" y="320" width="300" height="160" rx="6" fill="rgba(45,49,66,0.04)" stroke="rgba(79,93,117,0.28)" stroke-width="1"/>
<text x="156" y="344" fill="#4f5d75" font-size="8" font-weight="500" font-family="'Geist Mono', monospace" letter-spacing="0.18em">03 · LOW REMOTE / LOW AI</text>
<text x="156" y="344" fill="#4f5d75" font-size="8" font-weight="500" font-family="'Geist Mono', monospace" letter-spacing="0.18em">03 · IN-PERSON / HUMAN</text>
<text x="156" y="380" fill="#2d3142" font-size="16" font-weight="600" font-family="'Geist', sans-serif">Office classic</text>
<text x="156" y="416" fill="#4f5d75" font-size="11" font-family="'Geist', sans-serif">Return-to-office mandates,</text>
<text x="156" y="432" fill="#4f5d75" font-size="11" font-family="'Geist', sans-serif">manual work. Techlash</text>
@@ -101,33 +101,28 @@
<!-- BR: In-person + AI -->
<rect x="560" y="320" width="300" height="160" rx="6" fill="rgba(45,49,66,0.04)" stroke="rgba(79,93,117,0.28)" stroke-width="1"/>
<text x="576" y="344" fill="#4f5d75" font-size="8" font-weight="500" font-family="'Geist Mono', monospace" letter-spacing="0.18em">04 · LOW REMOTE / HIGH AI</text>
<text x="576" y="344" fill="#4f5d75" font-size="8" font-weight="500" font-family="'Geist Mono', monospace" letter-spacing="0.18em">04 · IN-PERSON / AI</text>
<text x="576" y="380" fill="#2d3142" font-size="16" font-weight="600" font-family="'Geist', sans-serif">In-person + AI</text>
<text x="576" y="416" fill="#4f5d75" font-size="11" font-family="'Geist', sans-serif">Smart offices, AI-augmented</text>
<text x="576" y="432" fill="#4f5d75" font-size="11" font-family="'Geist', sans-serif">staff. Physical presence is</text>
<text x="576" y="448" fill="#4f5d75" font-size="11" font-family="'Geist', sans-serif">the moat, AI is the lever.</text>
<!-- Axis cross — ink, heavier than standard quadrant, double-ended -->
<line x1="80" y1="300" x2="920" y2="300"
<!-- Axis cross — double-ended; horizontal shortened so the labels flank the tips cleanly -->
<line x1="200" y1="300" x2="800" y2="300"
stroke="#2d3142" stroke-width="1.2"
marker-start="url(#axis-start)" marker-end="url(#axis-end)"/>
<line x1="500" y1="60" x2="500" y2="540"
stroke="#2d3142" stroke-width="1.2"
marker-start="url(#axis-start)" marker-end="url(#axis-end)"/>
<!-- Axis labels — driver name + range (eyebrow + sublabel) -->
<!-- Top (vertical axis, maximum) -->
<text x="508" y="40" fill="#2d3142" font-size="9" font-weight="600" font-family="'Geist Mono', monospace" letter-spacing="0.18em">↑ AI AUTOMATION</text>
<text x="508" y="56" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace">high</text>
<!-- Bottom (vertical axis, minimum) -->
<text x="508" y="560" fill="#2d3142" font-size="9" font-weight="600" font-family="'Geist Mono', monospace" letter-spacing="0.18em">↓ AI AUTOMATION</text>
<text x="508" y="576" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace">low</text>
<!-- Left (horizontal axis, minimum) -->
<text x="60" y="292" fill="#2d3142" font-size="9" font-weight="600" font-family="'Geist Mono', monospace" letter-spacing="0.18em">← REMOTE WORK</text>
<text x="60" y="308" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace">low</text>
<!-- Right (horizontal axis, maximum) -->
<text x="940" y="292" fill="#2d3142" font-size="9" font-weight="600" font-family="'Geist Mono', monospace" text-anchor="end" letter-spacing="0.18em">REMOTE WORK →</text>
<text x="940" y="308" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace" text-anchor="end">high</text>
<!-- Axis labels — one word at each arrow tip. No glyphs, no parentheticals. -->
<text x="500" y="48" fill="#2d3142" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.18em">REMOTE</text>
<text x="500" y="560" fill="#2d3142" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.18em">IN-PERSON</text>
<text x="188" y="300" fill="#2d3142" font-size="9" font-family="'Geist Mono', monospace" text-anchor="end" dominant-baseline="middle" letter-spacing="0.18em">HUMAN</text>
<text x="812" y="300" fill="#2d3142" font-size="9" font-family="'Geist Mono', monospace" text-anchor="start" dominant-baseline="middle" letter-spacing="0.18em">AI</text>
<!-- Legend — horizontal strip, placed BELOW the bottom axis labels (y=560/576) -->
<line x1="40" y1="604" x2="960" y2="604" stroke="rgba(45,49,66,0.10)" stroke-width="0.8"/>
docs/screenshots/quadrant-consultant.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 198 KiB

After

Width:  |  Height:  |  Size: 188 KiB