diff --git a/frontend/src/components/ui/DesignSystemStyles.astro b/frontend/src/components/ui/DesignSystemStyles.astro
index 8f0056b..9197d68 100644
--- a/frontend/src/components/ui/DesignSystemStyles.astro
+++ b/frontend/src/components/ui/DesignSystemStyles.astro
@@ -539,6 +539,33 @@
     }
   }
 
+  .ui-toolbar {
+    padding: var(--ui-toolbar-pad, 1rem);
+    margin-bottom: var(--ui-toolbar-mb, 1rem);
+  }
+
+  .ui-toolbar-grid {
+    display: grid;
+    grid-template-columns: var(--ui-toolbar-cols, 1.5fr 1fr 1fr);
+    gap: 0.75rem;
+    align-items: end;
+  }
+
+  .ui-toolbar-label {
+    display: block;
+    font-size: 0.75rem;
+    letter-spacing: 0.02em;
+    text-transform: uppercase;
+    color: var(--color-text-muted);
+    margin-bottom: 0.35rem;
+  }
+
+  @media (max-width: 768px) {
+    .ui-toolbar-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+
   .ui-auth-page {
     display: flex;
     justify-content: center;
diff --git a/frontend/src/pages/communities/[slug]/proposals/index.astro b/frontend/src/pages/communities/[slug]/proposals/index.astro
index 36bee15..56b9b46 100644
--- a/frontend/src/pages/communities/[slug]/proposals/index.astro
+++ b/frontend/src/pages/communities/[slug]/proposals/index.astro
@@ -44,14 +44,14 @@ const { slug } = Astro.params;
         </div>
       </div>
 
-      <div class="toolbar ui-card">
-        <div class="toolbar-grid">
+      <div class="ui-toolbar ui-card">
+        <div class="ui-toolbar-grid">
           <div>
-            <label class="toolbar-label" for="search-input">Search</label>
+            <label class="ui-toolbar-label" for="search-input">Search</label>
             <input type="text" id="search-input" class="ui-input" placeholder="Search proposals…" />
           </div>
           <div>
-            <label class="toolbar-label" for="status-filter">Status</label>
+            <label class="ui-toolbar-label" for="status-filter">Status</label>
             <select id="status-filter" class="ui-select">
               <option value="">All statuses</option>
               <option value="draft">Draft</option>
@@ -61,7 +61,7 @@ const { slug } = Astro.params;
             </select>
           </div>
           <div>
-            <label class="toolbar-label" for="sort-select">Sort</label>
+            <label class="ui-toolbar-label" for="sort-select">Sort</label>
             <select id="sort-select" class="ui-select">
               <option value="newest">Newest</option>
               <option value="oldest">Oldest</option>
@@ -250,33 +250,6 @@ const { slug } = Astro.params;
     text-transform: uppercase;
   }
 
-  .toolbar {
-    padding: 1rem;
-    margin-bottom: 1rem;
-  }
-
-  .toolbar-grid {
-    display: grid;
-    grid-template-columns: 1.5fr 1fr 1fr;
-    gap: 0.75rem;
-    align-items: end;
-  }
-
-  .toolbar-label {
-    display: block;
-    font-size: 0.75rem;
-    letter-spacing: 0.02em;
-    text-transform: uppercase;
-    color: var(--color-text-muted);
-    margin-bottom: 0.35rem;
-  }
-
-  @media (max-width: 768px) {
-    .toolbar-grid {
-      grid-template-columns: 1fr;
-    }
-  }
-
   .list {
     display: grid;
     gap: 1rem;
diff --git a/frontend/src/pages/proposals.astro b/frontend/src/pages/proposals.astro
index df36fa3..b44fab0 100644
--- a/frontend/src/pages/proposals.astro
+++ b/frontend/src/pages/proposals.astro
@@ -16,14 +16,14 @@ import { API_BASE as apiBase } from '../lib/api';
         </div>
       </div>
 
-      <div class="toolbar ui-card">
-        <div class="toolbar-grid">
+      <div class="ui-toolbar ui-card">
+        <div class="ui-toolbar-grid">
           <div>
-            <label class="toolbar-label" for="search-input">Search</label>
+            <label class="ui-toolbar-label" for="search-input">Search</label>
             <input type="text" id="search-input" class="ui-input" placeholder="Search proposals…" />
           </div>
           <div>
-            <label class="toolbar-label" for="status-filter">Status</label>
+            <label class="ui-toolbar-label" for="status-filter">Status</label>
             <select id="status-filter" class="ui-select">
               <option value="">All statuses</option>
               <option value="draft">Draft</option>
@@ -33,7 +33,7 @@ import { API_BASE as apiBase } from '../lib/api';
             </select>
           </div>
           <div>
-            <label class="toolbar-label" for="sort-filter">Sort</label>
+            <label class="ui-toolbar-label" for="sort-filter">Sort</label>
             <select id="sort-filter" class="ui-select">
               <option value="newest">Newest first</option>
               <option value="oldest">Oldest first</option>
@@ -141,33 +141,6 @@ import { API_BASE as apiBase } from '../lib/api';
 </script>
 
 <style>
-  .toolbar {
-    padding: 1rem;
-    margin-bottom: 1rem;
-  }
-
-  .toolbar-grid {
-    display: grid;
-    grid-template-columns: 1.5fr 1fr 1fr;
-    gap: 0.75rem;
-    align-items: end;
-  }
-
-  .toolbar-label {
-    display: block;
-    font-size: 0.75rem;
-    letter-spacing: 0.02em;
-    text-transform: uppercase;
-    color: var(--color-text-muted);
-    margin-bottom: 0.35rem;
-  }
-
-  @media (max-width: 768px) {
-    .toolbar-grid {
-      grid-template-columns: 1fr;
-    }
-  }
-
   .list {
     display: grid;
     gap: 1rem;