--- a/design_system/src/storybook.css	Tue Aug 04 12:21:19 2026 -0700
+++ b/design_system/src/storybook.css	Tue Aug 04 15:12:09 2026 -0700
@@ -47,6 +47,34 @@
   text-decoration: none;
 }
 
+.catalog-search {
+  width: 100%;
+  margin-top: var(--zen-space-5);
+}
+
+.catalog-search > zen-icon {
+  align-self: center;
+  margin-inline-start: var(--zen-space-3);
+  color: var(--zen-color-text-muted);
+}
+
+.catalog-search > kbd {
+  align-self: center;
+  margin-inline-end: var(--zen-space-2);
+  padding: 0 var(--zen-space-1);
+  border: 1px solid var(--zen-color-border-muted);
+  border-radius: var(--zen-radius-sm);
+  color: var(--zen-color-text-muted);
+  font: var(--zen-font-size-xs)/1.5 var(--zen-font-mono);
+}
+
+.search-status {
+  min-height: 1.25rem;
+  margin: var(--zen-space-1) 0 0;
+  color: var(--zen-color-text-muted);
+  font-size: var(--zen-font-size-xs);
+}
+
 .catalog-mark {
   display: grid;
   width: 2.5rem;
@@ -55,7 +83,7 @@
   border: var(--zen-border-width) solid var(--zen-color-border);
   border-radius: 50%;
   background: var(--zen-color-accent);
-  color: #171a21;
+  color: var(--zen-color-on-accent);
 }
 
 .catalog-sidebar h2 {
@@ -78,10 +106,15 @@
   text-decoration: none;
 }
 
+.catalog-nav a[hidden],
+.component-grid > a[hidden] {
+  display: none;
+}
+
 .catalog-nav a:hover,
 .catalog-nav a[aria-current] {
   background: var(--zen-color-accent);
-  color: #171a21;
+  color: var(--zen-color-on-accent);
 }
 
 .theme-toggle {
@@ -97,10 +130,15 @@
 
 .catalog-main {
   width: min(100%, var(--zen-content-width));
+  min-width: 0;
   padding: var(--zen-space-7) clamp(1rem, 5vw, 5rem);
   outline: none;
 }
 
+.catalog-page {
+  min-width: 0;
+}
+
 .catalog-page[hidden] {
   display: none;
 }
@@ -160,6 +198,15 @@
   height: 100%;
 }
 
+.component-grid code {
+  color: var(--zen-color-info);
+  font-size: var(--zen-font-size-xs);
+}
+
+.component-grid p {
+  color: var(--zen-color-text-muted);
+}
+
 .swatch-list {
   display: grid;
   gap: var(--zen-space-2);
@@ -185,11 +232,81 @@
   height: 2rem;
   border: 1px solid var(--zen-color-border);
   border-radius: 50%;
-  background: var(--swatch);
+  background: var(--zen-color-swatch);
+}
+
+.token-group-wide {
+  grid-column: span 2;
+}
+
+.token-group > p {
+  color: var(--zen-color-text-muted);
+}
+
+.palette-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
+  gap: var(--zen-space-3);
+}
+
+.palette-grid > div {
+  display: grid;
+  gap: var(--zen-space-1);
+}
+
+.palette-grid span {
+  min-height: 3.5rem;
+  border: 1px solid var(--zen-color-border-muted);
+  border-radius: var(--zen-radius-md);
+  background: var(--zen-color-swatch);
+}
+
+.palette-grid code {
+  font-size: var(--zen-font-size-xs);
+}
+
+.data-palette {
+  display: grid;
+  grid-template-columns: repeat(10, minmax(1.75rem, 1fr));
+  min-height: 4rem;
+  overflow: hidden;
+  border: 1px solid var(--zen-color-border);
+  border-radius: var(--zen-radius-md);
+}
+
+.data-palette span {
+  background: var(--zen-color-swatch);
+}
+
+.icon-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
+  gap: var(--zen-space-3);
+}
+
+.icon-grid figure {
+  display: grid;
+  min-height: 7rem;
+  margin: 0;
+  padding: var(--zen-space-3);
+  place-items: center;
+  gap: var(--zen-space-2);
+  border: 1px solid var(--zen-color-border-muted);
+  border-radius: var(--zen-radius-md);
+  background: var(--zen-color-surface);
+}
+
+.icon-grid figcaption {
+  max-width: 100%;
+  overflow: hidden;
+  color: var(--zen-color-text-muted);
+  font-size: var(--zen-font-size-xs);
+  text-overflow: ellipsis;
 }
 
 zen-story {
   display: block;
+  max-width: 100%;
   margin-bottom: var(--zen-space-6);
   overflow: hidden;
   border: var(--zen-border-width) solid var(--zen-color-border);
@@ -223,8 +340,8 @@
   min-height: 8rem;
   padding: clamp(1rem, 4vw, 3rem);
   background:
-    linear-gradient(90deg, rgba(127, 127, 127, 0.08) 1px, transparent 1px),
-    linear-gradient(rgba(127, 127, 127, 0.08) 1px, transparent 1px);
+    linear-gradient(90deg, var(--zen-color-gridline) 1px, transparent 1px),
+    linear-gradient(var(--zen-color-gridline) 1px, transparent 1px);
   background-size: 1rem 1rem;
 }
 
@@ -234,8 +351,8 @@
   margin: 0;
   padding: var(--zen-space-4);
   border-top: 1px solid var(--zen-color-border);
-  background: #111318;
-  color: #f4f4f5;
+  background: var(--zen-color-code-surface);
+  color: var(--zen-color-code-text);
   font: var(--zen-font-size-sm)/1.55 var(--zen-font-mono);
 }
 
@@ -265,4 +382,12 @@
   .catalog-main {
     padding: var(--zen-space-6) var(--zen-space-4);
   }
+
+  .token-group-wide {
+    grid-column: auto;
+  }
+
+  .data-palette {
+    grid-template-columns: repeat(5, 1fr);
+  }
 }