--- a/diagram.svg
+++ b/diagram.svg
@@ -1,87 +1,86 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500" width="800" height="500">
   <defs>
     <style>
-      .title { font-family: Arial, Helvetica, sans-serif; font-size: 28px; font-weight: bold; fill: #1a73e8; }
-      .subtitle { font-family: Arial, Helvetica, sans-serif; font-size: 14px; fill: #5f6368; }
-      .box-label { font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: 600; fill: #ffffff; }
-      .box-detail { font-family: Arial, Helvetica, sans-serif; font-size: 11px; fill: #e8eaed; }
-      .connector-label { font-family: Arial, Helvetica, sans-serif; font-size: 10px; fill: #5f6368; }
-      .code-text { font-family: "Courier New", Courier, monospace; font-size: 11px; fill: #202124; font-weight: 400; }
+      .title { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-size: 36px; font-weight: bold; fill: #0a0a0a; letter-spacing: -0.028em; }
+      .subtitle { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-size: 16px; fill: #5f5f5f; }
+      .box-label { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 600; fill: #ffffff; }
+      .box-detail { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-size: 14px; fill: #84d291; }
+      .connector-label { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-size: 14px; fill: #7f7e7e; }
+      .code-text { font-family: "Geist Mono", "Menlo", "Monaco", "Courier New", monospace; font-size: 14px; fill: #0a0a0a; font-weight: 500; }
+      .code-keyword { font-family: "Geist Mono", "Menlo", "Monaco", "Courier New", monospace; font-size: 14px; fill: #d81717; font-weight: 500; }
+      .code-string { font-family: "Geist Mono", "Menlo", "Monaco", "Courier New", monospace; font-size: 14px; fill: #158d29; font-weight: 500; }
+      .code-function { font-family: "Geist Mono", "Menlo", "Monaco", "Courier New", monospace; font-size: 14px; fill: #9829c7; font-weight: 500; }
     </style>
+    <marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
+      <path d="M 0 0 L 10 5 L 0 10 z" fill="#7f7e7e"/>
+    </marker>
   </defs>
 
   <!-- Background -->
-  <rect width="800" height="500" fill="#ffffff" rx="8"/>
+  <rect width="800" height="500" fill="#fafafa" rx="8"/>
 
-  <!-- Title -->
-  <text x="400" y="40" text-anchor="middle" class="title">Mastra Architecture Overview</text>
-  <text x="400" y="60" text-anchor="middle" class="subtitle">How the Powerful Agent Framework Works</text>
+  <!-- Title (sentence case) -->
+  <text x="400" y="40" text-anchor="middle" class="title">Mastra architecture overview</text>
+  <text x="400" y="62" text-anchor="middle" class="subtitle">TypeScript agent framework architecture</text>
 
-  <!-- Agent Box -->
-  <rect x="50" y="90" width="200" height="110" rx="8" fill="#1a73e8"/>
-  <text x="150" y="118" text-anchor="middle" class="box-label">AGENT LAYER</text>
-  <text x="150" y="140" text-anchor="middle" class="box-detail">LLM Reasoning</text>
-  <text x="150" y="158" text-anchor="middle" class="box-detail">Tool Selection</text>
-  <text x="150" y="176" text-anchor="middle" class="box-detail">Goal Decomposition</text>
-  <text x="150" y="194" text-anchor="middle" class="box-detail">Iteration Loop</text>
+  <!-- Agent box — Primary Green Darkest #085314 -->
+  <rect x="50" y="90" width="200" height="110" rx="8" fill="#085314"/>
+  <text x="150" y="118" text-anchor="middle" class="box-label">Agent layer</text>
+  <text x="150" y="140" text-anchor="middle" class="box-detail">LLM reasoning</text>
+  <text x="150" y="158" text-anchor="middle" class="box-detail">Tool selection</text>
+  <text x="150" y="176" text-anchor="middle" class="box-detail">Goal decomposition</text>
+  <text x="150" y="194" text-anchor="middle" class="box-detail">Iteration loop</text>
 
-  <!-- Memory Box -->
-  <rect x="300" y="90" width="200" height="110" rx="8" fill="#ea4335"/>
-  <text x="400" y="118" text-anchor="middle" class="box-label">MEMORY SYSTEM</text>
-  <text x="400" y="140" text-anchor="middle" class="box-detail">Thread History</text>
-  <text x="400" y="158" text-anchor="middle" class="box-detail">Semantic Recall</text>
-  <text x="400" y="176" text-anchor="middle" class="box-detail">Vector Search</text>
-  <text x="400" y="194" text-anchor="middle" class="box-detail">Context Window Mgmt</text>
+  <!-- Memory box — Primary Green Dark #0b6e1b -->
+  <rect x="300" y="90" width="200" height="110" rx="8" fill="#0b6e1b"/>
+  <text x="400" y="118" text-anchor="middle" class="box-label">Memory system</text>
+  <text x="400" y="140" text-anchor="middle" class="box-detail">Thread history</text>
+  <text x="400" y="158" text-anchor="middle" class="box-detail">Semantic recall</text>
+  <text x="400" y="176" text-anchor="middle" class="box-detail">Vector search</text>
+  <text x="400" y="194" text-anchor="middle" class="box-detail">Context window mgmt</text>
 
-  <!-- Workflow Box -->
-  <rect x="550" y="90" width="200" height="110" rx="8" fill="#fbbc04"/>
-  <text x="650" y="118" text-anchor="middle" class="box-label" fill="#202124">WORKFLOW ENGINE</text>
-  <text x="650" y="140" text-anchor="middle" class="box-detail" fill="#3c4043">Step Sequencing</text>
-  <text x="650" y="158" text-anchor="middle" class="box-detail" fill="#3c4043">Parallel Execution</text>
-  <text x="650" y="176" text-anchor="middle" class="box-detail" fill="#3c4043">Error Recovery</text>
-  <text x="650" y="194" text-anchor="middle" class="box-detail" fill="#3c4043">Branching Logic</text>
+  <!-- Workflow box — Primary Green #0d8020 -->
+  <rect x="550" y="90" width="200" height="110" rx="8" fill="#0d8020"/>
+  <text x="650" y="118" text-anchor="middle" class="box-label">Workflow engine</text>
+  <text x="650" y="140" text-anchor="middle" class="box-detail">Step sequencing</text>
+  <text x="650" y="158" text-anchor="middle" class="box-detail">Parallel execution</text>
+  <text x="650" y="176" text-anchor="middle" class="box-detail">Error recovery</text>
+  <text x="650" y="194" text-anchor="middle" class="box-detail">Branching logic</text>
 
-  <!-- Connectors: Agent -> Memory -->
-  <line x1="250" y1="145" x2="300" y2="145" stroke="#5f6368" stroke-width="2" marker-end="url(#arrow)"/>
+  <!-- Connector: Agent -> Memory -->
+  <line x1="250" y1="145" x2="300" y2="145" stroke="#7f7e7e" stroke-width="2" marker-end="url(#arrow)"/>
   <text x="275" y="138" text-anchor="middle" class="connector-label">context</text>
 
-  <!-- Connectors: Memory -> Workflow -->
-  <line x1="500" y1="145" x2="550" y2="145" stroke="#5f6368" stroke-width="2" marker-end="url(#arrow)"/>
+  <!-- Connector: Memory -> Workflow -->
+  <line x1="500" y1="145" x2="550" y2="145" stroke="#7f7e7e" stroke-width="2" marker-end="url(#arrow)"/>
   <text x="525" y="138" text-anchor="middle" class="connector-label">state</text>
 
-  <!-- Tools Box -->
-  <rect x="175" y="250" width="200" height="100" rx="8" fill="#34a853"/>
-  <text x="275" y="278" text-anchor="middle" class="box-label">TOOLS LAYER</text>
-  <text x="275" y="298" text-anchor="middle" class="box-detail">API Connectors</text>
-  <text x="275" y="316" text-anchor="middle" class="box-detail">Database Access</text>
-  <text x="275" y="334" text-anchor="middle" class="box-detail">Custom Functions</text>
+  <!-- Tools box — Primary Green Lighter #198128 -->
+  <rect x="175" y="250" width="200" height="100" rx="8" fill="#198128"/>
+  <text x="275" y="278" text-anchor="middle" class="box-label">Tools layer</text>
+  <text x="275" y="298" text-anchor="middle" class="box-detail">API connectors</text>
+  <text x="275" y="316" text-anchor="middle" class="box-detail">Database access</text>
+  <text x="275" y="334" text-anchor="middle" class="box-detail">Custom functions</text>
 
-  <!-- Deploy Box -->
-  <rect x="425" y="250" width="200" height="100" rx="8" fill="#9334e6"/>
-  <text x="525" y="278" text-anchor="middle" class="box-label">DEPLOYMENT</text>
-  <text x="525" y="298" text-anchor="middle" class="box-detail">Vercel Adapter</text>
-  <text x="525" y="316" text-anchor="middle" class="box-detail">Netlify Adapter</text>
+  <!-- Deployment box — Primary Green Lightest #1f9d2f -->
+  <rect x="425" y="250" width="200" height="100" rx="8" fill="#1f9d2f"/>
+  <text x="525" y="278" text-anchor="middle" class="box-label">Deployment</text>
+  <text x="525" y="298" text-anchor="middle" class="box-detail">Vercel adapter</text>
+  <text x="525" y="316" text-anchor="middle" class="box-detail">Netlify adapter</text>
   <text x="525" y="334" text-anchor="middle" class="box-detail">Cloudflare Workers</text>
 
-  <!-- Connectors: Agent -> Tools -->
-  <line x1="150" y1="200" x2="220" y2="250" stroke="#5f6368" stroke-width="2" marker-end="url(#arrow)"/>
+  <!-- Connector: Agent -> Tools -->
+  <line x1="150" y1="200" x2="220" y2="250" stroke="#7f7e7e" stroke-width="2" marker-end="url(#arrow)"/>
   <text x="170" y="230" class="connector-label">execute</text>
 
-  <!-- Connectors: Workflow -> Deploy -->
-  <line x1="650" y1="200" x2="580" y2="250" stroke="#5f6368" stroke-width="2" marker-end="url(#arrow)"/>
+  <!-- Connector: Workflow -> Deploy -->
+  <line x1="650" y1="200" x2="580" y2="250" stroke="#7f7e7e" stroke-width="2" marker-end="url(#arrow)"/>
   <text x="630" y="230" class="connector-label">deploy</text>
 
-  <!-- Code Example Block -->
-  <rect x="100" y="390" width="600" height="90" rx="6" fill="#f1f3f4" stroke="#dadce0" stroke-width="1"/>
-  <text x="120" y="415" class="code-text">import { Mastra } from "@mastra/core";</text>
-  <text x="120" y="432" class="code-text">const agent = mastra.getAgent("launch-agent");</text>
-  <text x="120" y="449" class="code-text">const result = await agent.generate("Summarize Q1 metrics");</text>
-  <text x="120" y="466" class="code-text">console.log(result.text);</text>
-
-  <!-- Arrow marker -->
-  <defs>
-    <marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
-      <path d="M 0 0 L 10 5 L 0 10 z" fill="#5f6368"/>
-    </marker>
-  </defs>
+  <!-- Code example block — Surface 3 bg, Border Code stroke -->
+  <rect x="100" y="390" width="600" height="90" rx="6" fill="#ededed" stroke="#b8b8b8" stroke-width="1"/>
+  <text x="120" y="415"><tspan class="code-keyword">import</tspan><tspan class="code-text"> { Mastra } </tspan><tspan class="code-keyword">from</tspan><tspan class="code-string"> "@mastra/core"</tspan><tspan class="code-text">;</tspan></text>
+  <text x="120" y="432"><tspan class="code-keyword">const</tspan><tspan class="code-text"> agent = mastra.</tspan><tspan class="code-function">getAgent</tspan><tspan class="code-text">(</tspan><tspan class="code-string">"launch-agent"</tspan><tspan class="code-text">);</tspan></text>
+  <text x="120" y="449"><tspan class="code-keyword">const</tspan><tspan class="code-text"> result = </tspan><tspan class="code-keyword">await</tspan><tspan class="code-text"> agent.</tspan><tspan class="code-function">generate</tspan><tspan class="code-text">(</tspan><tspan class="code-string">"Summarize Q1 metrics"</tspan><tspan class="code-text">);</tspan></text>
+  <text x="120" y="466"><tspan class="code-text">console.</tspan><tspan class="code-function">log</tspan><tspan class="code-text">(result.text);</tspan></text>
 </svg>
