diff --git a/src/marketing/BasicPrinciples.svelte b/src/marketing/BasicPrinciples.svelte
index 41a3899b5..48d6e027d 100644
--- a/src/marketing/BasicPrinciples.svelte
+++ b/src/marketing/BasicPrinciples.svelte
@@ -1,22 +1,30 @@
 <script lang="ts">
+  import Icon from "@app/components/Icon.svelte";
   import Meta from "@app/marketing/Meta.svelte";
+  import PrincipleFigure from "@app/marketing/PrincipleFigure.svelte";
 
   type Principle = {
     id: string;
     kicker: string;
     kickerMuted?: boolean;
     title: string;
+    body?: string;
   };
 
   const principles: Principle[] = [
-    { id: "intro", kicker: "The Radicle Protocol", title: "How it works" },
     {
       id: "status-quo",
-      kicker: "The Status Quo",
+      kicker: "Centralized platforms",
       kickerMuted: true,
       title: "Code lives on someone else’s server",
+      body: "Your issues, patches and identity are controlled by the platform.",
+    },
+    {
+      id: "nodes",
+      kicker: "Radicle",
+      title: "Everyone runs a node",
+      body: "No central server. Each node hosts and shares Git repositories directly with peers.",
     },
-    { id: "nodes", kicker: "Radicle", title: "Everyone runs a node" },
     {
       id: "identity",
       kicker: "Identity",
@@ -31,38 +39,31 @@
       id: "trust",
       kicker: "Trust",
       title: "Every change is cryptographically signed",
+      body: "Repositories are self-certifying. Anyone can verify authenticity without trusting a central authority.",
     },
     {
       id: "collaboration",
       kicker: "Collaboration",
       title: "Issues and patches live inside the repo",
+      body: "Collaborative Objects are local-first, user-owned and signed, just like your code.",
     },
   ];
 </script>
 
 <style>
   .principles {
-    --node-neutral: var(--color-text-secondary);
-    --node-blue: var(--color-accent-blue-500);
     --node-green: var(--color-accent-green-600);
-    --node-purple: var(--color-accent-purple-500);
-    --node-amber: var(--color-semantic-amber-500);
-    --mesh-line: var(--color-border-strong);
   }
 
-  .mono {
-    font-family: "JetBrains Mono", monospace;
-    font-size: 0.8125rem;
-    line-height: 1.6;
+  .page-title {
+    max-width: 40rem;
   }
 
   .principle {
-    display: flex;
-    flex-direction: column;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
     align-items: center;
-    justify-content: center;
-    text-align: center;
-    gap: 1.5rem;
+    gap: 3rem;
     padding: 4rem 0;
   }
 
@@ -70,9 +71,16 @@
     border-top: 1px solid var(--color-border-subtle);
   }
 
+  .principle-text {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    text-align: left;
+    gap: 1.25rem;
+    max-width: 34rem;
+  }
+
   .principle-kicker {
-    text-transform: uppercase;
-    letter-spacing: 0.12em;
     color: var(--color-accent-blue-500);
   }
 
@@ -83,134 +91,15 @@
   .principle-title {
     font: var(--txt-bold-24);
     margin: 0;
-    max-width: 42rem;
     color: var(--color-text-primary);
   }
 
