diff --git a/frontend/src/components/ui/DesignSystemStyles.astro b/frontend/src/components/ui/DesignSystemStyles.astro
index 5d79d35..dc4cd69 100644
--- a/frontend/src/components/ui/DesignSystemStyles.astro
+++ b/frontend/src/components/ui/DesignSystemStyles.astro
@@ -482,6 +482,27 @@
     text-align: center;
   }
 
+  .state-card .loading {
+    color: var(--color-text-muted);
+    margin: 0;
+  }
+
+  .state-card .empty {
+    color: var(--color-text-muted);
+    margin: 0;
+  }
+
+  .state-card .hint {
+    font-size: 0.875rem;
+    margin: 0.5rem 0 0;
+    color: var(--color-text-muted);
+  }
+
+  .state-card .error {
+    color: var(--color-error);
+    margin: 0;
+  }
+
   .ui-auth-page {
     display: flex;
     justify-content: center;
diff --git a/frontend/src/pages/communities.astro b/frontend/src/pages/communities.astro
index 6aca0e9..ba6aaaf 100644
--- a/frontend/src/pages/communities.astro
+++ b/frontend/src/pages/communities.astro
@@ -346,22 +346,6 @@ import { API_BASE as apiBase } from '../lib/api';
     color: rgba(255, 255, 255, 0.78);
   }
 
-  .loading {
-    color: var(--color-text-muted);
-    margin: 0;
-  }
-
-  .hint {
-    font-size: 0.875rem;
-    margin: 0.5rem 0 0;
-    color: var(--color-text-muted);
-  }
-
-  .error {
-    color: var(--color-error);
-    margin: 0;
-  }
-
   .skel-title { height: 18px; width: 68%; }
   .skel-slug { height: 12px; width: 36%; }
   .skel-desc { height: 12px; width: 100%; margin-top: 0.75rem; }