--- a/design_system/src/index.html	Tue Aug 04 12:21:19 2026 -0700
+++ b/design_system/src/index.html	Tue Aug 04 15:12:09 2026 -0700
@@ -18,10 +18,25 @@
           Zenbu UI
         </a>
 
+        <zen-input-group class="catalog-search">
+          <zen-icon name="search"></zen-icon>
+          <input
+            id="componentSearch"
+            type="search"
+            placeholder="Search components"
+            aria-label="Search components"
+            aria-describedby="componentSearchStatus"
+            autocomplete="off"
+          />
+          <kbd aria-hidden="true">/</kbd>
+        </zen-input-group>
+        <p id="componentSearchStatus" class="search-status" role="status"></p>
+
         <h2>Foundations</h2>
         <nav class="catalog-nav" aria-label="Foundations">
           <a href="/" data-catalog-link>Overview</a>
           <a href="/tokens" data-catalog-link>Tokens</a>
+          <a href="/icons" data-catalog-link>Icons</a>
         </nav>
 
         <h2>Components</h2>
@@ -97,14 +112,58 @@
           </header>
           <div class="token-grid">
             <section class="token-group">
-              <h2>Color</h2>
+              <h2>Semantic color</h2>
               <dl class="swatch-list">
-                <div><span class="swatch" style="--swatch: var(--zen-color-accent)"></span><div><dt>--zen-color-accent</dt><dd>Primary action</dd></div></div>
-                <div><span class="swatch" style="--swatch: var(--zen-color-info)"></span><div><dt>--zen-color-info</dt><dd>Informational state</dd></div></div>
-                <div><span class="swatch" style="--swatch: var(--zen-color-success)"></span><div><dt>--zen-color-success</dt><dd>Successful state</dd></div></div>
-                <div><span class="swatch" style="--swatch: var(--zen-color-danger)"></span><div><dt>--zen-color-danger</dt><dd>Dangerous state</dd></div></div>
+                <div><span class="swatch" style="--zen-color-swatch: var(--zen-color-accent)"></span><div><dt>--zen-color-accent</dt><dd>Primary action</dd></div></div>
+                <div><span class="swatch" style="--zen-color-swatch: var(--zen-color-info)"></span><div><dt>--zen-color-info</dt><dd>Informational state</dd></div></div>
+                <div><span class="swatch" style="--zen-color-swatch: var(--zen-color-success)"></span><div><dt>--zen-color-success</dt><dd>Successful state</dd></div></div>
+                <div><span class="swatch" style="--zen-color-swatch: var(--zen-color-danger)"></span><div><dt>--zen-color-danger</dt><dd>Dangerous state</dd></div></div>
               </dl>
             </section>
+            <section class="token-group token-group-wide">
+              <h2>Material palette</h2>
+              <p>Warm, quiet colors inspired by paper, natural dye, clay, and wood.</p>
+              <div class="palette-grid">
+                <div><span style="--zen-color-swatch: var(--zen-color-paper)"></span><code>paper</code></div>
+                <div><span style="--zen-color-swatch: var(--zen-color-washi)"></span><code>washi</code></div>
+                <div><span style="--zen-color-swatch: var(--zen-color-linen)"></span><code>linen</code></div>
+                <div><span style="--zen-color-swatch: var(--zen-color-sumi)"></span><code>sumi</code></div>
+                <div><span style="--zen-color-swatch: var(--zen-color-brick)"></span><code>brick</code></div>
+                <div><span style="--zen-color-swatch: var(--zen-color-persimmon)"></span><code>persimmon</code></div>
+                <div><span style="--zen-color-swatch: var(--zen-color-ochre)"></span><code>ochre</code></div>
+                <div><span style="--zen-color-swatch: var(--zen-color-moss)"></span><code>moss</code></div>
+                <div><span style="--zen-color-swatch: var(--zen-color-patina)"></span><code>patina</code></div>
+                <div><span style="--zen-color-swatch: var(--zen-color-indigo)"></span><code>indigo</code></div>
+                <div><span style="--zen-color-swatch: var(--zen-color-plum)"></span><code>plum</code></div>
+                <div><span style="--zen-color-swatch: var(--zen-color-clay)"></span><code>clay</code></div>
+                <div><span style="--zen-color-swatch: var(--zen-color-wood)"></span><code>wood</code></div>
+              </div>
+            </section>
+            <section class="token-group token-group-wide">
+              <h2>Data palette</h2>
+              <p>Ten distinct aliases for charts and categorical comparisons.</p>
+              <div class="data-palette" aria-label="Data color tokens">
+                <span style="--zen-color-swatch: var(--zen-color-data-1)" title="--zen-color-data-1"></span>
+                <span style="--zen-color-swatch: var(--zen-color-data-2)" title="--zen-color-data-2"></span>
+                <span style="--zen-color-swatch: var(--zen-color-data-3)" title="--zen-color-data-3"></span>
+                <span style="--zen-color-swatch: var(--zen-color-data-4)" title="--zen-color-data-4"></span>
+                <span style="--zen-color-swatch: var(--zen-color-data-5)" title="--zen-color-data-5"></span>
+                <span style="--zen-color-swatch: var(--zen-color-data-6)" title="--zen-color-data-6"></span>
+                <span style="--zen-color-swatch: var(--zen-color-data-7)" title="--zen-color-data-7"></span>
+                <span style="--zen-color-swatch: var(--zen-color-data-8)" title="--zen-color-data-8"></span>
+                <span style="--zen-color-swatch: var(--zen-color-data-9)" title="--zen-color-data-9"></span>
+                <span style="--zen-color-swatch: var(--zen-color-data-10)" title="--zen-color-data-10"></span>
+              </div>
+            </section>
+            <section class="token-group">
+              <h2>Color ramps</h2>
+              <zen-stack gap="tight">
+                <code>neutral · red · orange · amber</code>
+                <code>green · teal · blue · violet</code>
+                <code>rose · brown</code>
+                <small>Each ramp includes 50–900 plus 950.</small>
+              </zen-stack>
+            </section>
             <section class="token-group">
               <h2>Spacing</h2>
               <zen-stack gap="tight">
@@ -126,6 +185,15 @@
           </div>
         </section>
 
+        <section class="catalog-page" data-catalog-page="icons" hidden>
+          <header class="page-heading">
+            <p class="eyebrow">Foundations</p>
+            <h1>Icons</h1>
+            <p>First-party SVG icons rendered by <code>zen-icon</code>. Icons inherit color and never depend on emoji, fonts, or an external package.</p>
+          </header>
+          <div id="iconGrid" class="icon-grid" aria-label="Zenbu icon names"></div>
+        </section>
+
         <section class="catalog-page" data-catalog-page="button" hidden>
           <header class="page-heading">
             <p class="eyebrow">Component</p>