-  .principle-intro .principle-title {
-    font: var(--txt-bold-32);
-    letter-spacing: -0.02em;
-    max-width: 30rem;
-  }
-
-  .slide-lead {
-    font: var(--txt-medium-22);
+  .principle-body {
+    font: var(--txt-medium-18);
     margin: 0;
-    max-width: 34rem;
-    color: var(--color-text-secondary);
-  }
-
-  .slide-divider {
-    width: 9rem;
-    height: 2px;
-    margin-top: 0.5rem;
-    background: var(--color-accent-blue-500);
-    border-radius: var(--border-radius-round);
-  }
-
-  .slide-figure {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-  }
-
-  .diagram {
-    width: 100%;
-    max-width: 24rem;
-    height: auto;
-  }
-
-  .slide-caption {
-    margin: 0;
-    max-width: 38rem;
-  }
-
-  /* Network diagram elements — theme-aware via design tokens. */
-  .mesh-line {
-    stroke: var(--mesh-line);
-    stroke-width: 1.5;
-  }
-
-  .hub-dot circle {
-    fill: var(--node-neutral);
-  }
-
-  .hub-chip {
-    fill: var(--color-surface-subtle);
-    stroke: var(--color-border-mid);
-    stroke-width: 1.5;
-  }
-
-  .hub-title {
-    fill: var(--color-text-primary);
-    font:
-      600 15px Booton,
-      sans-serif;
-  }
-
-  .hub-sub {
-    fill: var(--color-text-tertiary);
-    font:
-      400 12px "JetBrains Mono",
-      monospace;
-  }
-
-  .nd-blue {
-    fill: var(--node-blue);
-  }
-  .nd-green {
-    fill: var(--node-green);
-  }
-  .nd-purple {
-    fill: var(--node-purple);
-  }
-  .nd-neutral {
-    fill: var(--node-neutral);
-  }
-
-  .gossip-ring {
-    fill: none;
-    stroke: var(--node-blue);
-    stroke-width: 1.5;
-  }
-  .gossip-ring-inner {
-    stroke-opacity: 0.5;
-  }
-  .gossip-ring-outer {
-    stroke-opacity: 0.25;
-  }
-
-  .id-key {
-    width: 4rem;
-    height: 4rem;
-  }
-  .id-key-bg {
-    fill: var(--node-blue);
-  }
-  .id-key-fg {
-    stroke: var(--color-neutrals-opaque-light-0);
-    stroke-width: 3;
-    fill: none;
-    stroke-linecap: round;
-  }
-
-  /* Identity */
-  .did-key {
-    max-width: 100%;
-    padding: 0.6rem 1rem;
-    border: 1px solid var(--color-border-subtle);
-    border-radius: var(--border-radius-small);
-    background: var(--color-surface-subtle);
-    overflow-x: auto;
-    white-space: nowrap;
-  }
-  .did-prefix {
+    max-width: 32rem;
     color: var(--color-text-tertiary);
   }
-  .did-value {
-    color: var(--color-code-strings);
-  }
 
   .id-points {
     list-style: none;
@@ -223,7 +112,7 @@
   }
   .id-points li {
     display: flex;
-    align-items: baseline;
+    align-items: flex-start;
     gap: 0.6rem;
     font: var(--txt-medium-16);
   }
@@ -234,25 +123,14 @@
   .id-points .muted {
     color: var(--color-text-tertiary);
   }
-
-  .dot {
+  .id-points :global(svg) {
     flex: none;
-    width: 0.5rem;
-    height: 0.5rem;
-    border-radius: var(--border-radius-round);
-    transform: translateY(-0.1em);
-  }
-  .dot-green {
-    background: var(--node-green);
-  }
-  .dot-amber {
-    background: var(--node-amber);
-  }
-  .dot-purple {
-    background: var(--node-purple);
+    width: 1.125rem;
+    height: 1.125rem;
+    color: var(--node-green);
+    transform: translateY(0.05em);
   }
 
-  /* Networking */
   .net-steps {
     list-style: none;
     margin: 0;
@@ -274,110 +152,22 @@
     font-weight: 600;
   }
 
-  /* Trust */
-  .trust-figure {
-    position: relative;
-    width: 100%;
-    max-width: 30rem;
-  }
-  .ref-card {
-    text-align: left;
-    padding: 1.25rem 1.5rem;
-    border: 1px solid var(--color-border-subtle);
-    border-radius: var(--border-radius-regular);
-    background: var(--color-surface-subtle);
-    display: flex;
-    flex-direction: column;
-    gap: 0.6rem;
-  }
-  .ref-head {
-    color: var(--color-code-keywords);
-    font-weight: 600;
-  }
-  .ref-row {
-    display: flex;
-    gap: 0.75rem;
-    overflow: hidden;
-  }
-  .ref-row .hash {
-    color: var(--color-code-strings);
-    flex: none;
-  }
-  .ref-row .ref-path {
-    color: var(--color-text-tertiary);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .signed-badge {
-    position: absolute;
-    right: -0.25rem;
-    bottom: -1.25rem;
-    display: flex;
-    align-items: center;
-    gap: 0.6rem;
-    padding: 0.35rem 0.35rem 0.35rem 0.9rem;
-    border-radius: var(--border-radius-round);
-    background: var(--color-surface-canvas);
-  }
-  .signed-check {
+  .principle-visual {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 2rem;
-    height: 2rem;
-    border-radius: 50%;
-    background: var(--node-green);
-    color: var(--color-neutrals-opaque-light-0);
-  }
-
-  /* Collaboration */
-  .repo-card {
     width: 100%;
-    max-width: 30rem;
-    text-align: left;
-    padding: 1.25rem 1.5rem;
-    border: 1px solid var(--color-border-subtle);
-    border-radius: var(--border-radius-regular);
-    background: var(--color-surface-subtle);
-    display: flex;
-    flex-direction: column;
-    gap: 0.9rem;
-  }
-  .repo-head {
-    color: var(--color-code-keywords);
-    font-weight: 600;
-  }
-  .repo-rows {
-    display: flex;
-    flex-direction: column;
-    gap: 0.6rem;
-  }
-  .repo-row {
-    display: flex;
-    align-items: center;
-    gap: 0.6rem;
-    padding: 0.7rem 0.9rem;
-    border-radius: var(--border-radius-small);
-    background: var(--color-surface-mid);
-    font: var(--txt-medium-16);
-  }
-  .repo-row strong {
-    color: var(--color-text-primary);
-    font-weight: 600;
-  }
-  .repo-meta {
-    margin-left: auto;
-    color: var(--color-text-tertiary);
   }
 
   @media (max-width: 56rem) {
     .principle {
+      grid-template-columns: 1fr;
+      gap: 2rem;
       padding: 2.5rem 0;
     }
 
-    .diagram {
-      max-width: 18rem;
+    .principle-visual {
+      justify-content: flex-start;
     }
 
     .id-points {
@@ -396,315 +186,68 @@
 
 <main class="page-container principles">
   <header class="page-header">
-    <h1 class="txt-bold-32">
-      How it works. <span class="txt-color-tertiary">
-        The core ideas behind Radicle.
-      </span>
+    <h1 class="page-title txt-bold-32">
+      How it works.
+      <br />
+      <span class="txt-color-tertiary">The core ideas behind Radicle.</span>
     </h1>
   </header>
 
   {#each principles as principle (principle.id)}
-    <section class="principle" class:principle-intro={principle.id === "intro"}>
-      <span
-        class="principle-kicker txt-bold-14"
-        class:muted={principle.kickerMuted}>
-        {principle.kicker}
-      </span>
-      <h2 class="principle-title">{principle.title}</h2>
+    <section class="principle">
+      <div class="principle-text">
+        <span
+          class="principle-kicker txt-bold-14"
+          class:muted={principle.kickerMuted}>
+          {principle.kicker}
+        </span>
+        <h2 class="principle-title">{principle.title}</h2>
 
-      {#if principle.id === "intro"}
-        <p class="slide-lead">
-          A sovereign, peer-to-peer network for code collaboration
-        </p>
-        <span class="slide-divider"></span>
-      {:else if principle.id === "status-quo"}
-        <div class="slide-figure">
-          <svg
-            class="diagram"
-            viewBox="0 0 360 300"
-            fill="none"
-            aria-hidden="true">
-            <g class="mesh-line">
-              <line x1="180" y1="150" x2="180" y2="36" />
-              <line x1="180" y1="150" x2="300" y2="92" />
-              <line x1="180" y1="150" x2="60" y2="92" />
-              <line x1="180" y1="150" x2="300" y2="210" />
-              <line x1="180" y1="150" x2="60" y2="210" />
-              <line x1="180" y1="150" x2="180" y2="266" />
-            </g>
-            <g class="hub-dot">
-              <circle cx="180" cy="36" r="9" />
-              <circle cx="300" cy="92" r="9" />
-              <circle cx="60" cy="92" r="9" />
-              <circle cx="300" cy="210" r="9" />
-              <circle cx="60" cy="210" r="9" />
-              <circle cx="180" cy="266" r="9" />
-            </g>
-            <rect
-              class="hub-chip"
-              x="116"
-              y="124"
-              width="128"
-              height="52"
-              rx="10" />
-            <text class="hub-title" x="180" y="147" text-anchor="middle">
-              Central forge
-            </text>
-            <text class="hub-sub" x="180" y="166" text-anchor="middle">
-              GitHub · GitLab
-            </text>
-          </svg>
-        </div>
-        <p class="slide-caption txt-medium-18 txt-color-tertiary">
-          Your issues, patches and identity are controlled by the platform.
-        </p>
-      {:else if principle.id === "nodes"}
-        <div class="slide-figure">
-          <svg
-            class="diagram"
-            viewBox="0 0 360 340"
-            fill="none"
-            aria-hidden="true">
-            <g class="mesh-line">
-              <line x1="180" y1="55" x2="274" y2="100" />
-              <line x1="274" y1="100" x2="297" y2="202" />
-              <line x1="297" y1="202" x2="232" y2="283" />
-              <line x1="232" y1="283" x2="128" y2="283" />
-              <line x1="128" y1="283" x2="63" y2="202" />
-              <line x1="63" y1="202" x2="86" y2="100" />
-              <line x1="86" y1="100" x2="180" y2="55" />
-              <line x1="180" y1="55" x2="232" y2="283" />
-              <line x1="274" y1="100" x2="128" y2="283" />
-              <line x1="297" y1="202" x2="63" y2="202" />
-              <line x1="180" y1="55" x2="297" y2="202" />
-              <line x1="232" y1="283" x2="63" y2="202" />
-              <line x1="128" y1="283" x2="86" y2="100" />
-            </g>
-            <circle
-              class="nd-blue"
-              cx="180"
-              cy="55"
-              r="20"
-              fill-opacity="0.13" />
-            <circle
-              class="nd-green"
-              cx="274"
-              cy="100"
-              r="20"
-              fill-opacity="0.13" />
-            <circle
-              class="nd-purple"
-              cx="297"
-              cy="202"
-              r="20"
-              fill-opacity="0.13" />
-            <circle
-              class="nd-blue"
-              cx="232"
-              cy="283"
-              r="20"
-              fill-opacity="0.13" />
-            <circle
-              class="nd-green"
-              cx="128"
-              cy="283"
-              r="20"
-              fill-opacity="0.13" />
-            <circle
-              class="nd-purple"
-              cx="63"
-              cy="202"
-              r="20"
-              fill-opacity="0.13" />
-            <circle
-              class="nd-blue"
-              cx="86"
-              cy="100"
-              r="20"
-              fill-opacity="0.13" />
-            <circle class="nd-blue" cx="180" cy="55" r="9" />
-            <circle class="nd-green" cx="274" cy="100" r="9" />
-            <circle class="nd-purple" cx="297" cy="202" r="9" />
-            <circle class="nd-blue" cx="232" cy="283" r="9" />
-            <circle class="nd-green" cx="128" cy="283" r="9" />
-            <circle class="nd-purple" cx="63" cy="202" r="9" />
-            <circle class="nd-blue" cx="86" cy="100" r="9" />
-          </svg>
-        </div>
-        <p class="slide-caption txt-medium-18 txt-color-tertiary">
-          No central server. Each node hosts and shares Git repositories
-          directly with peers.
-        </p>
-      {:else if principle.id === "identity"}
-        <div class="slide-figure">
-          <svg
-            class="id-key"
-            viewBox="0 0 64 64"
-            fill="none"
-            aria-hidden="true">
-            <circle class="id-key-bg" cx="32" cy="32" r="24" />
-            <g class="id-key-fg">
-              <circle cx="26" cy="32" r="5.5" />
-              <path d="M31 32 H44" />
-              <path d="M40 32 V37" />
-              <path d="M44 32 V37" />
-            </g>
-          </svg>
-        </div>
-        <div class="did-key mono">
-          <span class="did-prefix">did:key:</span>
-          <span class="did-value">
-            z6MkhaXgBZDvotDkL5257faiztiGiC2QtKLGpbnnEGta2doK
-          </span>
-        </div>
-        <ul class="id-points">
-          <li>
-            <span class="dot dot-green"></span>
-            <span>
-              <strong>Generated offline</strong>
-              <span class="muted">— no email, no account, no permission</span>
-            </span>
-          </li>
-          <li>
-            <span class="dot dot-green"></span>
-            <span>
-              <strong>Your public key is your Node ID</strong>
-              <span class="muted">— the same across every device</span>
-            </span>
-          </li>
-          <li>
-            <span class="dot dot-green"></span>
-            <span>
-              <strong>Sign every action</strong>
-              <span class="muted">— so peers can verify it’s really you</span>
-            </span>
-          </li>
-        </ul>
-      {:else if principle.id === "networking"}
-        <div class="slide-figure">
-          <svg
-            class="diagram"
-            viewBox="0 0 360 360"
-            fill="none"
-            aria-hidden="true">
-            <g class="mesh-line">
-              <line x1="239" y1="73" x2="298" y2="175" />
-              <line x1="298" y1="175" x2="239" y2="277" />
-              <line x1="239" y1="277" x2="121" y2="277" />
-              <line x1="121" y1="277" x2="62" y2="175" />
-              <line x1="62" y1="175" x2="121" y2="73" />
-              <line x1="121" y1="73" x2="239" y2="73" />
-              <line x1="239" y1="73" x2="239" y2="277" />
-              <line x1="298" y1="175" x2="121" y2="277" />
-              <line x1="298" y1="175" x2="121" y2="73" />
-              <line x1="239" y1="277" x2="62" y2="175" />
-              <line x1="121" y1="277" x2="121" y2="73" />
-              <line x1="62" y1="175" x2="239" y2="73" />
-            </g>
-            <circle
-              class="gossip-ring gossip-ring-outer"
-              cx="180"
-              cy="175"
-              r="84" />
-            <circle
-              class="gossip-ring gossip-ring-inner"
-              cx="180"
-              cy="175"
-              r="48" />
-            <circle class="nd-neutral" cx="239" cy="73" r="10" />
-            <circle class="nd-neutral" cx="298" cy="175" r="10" />
-            <circle class="nd-neutral" cx="239" cy="277" r="10" />
-            <circle class="nd-neutral" cx="121" cy="277" r="10" />
-            <circle class="nd-neutral" cx="62" cy="175" r="10" />
-            <circle class="nd-neutral" cx="121" cy="73" r="10" />
-            <circle
-              class="nd-blue"
-              cx="180"
-              cy="175"
-              r="22"
-              fill-opacity="0.15" />
-            <circle class="nd-blue" cx="180" cy="175" r="11" />
-          </svg>
-        </div>
-        <ol class="net-steps">
-          <li>
-            <span class="num">1.</span>
-            Announce updates over gossip
-          </li>
-          <li>
-            <span class="num">2.</span>
-            Replicate the data with Git’s own transfer protocol
-          </li>
-        </ol>
-      {:else if principle.id === "trust"}
-        <div class="slide-figure">
-          <div class="trust-figure">
-            <div class="ref-card mono">
-              <div class="ref-head">refs/rad/sigrefs</div>
-              <div class="ref-row">
-                <span class="hash">9767b485c2aad1e2</span>
-                <span class="ref-path">refs/heads/master</span>
-              </div>
-              <div class="ref-row">
-                <span class="hash">f3eaa7454e3a4714</span>
-                <span class="ref-path">refs/cobs/xyz.radicle.patch/…</span>
-              </div>
-              <div class="ref-row">
-                <span class="hash">0590b78ee42b3908</span>
-                <span class="ref-path">refs/cobs/xyz.radicle.issue/…</span>
-              </div>
-            </div>
-            <div class="signed-badge">
-              <span class="signed-label txt-bold-16">Signed</span>
-              <span class="signed-check">
-                <svg
-                  width="18"
-                  height="18"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="3"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  aria-hidden="true">
-                  <path d="M20 6 9 17l-5-5" />
-                </svg>
+        {#if principle.body}
+          <p class="principle-body">{principle.body}</p>
+        {/if}
+
+        {#if principle.id === "identity"}
+          <ul class="id-points">
+            <li>
+              <Icon name="offline" />
+              <span>
+                <strong>Generated offline:</strong>
+                <span class="muted">no email, no account, no permission</span>
               </span>
-            </div>
-          </div>
-        </div>
-        <p class="slide-caption txt-medium-18 txt-color-tertiary">
-          Repositories are self-certifying — anyone can verify authenticity
-          without trusting a central authority.
-        </p>
-      {:else if principle.id === "collaboration"}
-        <div class="slide-figure">
-          <div class="repo-card">
-            <div class="repo-head mono">rad:z3gqcJUoA1n9…</div>
-            <div class="repo-rows">
-              <div class="repo-row">
-                <span class="dot dot-green"></span>
-                <strong>Code</strong>
-                <span class="repo-meta mono">commits &amp; branches</span>
-              </div>
-              <div class="repo-row">
-                <span class="dot dot-amber"></span>
-                <strong>Issues</strong>
-                <span class="repo-meta mono">xyz.radicle.issue</span>
-              </div>
-              <div class="repo-row">
-                <span class="dot dot-purple"></span>
-                <strong>Patches</strong>
-                <span class="repo-meta mono">xyz.radicle.patch</span>
-              </div>
-            </div>
-          </div>
-        </div>
-        <p class="slide-caption txt-medium-18 txt-color-tertiary">
-          Collaborative Objects are local-first, user-owned and signed — just
-          like your code.
-        </p>
-      {/if}
+            </li>
+            <li>
+              <Icon name="key" />
+              <span>
+                <strong>Your public key is your Node ID:</strong>
+                <span class="muted">the same across every device</span>
+              </span>
+            </li>
+            <li>
+              <Icon name="badge" />
+              <span>
+                <strong>Sign every action:</strong>
+                <span class="muted">so peers can verify it’s really you</span>
+              </span>
+            </li>
+          </ul>
+        {:else if principle.id === "networking"}
+          <ol class="net-steps">
+            <li>
+              <span class="num">1.</span>
+              Announce updates over gossip
+            </li>
+            <li>
+              <span class="num">2.</span>
+              Replicate the data with Git’s own transfer protocol
+            </li>
+          </ol>
+        {/if}
+      </div>
+
+      <div class="principle-visual">
+        <PrincipleFigure id={principle.id} />
+      </div>
     </section>
   {/each}
 </main>
diff --git a/src/marketing/Learn.svelte b/src/marketing/Learn.svelte
index dee9f70d9..b8c9b706f 100644
--- a/src/marketing/Learn.svelte
+++ b/src/marketing/Learn.svelte
@@ -289,38 +289,62 @@
             <line x1="232" y1="283" x2="63" y2="202" />
             <line x1="128" y1="283" x2="86" y2="100" />
           </g>
-          <circle class="nd-blue" cx="180" cy="55" r="20" fill-opacity="0.13" />
-          <circle
-            class="nd-green"
-            cx="274"
-            cy="100"
-            r="20"
-            fill-opacity="0.13" />
-          <circle
-            class="nd-purple"
-            cx="297"
-            cy="202"
-            r="20"
-            fill-opacity="0.13" />
-          <circle
+          <rect
             class="nd-blue"
-            cx="232"
-            cy="283"
-            r="20"
+            x="160"
+            y="35"
+            width="40"
+            height="40"
+            rx="12"
             fill-opacity="0.13" />
-          <circle
+          <rect
             class="nd-green"
-            cx="128"
-            cy="283"
-            r="20"
+            x="254"
+            y="80"
+            width="40"
+            height="40"
+            rx="12"
             fill-opacity="0.13" />
-          <circle
+          <rect
             class="nd-purple"
-            cx="63"
-            cy="202"
-            r="20"
+            x="277"
+            y="182"
+            width="40"
+            height="40"
+            rx="12"
+            fill-opacity="0.13" />
+          <rect
+            class="nd-blue"
+            x="212"
+            y="263"
+            width="40"
+            height="40"
+            rx="12"
+            fill-opacity="0.13" />
+          <rect
+            class="nd-green"
+            x="108"
+            y="263"
+            width="40"
+            height="40"
+            rx="12"
+            fill-opacity="0.13" />
+          <rect
+            class="nd-purple"
+            x="43"
+            y="182"
+            width="40"
+            height="40"
+            rx="12"
+            fill-opacity="0.13" />
+          <rect
+            class="nd-blue"
+            x="66"
+            y="80"
+            width="40"
+            height="40"
+            rx="12"
             fill-opacity="0.13" />
-          <circle class="nd-blue" cx="86" cy="100" r="20" fill-opacity="0.13" />
           <circle class="nd-blue" cx="180" cy="55" r="9" />
           <circle class="nd-green" cx="274" cy="100" r="9" />
           <circle class="nd-purple" cx="297" cy="202" r="9" />
diff --git a/src/marketing/PrincipleFigure.svelte b/src/marketing/PrincipleFigure.svelte
new file mode 100644
index 000000000..cb1c39e1c
--- /dev/null
+++ b/src/marketing/PrincipleFigure.svelte
@@ -0,0 +1,849 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+
+  import Icon from "@app/components/Icon.svelte";
+
+  export let id: string;
+
+  const didPrefix = "z6Mkha";
+  const didSuffix = "ta2doK";
+  const didReal = `${didPrefix}…${didSuffix}`;
+  const scrambleChars =
+    "ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz123456789";
+
+  let didValue = didReal;
+  let generating = false;
+
+  function randomChar(): string {
+    return scrambleChars.charAt(
+      Math.floor(Math.random() * scrambleChars.length),
+    );
+  }
+
+  onMount(() => {
+    if (id !== "identity") return;
+    if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return;
+
+    const chars = didReal.split("");
+    const scrambleTicks = 22;
+    const cycle = scrambleTicks + 55;
+    let tick = 0;
+
+    const interval = setInterval(() => {
+      tick = (tick + 1) % cycle;
+      if (tick < scrambleTicks) {
+        generating = true;
+        const locked = Math.floor((tick / scrambleTicks) * chars.length);
+        didValue = chars
+          .map((ch, i) => (ch === "…" || i < locked ? ch : randomChar()))
+          .join("");
+      } else {
+        generating = false;
+        didValue = didReal;
+      }
+    }, 55);
+
+    return () => clearInterval(interval);
+  });
+</script>
+
+<style>
+  .figure {
+    --node-neutral: var(--color-text-secondary);
+    --node-blue: var(--color-accent-blue-500);
+    --node-green: var(--color-accent-green-600);
+    --node-purple: var(--color-accent-purple-500);
+    --node-amber: var(--color-semantic-amber-500);
+    --mesh-line: var(--color-border-strong);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 1.25rem;
+    width: 100%;
+  }
+
+  .mono {
+    font-family: "JetBrains Mono", monospace;
+    font-size: 0.8125rem;
+    line-height: 1.6;
+  }
+
+  .diagram {
+    width: 100%;
+    max-width: 22rem;
+    height: auto;
+  }
+
+  /* Network diagram elements — theme-aware via design tokens. */
+  .mesh-line {
+    stroke: var(--mesh-line);
+    stroke-width: 1.5;
+  }
+
+  .hub-dot circle {
+    fill: var(--node-neutral);
+  }
+
+  /* Packets flowing along each spoke into the central forge, reinforcing
+     that everything routes through one server. */
+  .packet {
+    fill: var(--color-text-tertiary);
+    animation: forge-flow 8s ease-in-out infinite;
+  }
+
+  /* Colored packets exchanged directly between peers along the mesh edges. */
+  .mesh-packet {
+    fill: var(--c);
+  }
+
+  @keyframes forge-flow {
+    0%,
+    100% {
+      transform: translate(var(--dx), var(--dy));
+      opacity: 0;
+    }
+    10% {
+      transform: translate(var(--dx), var(--dy));
+      opacity: 0.35;
+    }
+    30% {
+      transform: translate(0, 0);
+      opacity: 1;
+    }
+    50% {
+      transform: translate(var(--dx), var(--dy));
+      opacity: 0.35;
+    }
+    58% {
+      transform: translate(var(--dx), var(--dy));
+      opacity: 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .packet {
+      animation: none;
+      opacity: 0;
+    }
+    .id-key::before,
+    .id-key::after {
+      animation: none;
+      opacity: 0;
+    }
+    .did-key::after {
+      animation: none;
+    }
+    .gossip-ripple {
+      animation: none;
+      opacity: 0;
+    }
+    .ref-row {
+      animation: none;
+      background-color: transparent;
+    }
+    .signed-check path {
+      animation: none;
+      stroke-dashoffset: 0;
+    }
+    .repo-row {
+      animation: none;
+      background-color: var(--color-surface-mid);
+    }
+    .repo-row .dot {
+      animation: none;
+      transform: none;
+    }
+  }
+
+  .hub-chip {
+    fill: var(--color-surface-subtle);
+    stroke: var(--color-border-mid);
+    stroke-width: 1.5;
+  }
+
+  .hub-title {
+    fill: var(--color-text-primary);
+    font:
+      600 15px Booton,
+      sans-serif;
+  }
+
+  .hub-sub {
+    fill: var(--color-text-tertiary);
+    font:
+      400 12px "JetBrains Mono",
+      monospace;
+  }
+
+  .nd-blue {
+    fill: var(--node-blue);
+  }
+  .nd-green {
+    fill: var(--node-green);
+  }
+  .nd-purple {
+    fill: var(--node-purple);
+  }
+  .nd-neutral {
+    fill: var(--node-neutral);
+  }
+
+  /* Gossip announcements rippling out from the node to its peers. */
+  .gossip-ripple {
+    fill: none;
+    stroke: var(--node-blue);
+    stroke-width: 1.5;
+    animation: gossip-out 3s ease-out infinite;
+  }
+
+  @keyframes gossip-out {
+    0% {
+      r: 14px;
+      opacity: 0.5;
+    }
+    100% {
+      r: 92px;
+      opacity: 0;
+    }
+  }
+
+  /* Identity */
+  .id-key {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 5rem;
+    height: 5rem;
+    border-radius: var(--border-radius-round);
+    background: var(--node-blue);
+    color: var(--color-neutrals-opaque-light-0);
+  }
+  .id-key :global(svg) {
+    width: 2.5rem;
+    height: 2.5rem;
+  }
+
+  /* Signal rings ping out from the key while it is generating, in sync with
+     the key string being computed below. */
+  .id-key::before,
+  .id-key::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    border: 1.5px solid var(--node-blue);
+    opacity: 0;
+  }
+  .id-key.generating::before,
+  .id-key.generating::after {
+    animation: id-ping 0.9s ease-out;
+  }
+  .id-key.generating::after {
+    animation-delay: 0.3s;
+  }
+
+  @keyframes id-ping {
+    0% {
+      transform: scale(1);
+      opacity: 0.45;
+    }
+    80%,
+    100% {
+      transform: scale(2.1);
+      opacity: 0;
+    }
+  }
+
+  .did-key {
+    position: relative;
+    max-width: 100%;
+    padding: 0.6rem 1rem;
+    border: 1px solid var(--color-border-subtle);
+    border-radius: var(--border-radius-small);
+    background: var(--color-surface-subtle);
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  /* Light sweep across the key string. A dark glint reads against the light
+     surface; dark theme brightens instead. */
+  .did-key {
+    --shimmer-color: rgba(0, 0, 0, 0.08);
+  }
+  :global(:root[data-theme="dark"]) .did-key {
+    --shimmer-color: rgba(255, 255, 255, 0.35);
+  }
+  .did-key::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      100deg,
+      transparent 35%,
+      var(--shimmer-color) 50%,
+      transparent 65%
+    );
+    transform: translateX(-120%);
+    animation: did-shimmer 4.5s ease-in-out infinite;
+    pointer-events: none;
+  }
+
+  @keyframes did-shimmer {
+    0%,
+    20% {
+      transform: translateX(-120%);
+    }
+    70%,
+    100% {
+      transform: translateX(120%);
+    }
+  }
+  .did-prefix {
+    color: var(--color-text-tertiary);
+  }
+  .did-value {
+    color: var(--color-code-strings);
+  }
+
+  .dot {
+    flex: none;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: var(--border-radius-round);
+  }
+  .dot-green {
+    background: var(--node-green);
+  }
+  .dot-amber {
+    background: var(--node-amber);
+  }
+  .dot-purple {
+    background: var(--node-purple);
+  }
+
+  /* Trust */
+  .trust-figure {
+    position: relative;
+    width: 100%;
+    max-width: 26rem;
+  }
+  .ref-card {
+    text-align: left;
+    padding: 1.25rem 1.5rem;
+    border: 1px solid var(--color-border-subtle);
+    border-radius: var(--border-radius-regular);
+    background: var(--color-surface-subtle);
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
+  }
+  .ref-head {
+    color: var(--color-code-keywords);
+    font-weight: 600;
+  }
+  .ref-row {
+    display: flex;
+    gap: 0.75rem;
+    overflow: hidden;
+    border-radius: var(--border-radius-small);
+    animation: ref-verify 4.5s ease-in-out infinite;
+  }
+  .ref-card .ref-row:nth-child(2) {
+    animation-delay: 0s;
+  }
+  .ref-card .ref-row:nth-child(3) {
+    animation-delay: 0.35s;
+  }
+  .ref-card .ref-row:nth-child(4) {
+    animation-delay: 0.7s;
+  }
+
+  /* Each signed ref highlights in turn, then the Signed check draws itself. */
+  @keyframes ref-verify {
+    0%,
+    100% {
+      background-color: transparent;
+    }
+    4% {
+      background-color: color-mix(in srgb, var(--node-green) 18%, transparent);
+    }
+    16% {
+      background-color: transparent;
+    }
+  }
+  .ref-row .hash {
+    color: var(--color-code-strings);
+    flex: none;
+  }
+  .ref-row .ref-path {
+    color: var(--color-text-tertiary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .signed-badge {
+    position: absolute;
+    right: -0.25rem;
+    bottom: -1.25rem;
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+    padding: 0.35rem 0.35rem 0.35rem 0.9rem;
+    border-radius: var(--border-radius-round);
+    background: var(--color-surface-canvas);
+  }
+  .signed-check {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    background: var(--node-green);
+    color: var(--color-neutrals-opaque-light-0);
+  }
+  .signed-check path {
+    stroke-dasharray: 24;
+    stroke-dashoffset: 0;
+    animation: check-draw 4.5s ease-in-out infinite;
+  }
+  @keyframes check-draw {
+    0%,
+    42% {
+      stroke-dashoffset: -24;
+    }
+    58%,
+    92% {
+      stroke-dashoffset: 0;
+    }
+    100% {
+      stroke-dashoffset: -24;
+    }
+  }
+
+  /* Collaboration */
+  .repo-card {
+    width: 100%;
+    max-width: 26rem;
+    text-align: left;
+    padding: 1.25rem 1.5rem;
+    border: 1px solid var(--color-border-subtle);
+    border-radius: var(--border-radius-regular);
+    background: var(--color-surface-subtle);
+    display: flex;
+    flex-direction: column;
+    gap: 0.9rem;
+  }
+  .repo-head {
+    color: var(--color-code-keywords);
+    font-weight: 600;
+  }
+  .repo-rows {
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
+  }
+  .repo-row {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+    padding: 0.7rem 0.9rem;
+    border-radius: var(--border-radius-small);
+    background: var(--color-surface-mid);
+    font: var(--txt-medium-16);
+    animation: cob-row 3s ease-in-out infinite;
+  }
+  .repo-rows .repo-row:nth-child(1) {
+    --row-accent: var(--node-green);
+  }
+  .repo-rows .repo-row:nth-child(2) {
+    --row-accent: var(--node-amber);
+    animation-delay: 0.3s;
+  }
+  .repo-rows .repo-row:nth-child(3) {
+    --row-accent: var(--node-purple);
+    animation-delay: 0.6s;
+  }
+
+  /* Each object-type row lights up in sequence, its dot pulsing and the row
+     briefly highlighting, a heartbeat of activity across the repo. */
+  .repo-row .dot {
+    animation: cob-pulse 3s ease-in-out infinite;
+  }
+  .repo-rows .repo-row:nth-child(2) .dot {
+    animation-delay: 0.3s;
+  }
+  .repo-rows .repo-row:nth-child(3) .dot {
+    animation-delay: 0.6s;
+  }
+  @keyframes cob-pulse {
+    0%,
+    22%,
+    100% {
+      transform: scale(1);
+    }
+    8% {
+      transform: scale(1.5);
+    }
+  }
+  @keyframes cob-row {
+    0%,
+    26%,
+    100% {
+      background-color: var(--color-surface-mid);
+    }
+    8% {
+      background-color: color-mix(
+        in srgb,
+        var(--row-accent) 16%,
+        var(--color-surface-mid)
+      );
+    }
+  }
+  .repo-row strong {
+    color: var(--color-text-primary);
+    font-weight: 600;
+  }
+  .repo-meta {
+    margin-left: auto;
+    color: var(--color-text-tertiary);
+  }
+</style>
+
+<div class="figure">
+  {#if id === "status-quo"}
+    <svg class="diagram" viewBox="0 0 360 300" fill="none" aria-hidden="true">
+      <g class="mesh-line">
+        <line x1="180" y1="150" x2="180" y2="36" />
+        <line x1="180" y1="150" x2="300" y2="92" />
+        <line x1="180" y1="150" x2="60" y2="92" />
+        <line x1="180" y1="150" x2="300" y2="210" />
+        <line x1="180" y1="150" x2="60" y2="210" />
+        <line x1="180" y1="150" x2="180" y2="266" />
+      </g>
+      <g class="forge-packets">
+        <circle
+          class="packet"
+          cx="180"
+          cy="150"
+          r="3"
+          style="--dx: 0px; --dy: -114px; animation-delay: 0s;" />
+        <circle
+          class="packet"
+          cx="180"
+          cy="150"
+          r="3"
+          style="--dx: 120px; --dy: -58px; animation-delay: -1.3s;" />
+        <circle
+          class="packet"
+          cx="180"
+          cy="150"
+          r="3"
+          style="--dx: -120px; --dy: -58px; animation-delay: -2.7s;" />
+        <circle
+          class="packet"
+          cx="180"
+          cy="150"
+          r="3"
+          style="--dx: 120px; --dy: 60px; animation-delay: -5.3s;" />
+        <circle
+          class="packet"
+          cx="180"
+          cy="150"
+          r="3"
+          style="--dx: -120px; --dy: 60px; animation-delay: -4s;" />
+        <circle
+          class="packet"
+          cx="180"
+          cy="150"
+          r="3"
+          style="--dx: 0px; --dy: 116px; animation-delay: -6.7s;" />
+      </g>
+      <g class="hub-dot">
+        <circle cx="180" cy="36" r="9" />
+        <circle cx="300" cy="92" r="9" />
+        <circle cx="60" cy="92" r="9" />
+        <circle cx="300" cy="210" r="9" />
+        <circle cx="60" cy="210" r="9" />
+        <circle cx="180" cy="266" r="9" />
+      </g>
+      <rect class="hub-chip" x="116" y="124" width="128" height="52" rx="10" />
+      <text class="hub-title" x="180" y="147" text-anchor="middle">
+        Central forge
+      </text>
+      <text class="hub-sub" x="180" y="166" text-anchor="middle">
+        GitHub · GitLab
+      </text>
+    </svg>
+  {:else if id === "nodes"}
+    <svg class="diagram" viewBox="0 0 360 340" fill="none" aria-hidden="true">
+      <g class="mesh-line">
+        <line x1="180" y1="55" x2="274" y2="100" />
+        <line x1="274" y1="100" x2="297" y2="202" />
+        <line x1="297" y1="202" x2="232" y2="283" />
+        <line x1="232" y1="283" x2="128" y2="283" />
+        <line x1="128" y1="283" x2="63" y2="202" />
+        <line x1="63" y1="202" x2="86" y2="100" />
+        <line x1="86" y1="100" x2="180" y2="55" />
+        <line x1="180" y1="55" x2="232" y2="283" />
+        <line x1="274" y1="100" x2="128" y2="283" />
+        <line x1="297" y1="202" x2="63" y2="202" />
+        <line x1="180" y1="55" x2="297" y2="202" />
+        <line x1="232" y1="283" x2="63" y2="202" />
+        <line x1="128" y1="283" x2="86" y2="100" />
+      </g>
+      <g class="mesh-packets">
+        <circle
+          class="packet mesh-packet"
+          cx="180"
+          cy="55"
+          r="3"
+          style="--dx: 94px; --dy: 45px; --c: var(--color-accent-purple-500); animation-delay: 0s;" />
+        <circle
+          class="packet mesh-packet"
+          cx="274"
+          cy="100"
+          r="3"
+          style="--dx: 23px; --dy: 102px; --c: var(--color-accent-cyan-500); animation-delay: -0.6s;" />
+        <circle
+          class="packet mesh-packet"
+          cx="297"
+          cy="202"
+          r="3"
+          style="--dx: -65px; --dy: 81px; --c: var(--color-accent-citrus-500); animation-delay: -1.2s;" />
+        <circle
+          class="packet mesh-packet"
+          cx="232"
+          cy="283"
+          r="3"
+          style="--dx: -104px; --dy: 0px; --c: var(--color-accent-pink-500); animation-delay: -1.8s;" />
+        <circle
+          class="packet mesh-packet"
+          cx="128"
+          cy="283"
+          r="3"
+          style="--dx: -65px; --dy: -81px; --c: var(--color-accent-emerald-500); animation-delay: -2.5s;" />
+        <circle
+          class="packet mesh-packet"
+          cx="63"
+          cy="202"
+          r="3"
+          style="--dx: 23px; --dy: -102px; --c: var(--color-accent-olive-500); animation-delay: -3.1s;" />
+        <circle
+          class="packet mesh-packet"
+          cx="86"
+          cy="100"
+          r="3"
+          style="--dx: 94px; --dy: -45px; --c: var(--color-accent-purple-500); animation-delay: -3.7s;" />
+        <circle
+          class="packet mesh-packet"
+          cx="180"
+          cy="55"
+          r="3"
+          style="--dx: 52px; --dy: 228px; --c: var(--color-accent-cyan-500); animation-delay: -4.3s;" />
+        <circle
+          class="packet mesh-packet"
+          cx="274"
+          cy="100"
+          r="3"
+          style="--dx: -146px; --dy: 183px; --c: var(--color-accent-citrus-500); animation-delay: -4.9s;" />
+        <circle
+          class="packet mesh-packet"
+          cx="297"
+          cy="202"
+          r="3"
+          style="--dx: -234px; --dy: 0px; --c: var(--color-accent-pink-500); animation-delay: -5.5s;" />
+        <circle
+          class="packet mesh-packet"
+          cx="180"
+          cy="55"
+          r="3"
+          style="--dx: 117px; --dy: 147px; --c: var(--color-accent-emerald-500); animation-delay: -6.2s;" />
+        <circle
+          class="packet mesh-packet"
+          cx="232"
+          cy="283"
+          r="3"
+          style="--dx: -169px; --dy: -81px; --c: var(--color-accent-olive-500); animation-delay: -6.8s;" />
+        <circle
+          class="packet mesh-packet"
+          cx="128"
+          cy="283"
+          r="3"
+          style="--dx: -42px; --dy: -183px; --c: var(--color-accent-purple-500); animation-delay: -7.4s;" />
+      </g>
+      <rect
+        class="nd-blue"
+        x="160"
+        y="35"
+        width="40"
+        height="40"
+        rx="12"
+        fill-opacity="0.13" />
+      <rect
+        class="nd-green"
+        x="254"
+        y="80"
+        width="40"
+        height="40"
+        rx="12"
+        fill-opacity="0.13" />
+      <rect
+        class="nd-purple"
+        x="277"
+        y="182"
+        width="40"
+        height="40"
+        rx="12"
+        fill-opacity="0.13" />
+      <rect
+        class="nd-blue"
+        x="212"
+        y="263"
+        width="40"
+        height="40"
+        rx="12"
+        fill-opacity="0.13" />
+      <rect
+        class="nd-green"
+        x="108"
+        y="263"
+        width="40"
+        height="40"
+        rx="12"
+        fill-opacity="0.13" />
+      <rect
+        class="nd-purple"
+        x="43"
+        y="182"
+        width="40"
+        height="40"
+        rx="12"
+        fill-opacity="0.13" />
+      <rect
+        class="nd-blue"
+        x="66"
+        y="80"
+        width="40"
+        height="40"
+        rx="12"
+        fill-opacity="0.13" />
+      <circle class="nd-blue" cx="180" cy="55" r="9" />
+      <circle class="nd-green" cx="274" cy="100" r="9" />
+      <circle class="nd-purple" cx="297" cy="202" r="9" />
+      <circle class="nd-blue" cx="232" cy="283" r="9" />
+      <circle class="nd-green" cx="128" cy="283" r="9" />
+      <circle class="nd-purple" cx="63" cy="202" r="9" />
+      <circle class="nd-blue" cx="86" cy="100" r="9" />
+    </svg>
+  {:else if id === "identity"}
+    <span class="id-key" class:generating aria-hidden="true">
+      <Icon name="key" />
+    </span>
+    <div class="did-key mono">
+      <span class="did-prefix">did:key:</span>
+      <span class="did-value">{didValue}</span>
+    </div>
+  {:else if id === "networking"}
+    <svg class="diagram" viewBox="0 0 360 360" fill="none" aria-hidden="true">
+      <g class="mesh-line">
+        <line x1="239" y1="73" x2="298" y2="175" />
+        <line x1="298" y1="175" x2="239" y2="277" />
+        <line x1="239" y1="277" x2="121" y2="277" />
+        <line x1="121" y1="277" x2="62" y2="175" />
+        <line x1="62" y1="175" x2="121" y2="73" />
+        <line x1="121" y1="73" x2="239" y2="73" />
+        <line x1="239" y1="73" x2="239" y2="277" />
+        <line x1="298" y1="175" x2="121" y2="277" />
+        <line x1="298" y1="175" x2="121" y2="73" />
+        <line x1="239" y1="277" x2="62" y2="175" />
+        <line x1="121" y1="277" x2="121" y2="73" />
+        <line x1="62" y1="175" x2="239" y2="73" />
+      </g>
+      <circle
+        class="gossip-ripple"
+        cx="180"
+        cy="175"
+        r="14"
+        style="animation-delay: 0s;" />
+      <circle
+        class="gossip-ripple"
+        cx="180"
+        cy="175"
+        r="14"
+        style="animation-delay: -1s;" />
+      <circle
+        class="gossip-ripple"
+        cx="180"
+        cy="175"
+        r="14"
+        style="animation-delay: -2s;" />
+      <circle class="nd-neutral" cx="239" cy="73" r="10" />
+      <circle class="nd-neutral" cx="298" cy="175" r="10" />
+      <circle class="nd-neutral" cx="239" cy="277" r="10" />
+      <circle class="nd-neutral" cx="121" cy="277" r="10" />
+      <circle class="nd-neutral" cx="62" cy="175" r="10" />
+      <circle class="nd-neutral" cx="121" cy="73" r="10" />
+      <circle class="nd-blue" cx="180" cy="175" r="22" fill-opacity="0.15" />
+      <circle class="nd-blue" cx="180" cy="175" r="11" />
+    </svg>
+  {:else if id === "trust"}
+    <div class="trust-figure">
+      <div class="ref-card mono">
+        <div class="ref-head">refs/rad/sigrefs</div>
+        <div class="ref-row">
+          <span class="hash">9767b485c2aad1e2</span>
+          <span class="ref-path">refs/heads/master</span>
+        </div>
+        <div class="ref-row">
+          <span class="hash">f3eaa7454e3a4714</span>
+          <span class="ref-path">refs/cobs/xyz.radicle.patch/…</span>
+        </div>
+        <div class="ref-row">
+          <span class="hash">0590b78ee42b3908</span>
+          <span class="ref-path">refs/cobs/xyz.radicle.issue/…</span>
+        </div>
+      </div>
+      <div class="signed-badge">
+        <span class="signed-label txt-bold-16">Signed</span>
+        <span class="signed-check">
+          <svg
+            width="18"
+            height="18"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="3"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true">
+            <path d="M20 6 9 17l-5-5" />
+          </svg>
+        </span>
+      </div>
+    </div>
+  {:else if id === "collaboration"}
+    <div class="repo-card">
+      <div class="repo-head mono">rad:z3gqcJUoA1n9…</div>
+      <div class="repo-rows">
+        <div class="repo-row">
+          <span class="dot dot-green"></span>
+          <strong>Code</strong>
+          <span class="repo-meta mono">commits &amp; branches</span>
+        </div>
+        <div class="repo-row">
+          <span class="dot dot-amber"></span>
+          <strong>Issues</strong>
+          <span class="repo-meta mono">xyz.radicle.issue</span>
+        </div>
+        <div class="repo-row">
+          <span class="dot dot-purple"></span>
+          <strong>Patches</strong>
+          <span class="repo-meta mono">xyz.radicle.patch</span>
+        </div>
+      </div>
+    </div>
+  {/if}
+</div>