diff --git a/app/materialize/getting-started/overview/page.mdx b/app/materialize/getting-started/overview/page.mdx
index 993dcaa7..b2e11c73 100644
--- a/app/materialize/getting-started/overview/page.mdx
+++ b/app/materialize/getting-started/overview/page.mdx
@@ -4,7 +4,8 @@ description: "AuthZed Materialize precomputes the permissions you configure it t
 ---
 
 import { Callout } from "nextra/components";
-import MaterializeArchitecture from "@/public/images/materialize-architecture.svg";
+import MaterializeArchitectureLight from "@/public/images/materialize-architecture-light.svg";
+import MaterializeArchitectureDark from "@/public/images/materialize-architecture-dark.svg";
 
 # What is Materialize?
 
@@ -14,10 +15,15 @@ are written (specifically, when those relationships affect a subject's membershi
 
 Materialize puts that precomputed data to work in two ways: **Accelerated Queries**, generally available to AuthZed [Dedicated] users, and **Event Streams**, currently in early access. Every other piece of Materialize content belongs to one of these two features. Look for badges at the top of the page, which link back to the feature it belongs to.
 
-<MaterializeArchitecture
+<MaterializeArchitectureLight
   role="img"
   aria-label="The services that make up AuthZed Materialize, and how they connect to your application"
-  className="w-full h-auto"
+  className="w-full h-auto dark:hidden"
+/>
+<MaterializeArchitectureDark
+  role="img"
+  aria-label="The services that make up AuthZed Materialize, and how they connect to your application"
+  className="w-full h-auto hidden dark:block"
 />
 
 ## Accelerated Queries
diff --git a/public/images/materialize-architecture-dark.svg b/public/images/materialize-architecture-dark.svg
new file mode 100644
index 00000000..2a4d8c34
--- /dev/null
+++ b/public/images/materialize-architecture-dark.svg
@@ -0,0 +1,162 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1260 640" font-family="Inter, system-ui, sans-serif">
+  <!-- Redrawn against AuthZed's Sandworm design system (github.com/authzed/design/tree/main/sandworm):
+       - containers = dashed "7 3" scope boundaries; nodes = solid 1px cards (design/diagrams.md)
+       - connectors = orthogonal, 1.5px, rounded 10px corners, stone-400 neutral / teal-400 "active path" (dispatch)
+       - container labels = mono-caps, riding the dashed edge
+       - violet for Event Streams is a deliberate extension beyond the strict diagram canon (which only
+         defines stone/teal/red), kept consistent with the violet already used for this feature in
+         components/feature-badge.css and feature-notes.css elsewhere in this codebase.
+       - Layout: all three containers share the same top/bottom edges (y=120/500), with each container's
+         components arranged in the same two rows (row 1 y-center 190, row 2 y-center 430). This isn't a
+         literal "process vs. storage" split (Hydrator and Event Processor are processes too) — it's purely
+         so that every connector that stays within one row is a short straight line, and only the two
+         cross-cutting flows (Event Streams; watches datastore directly) need routed detours.
+       - Light/dark: this file is one of a light/dark pair (see materialize-architecture-dark.svg),
+         swapped via Tailwind dark: classes in the mdx that embeds it — same convention as
+         ps-light.svg / ps-dark.svg. Teal and violet match the site's teal500 / violet500 tokens
+         (see feature-badge.css) at each theme's fixed value, so this diagram can't drift from the
+         Accelerated Queries / Event Streams colors used everywhere else. -->
+  <defs>
+    <marker id="arrow-neutral" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+      <path d="M0,0 L10,5 L0,10 z" fill="#9c95a3" />
+    </marker>
+    <marker id="arrow-teal" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+      <path d="M0,0 L10,5 L0,10 z" fill="hsl(177 28.2% 45.9%)" />
+    </marker>
+    <marker id="arrow-violet" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+      <path d="M0,0 L10,5 L0,10 z" fill="hsl(253 73.4% 63.1%)" />
+    </marker>
+  </defs>
+
+  <rect width="1260" height="640" fill="#1c1a20" />
+
+  <!-- Containers (scope boundaries: dashed 7 3, 1px, stone-200) — all share y=120, height=380 -->
+  <rect x="30" y="120" width="430" height="380" rx="14" fill="none" stroke="#3d3944" stroke-width="1" stroke-dasharray="7 3" />
+  <rect x="46" y="112" width="190" height="16" fill="#1c1a20" />
+  <text x="52" y="124" font-family="ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace" font-size="12" font-weight="500" letter-spacing="0.08em" fill="#9b93a3">AUTHZED MATERIALIZE</text>
+
+  <rect x="500" y="120" width="210" height="380" rx="14" fill="none" stroke="#3d3944" stroke-width="1" stroke-dasharray="7 3" />
+  <rect x="516" y="112" width="62" height="16" fill="#1c1a20" />
+  <text x="522" y="124" font-family="ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace" font-size="12" font-weight="500" letter-spacing="0.08em" fill="#9b93a3">SPICEDB</text>
+
+  <rect x="750" y="120" width="450" height="380" rx="14" fill="none" stroke="#3d3944" stroke-width="1" stroke-dasharray="7 3" />
+  <rect x="766" y="112" width="108" height="16" fill="#1c1a20" />
+  <text x="772" y="124" font-family="ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace" font-size="12" font-weight="500" letter-spacing="0.08em" fill="#9b93a3">YOUR SYSTEMS</text>
+
+  <!-- Row 1 (y-center 190): Hydrator, Cache Server | SpiceDB | Your Application, Event Processor -->
+  <g>
+    <rect x="50" y="145" width="170" height="90" rx="10" fill="#26232b" stroke="#3d3944" stroke-width="1" />
+    <text x="135" y="172" text-anchor="middle" font-size="17" font-weight="700" fill="#f1eef5">Offline</text>
+    <text x="135" y="192" text-anchor="middle" font-size="17" font-weight="700" fill="#f1eef5">Hydrator</text>
+    <text x="135" y="210" text-anchor="middle" font-size="11.5" fill="#9b93a3">computes permission sets</text>
+    <text x="135" y="225" text-anchor="middle" font-size="11.5" fill="#9b93a3">for watched permissions</text>
+  </g>
+
+  <g>
+    <rect x="250" y="140" width="190" height="100" rx="10" fill="#26232b" stroke="#3d3944" stroke-width="1" />
+    <text x="345" y="167" text-anchor="middle" font-size="17" font-weight="700" fill="#f1eef5">Online</text>
+    <text x="345" y="187" text-anchor="middle" font-size="17" font-weight="700" fill="#f1eef5">Hydrator</text>
+    <text x="345" y="205" text-anchor="middle" font-size="11.5" fill="#9b93a3">serves hydrated</text>
+    <text x="345" y="220" text-anchor="middle" font-size="11.5" fill="#9b93a3">permission sets</text>
+  </g>
+
+  <g>
+    <rect x="520" y="140" width="170" height="100" rx="10" fill="#26232b" stroke="#3d3944" stroke-width="1" />
+    <text x="605" y="195" text-anchor="middle" font-size="17" font-weight="700" fill="#f1eef5">SpiceDB</text>
+    <text x="605" y="217" text-anchor="middle" font-size="11.5" fill="#9b93a3">the service</text>
+  </g>
+
+  <g>
+    <rect x="770" y="145" width="190" height="90" rx="10" fill="#26232b" stroke="#3d3944" stroke-width="1" />
+    <text x="865" y="185" text-anchor="middle" font-size="17" font-weight="700" fill="#f1eef5">Your Application</text>
+    <text x="865" y="207" text-anchor="middle" font-size="11.5" fill="#9b93a3">calls SpiceDB exactly as</text>
+    <text x="865" y="222" text-anchor="middle" font-size="11.5" fill="#9b93a3">it always has</text>
+  </g>
+
+  <g>
+    <rect x="985" y="145" width="190" height="90" rx="10" fill="#26232b" stroke="#3d3944" stroke-width="1" />
+    <text x="1080" y="180" text-anchor="middle" font-size="17" font-weight="700" fill="#f1eef5">Event Processor</text>
+    <text x="1080" y="202" text-anchor="middle" font-size="11.5" fill="#9b93a3">backfills + watches</text>
+    <text x="1080" y="217" text-anchor="middle" font-size="11.5" fill="#9b93a3">permission sets</text>
+  </g>
+
+  <!-- Row 2 (y-center 430): Snapshotter, Event Log | Datastore | Your Database -->
+  <g>
+    <rect x="50" y="385" width="170" height="90" rx="10" fill="#26232b" stroke="#3d3944" stroke-width="1" />
+    <text x="135" y="425" text-anchor="middle" font-size="17" font-weight="700" fill="#f1eef5">Snapshotter</text>
+    <text x="135" y="447" text-anchor="middle" font-size="11.5" fill="#9b93a3">periodic snapshots of</text>
+    <text x="135" y="462" text-anchor="middle" font-size="11.5" fill="#9b93a3">schema + relationships</text>
+  </g>
+
+  <g>
+    <rect x="250" y="385" width="190" height="90" rx="10" fill="#26232b" stroke="#3d3944" stroke-width="1" />
+    <text x="345" y="425" text-anchor="middle" font-size="17" font-weight="700" fill="#f1eef5">Event Log</text>
+    <text x="345" y="447" text-anchor="middle" font-size="11.5" fill="#9b93a3">persists permission</text>
+    <text x="345" y="462" text-anchor="middle" font-size="11.5" fill="#9b93a3">set changes</text>
+  </g>
+
+  <g>
+    <rect x="520" y="380" width="170" height="100" rx="10" fill="#26232b" stroke="#3d3944" stroke-width="1" />
+    <text x="605" y="425" text-anchor="middle" font-size="17" font-weight="700" fill="#f1eef5">Datastore</text>
+    <text x="605" y="447" text-anchor="middle" font-size="11.5" fill="#9b93a3">underlying storage</text>
+  </g>
+
+  <g>
+    <rect x="980" y="380" width="200" height="100" rx="10" fill="#26232b" stroke="#3d3944" stroke-width="1" />
+    <text x="1080" y="415" text-anchor="middle" font-size="17" font-weight="700" fill="#f1eef5">Your Database</text>
+    <text x="1080" y="437" text-anchor="middle" font-size="11.5" fill="#9b93a3">or search index</text>
+    <text x="1080" y="452" text-anchor="middle" font-size="11.5" fill="#9b93a3">(colocated permissions)</text>
+  </g>
+
+  <!-- Arrows (connectors: orthogonal, 1.5px, rounded 10px corners, stone-400 neutral) -->
+
+  <!-- 1: Snapshotter -> Hydrator (same column, straight up) -->
+  <path d="M135,385 V237" fill="none" stroke="#9c95a3" stroke-width="1.5" marker-end="url(#arrow-neutral)" />
+  <text x="150" y="355" font-size="12" fill="#c9c2d1">snapshot</text>
+
+  <!-- 2: Hydrator -> Cache Server (same row, straight across) -->
+  <path d="M218,190 H252" fill="none" stroke="#9c95a3" stroke-width="1.5" marker-end="url(#arrow-neutral)" />
+  <text x="235" y="169" text-anchor="middle" font-size="11.5" fill="#c9c2d1">hydrated</text>
+  <text x="235" y="182" text-anchor="middle" font-size="11.5" fill="#c9c2d1">permission sets</text>
+
+  <!-- 3: Cache Server <-> Event Log (same column, straight down; reads back events to stream out via Event Streams) -->
+  <path d="M345,242 V383" fill="none" stroke="#9c95a3" stroke-width="1.5" marker-end="url(#arrow-neutral)" marker-start="url(#arrow-neutral)" />
+  <text x="335" y="298" text-anchor="end" font-size="12" fill="#c9c2d1">reads / writes</text>
+  <text x="335" y="313" text-anchor="end" font-size="12" fill="#c9c2d1">permission set changes</text>
+
+  <!-- 4: SpiceDB <-> Datastore (same column, straight down) -->
+  <path d="M605,242 V378" fill="none" stroke="#9c95a3" stroke-width="1.5" marker-end="url(#arrow-neutral)" marker-start="url(#arrow-neutral)" />
+  <text x="605" y="314" text-anchor="middle" font-size="11.5" fill="#c9c2d1">reads / writes</text>
+
+  <!-- 5: SpiceDB <-> Cache Server (Accelerated Queries dispatch) — same row, straight across, teal = active path -->
+  <path d="M442,190 H518" fill="none" stroke="hsl(177 28.2% 45.9%)" stroke-width="1.5" marker-end="url(#arrow-teal)" marker-start="url(#arrow-teal)" />
+  <text x="480" y="170" text-anchor="middle" font-size="11.5" fill="hsl(177 28.2% 45.9%)" font-weight="600">Accelerated</text>
+  <text x="480" y="183" text-anchor="middle" font-size="11.5" fill="hsl(177 28.2% 45.9%)" font-weight="600">Queries</text>
+
+  <!-- 6: SpiceDB <-> Your Application (normal SpiceDB API calls, unchanged by Materialize) — same row, straight across -->
+  <path d="M692,190 H768" fill="none" stroke="#9c95a3" stroke-width="1.5" marker-end="url(#arrow-neutral)" marker-start="url(#arrow-neutral)" />
+  <text x="730" y="178" text-anchor="middle" font-size="11.5" fill="#c9c2d1">checks + lookups</text>
+
+  <!-- 7: Datastore -> Snapshotter, short detour under Event Log within the row-2 band -->
+  <path d="M518,430 H470 A10,10 0 0,0 460,440 V485 A10,10 0 0,1 450,495 H145 A10,10 0 0,1 135,485 V477"
+        fill="none" stroke="#9c95a3" stroke-width="1.5" marker-end="url(#arrow-neutral)" />
+  <text x="300" y="512" text-anchor="middle" font-size="12" fill="#c9c2d1">schema + relationships</text>
+
+  <!-- 8: Datastore -> Cache Server (direct real-time watch), dotted, crossing row 1/row 2 — the one connector
+       that can't be a short straight line, since it's the sole link between the two rows across two containers -->
+  <path d="M570,378 V360 A10,10 0 0,0 560,350 H410 A10,10 0 0,1 400,340 V242"
+        fill="none" stroke="#9c95a3" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="1 6" marker-end="url(#arrow-neutral)" />
+  <text x="485" y="330" text-anchor="middle" font-size="11.5" fill="#c9c2d1">watches datastore</text>
+  <text x="485" y="343" text-anchor="middle" font-size="11.5" fill="#c9c2d1">directly (real-time)</text>
+
+  <!-- 9: Cache Server <-> Event Processor (Event Streams) — violet, routed through the corridor above row 1.
+       Cache Server reads the events it wrote to the Event Log (see connector 3) and streams them to the
+       customer's Event Processor; bidirectional to also carry backfill requests. -->
+  <path d="M390,138 V110 A10,10 0 0,1 400,100 H1000 A10,10 0 0,1 1010,110 V143"
+        fill="none" stroke="hsl(253 73.4% 63.1%)" stroke-width="1.5" marker-end="url(#arrow-violet)" marker-start="url(#arrow-violet)" />
+  <text x="700" y="92" text-anchor="middle" font-size="12.5" fill="hsl(253 73.4% 63.1%)" font-weight="600">Event Streams</text>
+
+  <!-- 10: Event Processor -> Your Database (same column, straight down) -->
+  <path d="M1080,237 V378" fill="none" stroke="#9c95a3" stroke-width="1.5" marker-end="url(#arrow-neutral)" />
+  <text x="1105" y="312" font-size="12" fill="#c9c2d1">stores permission sets</text>
+</svg>
diff --git a/public/images/materialize-architecture.svg b/public/images/materialize-architecture-light.svg
similarity index 85%
rename from public/images/materialize-architecture.svg
rename to public/images/materialize-architecture-light.svg
index 17ccfe5c..bbed9f53 100644
--- a/public/images/materialize-architecture.svg
+++ b/public/images/materialize-architecture-light.svg
@@ -10,16 +10,21 @@
          components arranged in the same two rows (row 1 y-center 190, row 2 y-center 430). This isn't a
          literal "process vs. storage" split (Hydrator and Event Processor are processes too) — it's purely
          so that every connector that stays within one row is a short straight line, and only the two
-         cross-cutting flows (Event Streams; watches datastore directly) need routed detours. -->
+         cross-cutting flows (Event Streams; watches datastore directly) need routed detours.
+       - Light/dark: this file is one of a light/dark pair (see materialize-architecture-dark.svg),
+         swapped via Tailwind dark: classes in the mdx that embeds it — same convention as
+         ps-light.svg / ps-dark.svg. Teal and violet match the site's teal500 / violet500 tokens
+         (see feature-badge.css) at each theme's fixed value, so this diagram can't drift from the
+         Accelerated Queries / Event Streams colors used everywhere else. -->
   <defs>
     <marker id="arrow-neutral" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
       <path d="M0,0 L10,5 L0,10 z" fill="#8e8891" />
     </marker>
     <marker id="arrow-teal" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
-      <path d="M0,0 L10,5 L0,10 z" fill="#72b1ad" />
+      <path d="M0,0 L10,5 L0,10 z" fill="hsl(178 35% 33%)" />
     </marker>
     <marker id="arrow-violet" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
-      <path d="M0,0 L10,5 L0,10 z" fill="#7a5ce6" />
+      <path d="M0,0 L10,5 L0,10 z" fill="hsl(253 62% 50%)" />
     </marker>
   </defs>
 
@@ -41,16 +46,18 @@
   <!-- Row 1 (y-center 190): Hydrator, Cache Server | SpiceDB | Your Application, Event Processor -->
   <g>
     <rect x="50" y="145" width="170" height="90" rx="10" fill="#ffffff" stroke="#c7c4ca" stroke-width="1" />
-    <text x="135" y="185" text-anchor="middle" font-size="17" font-weight="700" fill="#1e1424">Hydrator</text>
-    <text x="135" y="207" text-anchor="middle" font-size="11.5" fill="#79727e">computes permission sets</text>
-    <text x="135" y="222" text-anchor="middle" font-size="11.5" fill="#79727e">for watched permissions</text>
+    <text x="135" y="172" text-anchor="middle" font-size="17" font-weight="700" fill="#1e1424">Offline</text>
+    <text x="135" y="192" text-anchor="middle" font-size="17" font-weight="700" fill="#1e1424">Hydrator</text>
+    <text x="135" y="210" text-anchor="middle" font-size="11.5" fill="#79727e">computes permission sets</text>
+    <text x="135" y="225" text-anchor="middle" font-size="11.5" fill="#79727e">for watched permissions</text>
   </g>
 
   <g>
     <rect x="250" y="140" width="190" height="100" rx="10" fill="#ffffff" stroke="#c7c4ca" stroke-width="1" />
-    <text x="345" y="180" text-anchor="middle" font-size="17" font-weight="700" fill="#1e1424">Cache Server</text>
-    <text x="345" y="202" text-anchor="middle" font-size="11.5" fill="#79727e">serves hydrated</text>
-    <text x="345" y="217" text-anchor="middle" font-size="11.5" fill="#79727e">permission sets</text>
+    <text x="345" y="167" text-anchor="middle" font-size="17" font-weight="700" fill="#1e1424">Online</text>
+    <text x="345" y="187" text-anchor="middle" font-size="17" font-weight="700" fill="#1e1424">Hydrator</text>
+    <text x="345" y="205" text-anchor="middle" font-size="11.5" fill="#79727e">serves hydrated</text>
+    <text x="345" y="220" text-anchor="middle" font-size="11.5" fill="#79727e">permission sets</text>
   </g>
 
   <g>
@@ -122,9 +129,9 @@
   <text x="605" y="314" text-anchor="middle" font-size="11.5" fill="#655d69">reads / writes</text>
 
   <!-- 5: SpiceDB <-> Cache Server (Accelerated Queries dispatch) — same row, straight across, teal = active path -->
-  <path d="M442,190 H518" fill="none" stroke="#72b1ad" stroke-width="1.5" marker-end="url(#arrow-teal)" marker-start="url(#arrow-teal)" />
-  <text x="480" y="170" text-anchor="middle" font-size="11.5" fill="#4a7d7b" font-weight="600">Accelerated</text>
-  <text x="480" y="183" text-anchor="middle" font-size="11.5" fill="#4a7d7b" font-weight="600">Queries</text>
+  <path d="M442,190 H518" fill="none" stroke="hsl(178 35% 33%)" stroke-width="1.5" marker-end="url(#arrow-teal)" marker-start="url(#arrow-teal)" />
+  <text x="480" y="170" text-anchor="middle" font-size="11.5" fill="hsl(178 35% 33%)" font-weight="600">Accelerated</text>
+  <text x="480" y="183" text-anchor="middle" font-size="11.5" fill="hsl(178 35% 33%)" font-weight="600">Queries</text>
 
   <!-- 6: SpiceDB <-> Your Application (normal SpiceDB API calls, unchanged by Materialize) — same row, straight across -->
   <path d="M692,190 H768" fill="none" stroke="#8e8891" stroke-width="1.5" marker-end="url(#arrow-neutral)" marker-start="url(#arrow-neutral)" />
@@ -146,8 +153,8 @@
        Cache Server reads the events it wrote to the Event Log (see connector 3) and streams them to the
        customer's Event Processor; bidirectional to also carry backfill requests. -->
   <path d="M390,138 V110 A10,10 0 0,1 400,100 H1000 A10,10 0 0,1 1010,110 V143"
-        fill="none" stroke="#7a5ce6" stroke-width="1.5" marker-end="url(#arrow-violet)" marker-start="url(#arrow-violet)" />
-  <text x="700" y="92" text-anchor="middle" font-size="12.5" fill="#6242e0" font-weight="600">Event Streams</text>
+        fill="none" stroke="hsl(253 62% 50%)" stroke-width="1.5" marker-end="url(#arrow-violet)" marker-start="url(#arrow-violet)" />
+  <text x="700" y="92" text-anchor="middle" font-size="12.5" fill="hsl(253 62% 50%)" font-weight="600">Event Streams</text>
 
   <!-- 10: Event Processor -> Your Database (same column, straight down) -->
   <path d="M1080,237 V378" fill="none" stroke="#8e8891" stroke-width="1.5" marker-end="url(#arrow-neutral)" />