mike/oc-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

OC: add drama -> empowerment triangle diagram

Browse Source 
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Michael Victory
2026-06-16 07:49:16 -07:00
parent 2bf8ff5b2c
commit 59e04ad6f8
2 changed files with 48 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+45
View File
@@ -88,6 +88,51 @@
</div>
</section>
<section class="band dark diagram" data-bg="dark">
<div class="wrap">
<h2>From the blame game to ownership</h2>
<p class="section-intro">Our flagship work in one picture: moving a team out of the drama triangle — below the line — and into the one above it.</p>
<svg class="triangles" viewBox="0 0 770 380" role="img" aria-labelledby="tri-title tri-desc">
<title id="tri-title">The drama triangle versus the empowerment triangle</title>
<desc id="tri-desc">On the left, the drama triangle below the line: Victim, Villain, and Rescuer. An arrow points right to the empowerment triangle above the line: Creator, Challenger, and Coach.</desc>
<g fill="none" stroke="#c08a72" stroke-width="2">
<polygon points="175,95 70,295 280,295" fill="rgba(192,138,114,0.06)"/>
</g>
<g fill="#c08a72"><circle cx="175" cy="95" r="5"/><circle cx="70" cy="295" r="5"/><circle cx="280" cy="295" r="5"/></g>
<g text-anchor="middle" font-family="'DM Sans',sans-serif">
<text x="175" y="70" fill="#fff" font-size="16" font-weight="700">Rescuer</text>
<text x="175" y="86" fill="rgba(244,241,234,0.66)" font-size="12.5">swoops in, burns out</text>
<text x="70" y="320" fill="#fff" font-size="16" font-weight="700">Victim</text>
<text x="70" y="336" fill="rgba(244,241,234,0.66)" font-size="12.5">&#8220;nothing I can do&#8221;</text>
<text x="280" y="320" fill="#fff" font-size="16" font-weight="700">Villain</text>
<text x="280" y="336" fill="rgba(244,241,234,0.66)" font-size="12.5">the one who gets blamed</text>
<text x="175" y="362" fill="#c08a72" font-size="12.5" font-weight="700" letter-spacing="1.5">BELOW THE LINE</text>
</g>
<g stroke="#e89b1c" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path d="M330,200 L432,200"/>
<path d="M420,191 L434,200 L420,209"/>
</g>
<text x="381" y="186" text-anchor="middle" fill="rgba(244,241,234,0.7)" font-size="12.5" font-family="'DM Sans',sans-serif">we move teams</text>
<g fill="none" stroke="#e89b1c" stroke-width="2">
<polygon points="595,95 490,295 700,295" fill="rgba(232,155,28,0.08)"/>
</g>
<g fill="#e89b1c"><circle cx="595" cy="95" r="5"/><circle cx="490" cy="295" r="5"/><circle cx="700" cy="295" r="5"/></g>
<g text-anchor="middle" font-family="'DM Sans',sans-serif">
<text x="595" y="70" fill="#fff" font-size="16" font-weight="700">Coach</text>
<text x="595" y="86" fill="rgba(244,241,234,0.66)" font-size="12.5">builds people up</text>
<text x="490" y="320" fill="#fff" font-size="16" font-weight="700">Creator</text>
<text x="490" y="336" fill="rgba(244,241,234,0.66)" font-size="12.5">owns the outcome</text>
<text x="700" y="320" fill="#fff" font-size="16" font-weight="700">Challenger</text>
<text x="700" y="336" fill="rgba(244,241,234,0.66)" font-size="12.5">calls it straight</text>
<text x="595" y="362" fill="#e89b1c" font-size="12.5" font-weight="700" letter-spacing="1.5">ABOVE THE LINE</text>
</g>
</svg>
</div>
</section>
<section class="band dark who" data-bg="dark" id="who">
<div class="wrap narrow">
<h2>Who we are</h2>