--- a/design_system/src/index.html	Tue Aug 04 09:14:57 2026 -0700
+++ b/design_system/src/index.html	Tue Aug 04 11:57:16 2026 -0700
@@ -30,6 +30,7 @@
           <a href="/components/card" data-catalog-link>Card</a>
           <a href="/components/alert" data-catalog-link>Alert</a>
           <a href="/components/field" data-catalog-link>Field</a>
+          <a href="/components/notifications" data-catalog-link>Notifications</a>
           <a href="/components/stack" data-catalog-link>Stack</a>
         </nav>
 
@@ -82,6 +83,9 @@
             <a href="/components/stack" data-catalog-link>
               <zen-card interactive><article><h3>Stack</h3><p>A tiny layout primitive driven by HTML attributes.</p></article></zen-card>
             </a>
+            <a href="/components/notifications" data-catalog-link>
+              <zen-card interactive><article><h3>Notifications</h3><p>A bounded, scoped, bottom-right notification stack.</p></article></zen-card>
+            </a>
           </div>
         </section>
 
@@ -217,6 +221,78 @@
           </zen-story>
         </section>
 
+        <section class="catalog-page" data-catalog-page="notifications" hidden>
+          <header class="page-heading">
+            <p class="eyebrow">Component</p>
+            <h1>Notifications</h1>
+            <p>A scoped bottom-right stack with bounded records, deduplication, announcements, actions, and paused finite timers.</p>
+          </header>
+          <zen-story name="Notification stack">
+            <template>
+              <zen-notifications aria-label="Catalog notifications">
+                <zen-stack direction="row">
+                  <zen-button variant="quiet">
+                    <button
+                      type="button"
+                      data-notification-demo
+                      data-notification-id="catalog-info"
+                      data-tone="info"
+                      data-message="Build started"
+                      data-description="The worker accepted your request."
+                    >Info</button>
+                  </zen-button>
+                  <zen-button>
+                    <button
+                      type="button"
+                      data-notification-demo
+                      data-notification-id="catalog-success"
+                      data-tone="success"
+                      data-message="Deployment complete"
+                    >Success</button>
+                  </zen-button>
+                  <zen-button variant="danger">
+                    <button
+                      type="button"
+                      data-notification-demo
+                      data-notification-id="catalog-error"
+                      data-tone="error"
+                      data-message="Deployment failed"
+                      data-description="The previous release is still active."
+                      data-action="true"
+                    >Error with action</button>
+                  </zen-button>
+                  <zen-button variant="quiet">
+                    <button
+                      type="button"
+                      data-notification-demo
+                      data-notification-id="catalog-persistent"
+                      data-tone="warning"
+                      data-message="Manual action required"
+                      data-persistent="true"
+                    >Persistent</button>
+                  </zen-button>
+                  <zen-button variant="quiet">
+                    <button
+                      type="button"
+                      data-notification-demo
+                      data-notification-id="catalog-burst"
+                      data-tone="info"
+                      data-message="Queued notification"
+                      data-burst="true"
+                    >Add five</button>
+                  </zen-button>
+                  <zen-button variant="quiet">
+                    <button
+                      type="button"
+                      data-notification-dismiss-demo="catalog-persistent"
+                    >Dismiss persistent</button>
+                  </zen-button>
+                </zen-stack>
+              </zen-notifications>
+            </template>
+          </zen-story>
+        </section>
+
         <section class="catalog-page" data-catalog-page="stack" hidden>
           <header class="page-heading">
             <p class="eyebrow">Component</p>